React, Next, Redux/🚀 React with Hooks 검색 결과

해당 글 18건

custom hook에서의 Array vs Tuple 반환

다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자. import { useState, useCallback } from 'react' const useToggle = (initialState: boolean) => { const [state, setState] = useState(initialState) const toggle = useCallback(() => { setState((state) => !state) }, []) const open = useCallback(() => setState(true), []) const close = useCallback(() => setState(false), []) return [state, open, close, toggle] } export..
React, Next, Redux/🚀 React with Hooks 2021. 11. 29. 10:45

custom hook (4) : intersection observer를 활용한 useScrollFadeIn hook

intersection observer 스크롤을 내리다가 특정 element가 보이는 시점에 애니메이션이 동작하는 UI를 보셨을 겁니다. dom요소의 가시성을 측정하는 intersection observer를 활용하면 됩니다. 찾아보니까 이것도 많이 쓰더라구요? 커밋이 1번 뿐인데 직접 구현해도 되긴 합니다. www.npmjs.com/package/react-intersection-observer react-intersection-observer Monitor if a component is inside the viewport, using IntersectionObserver API www.npmjs.com useScrollFadeIn hook import { useRef, useEffect, useCa..
React, Next, Redux/🚀 React with Hooks 2021. 1. 24. 19:40

custom hook (3) : scrollIntoView hook

useRef로 잡은 DOM이 화면에 보이도록 scroll을 하는 hook입니다. 일반 HTML에서는 태그를 이용하여 같은 페이지의 요소로 연결하는 Fragment를 사용할 수 있습니다. darrengwon.tistory.com/227 그런데 React에서는 이게 잘 안 먹기도하고, * 왜 안먹히는가? => Component는 native html 태그가 아니기 때문입니다. 따라서 div로 한 번 묶어주면 작동은 합니다. 더 나아가 애니메이션적인 요소도 없이 단순 jump로 이동합니다. 따라서, useRef가 보일 때까지 smooth하게 스크롤을 당겨보기로 했습니다. scrollIntoView를 이용하면 되겠군요. developer.mozilla.org/en-US/docs/Web/API/Element/sc..
React, Next, Redux/🚀 React with Hooks 2021. 1. 23. 20:01

custom hook (2) : setInterval wrapping하기

이건 제가 굳이 설명하기보다 좋은 글이 있으니 이를 첨부하도록하겠습니다. overreacted.io/making-setinterval-declarative-with-react-hooks/ Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점 Dan abramov의 https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 번역입니다.All copyrights to Dan Abramovtranslated by Jake seoT..
React, Next, Redux/🚀 React with Hooks 2021. 1. 21. 03:03

custom hook (1) : Detect click outside of DOM

아래와 같은 notification(혹은 dropdown)은 다른 곳을 눌렀을 때 해당 dom을 지워줘야 한다. 당연히 구현 자체는 클릭하면 showPopUp이란 state가 true/false로 토글되면서 해당 dom을 보여주냐, 마느냐가 결정됩니다. Notice ({popUpNumber}) {showPopUp && } 문제는 완전 다른 곳을 클릭했을 때입니다. 이 경우 상식적으로 해당 드랍 다운을 꺼줘야 하는데 이를 어떻게 감지할까요? 아래와 같이 해주면 됩니다. 설명은 주석으로 달았습니다. 간단히 요약하자면, 화면 전체에 event를 걸어놓고서, 클릭 이벤트가 발생한 곳의 dom이 지정한 dom이 아니면 로직을 발동시키는 것입니다. import { useEffect } from 'react'; fu..
React, Next, Redux/🚀 React with Hooks 2021. 1. 21. 03:02

useState의 지연 초기화 (Lazy initial state)

공식문서에서 다루는 Lazy initial state은 다음과 같이 설명이 되어 있다. The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render: const [state, setState] = useState(() => { const initialState = someExpensiveComputat..
React, Next, Redux/🚀 React with Hooks 2020. 10. 29. 21:13

useLayoutEffect로 동기적으로 화면을 업데이트해보자!

useLayoutEffect가 뭐지? useLayoutEffect를 다른 분의 코드에서 보게 되어 무엇인지 알아보기로 했다. import React, { useEffect, useLayoutEffect } from 'react'; function App() { useLayoutEffect(() => { console.log('useLayoutEffect') }) useEffect(() => { console.log('useEffect') }) console.log('render') return ( render! ); } export default App; 위 컴포넌트를 렌더하면 다음과 같이 차례대로 출력된다. 렌더 => useLayoutEffect => useEffect 순서대로 실행된다는 것이다. 그러..
React, Next, Redux/🚀 React with Hooks 2020. 10. 1. 16:04

useState와 useEffect로 반응형 레이아웃 구현하기

반응형을 제외하고, 단순히 모바일인지 브라우저인지를 감지하기 위해서는 React에서는 react-useragent 패키지를 통해서 UA로 모바일을 감지하는 게 더 나은 것 같네요. Next면 서버 사이드 측에서 UA를 감지하면 됩니다. import { withUserAgent } from "react-useragent"; function isMobile() { if (ua.mobile) return true; return false; } export default withUserAgent(PaymentForm); 왜 Styled-Componenent + Media Query를 사용하지 않느냐고 물을 수 있는데, 이번에 toast ui를 사용하게 되면서 위 조합을 사용할 수 없게 되었다. 스타일링을 하는 ..
React, Next, Redux/🚀 React with Hooks 2020. 8. 9. 14:17

useMemo

공시 홈페이지에서 딱히 예제를 보여주고 있지 않습니다. Returns a memoized value. Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render. 컴포넌트 내부에서 발생하는 연산을 최적화하는데 사용한다고 합니다. 최적화라는 관점에서 useCallback, useMemo가 사용된다고 보시면 됩니다. useMemo가 컴포넌트 내부에서 진행되는 연산을 최적화한다면 useC..
React, Next, Redux/🚀 React with Hooks 2020. 7. 5. 22:33

useReducer

공식문서에 있는 내용을 복사해서 가져왔습니다. Reducer 관련 내용을 다른 파일에 분리하는 장점이 없으니 한 페이지에 모두 몰아서 살펴보도록합시다. useReducer를 활용해서 redux를 사용하는 방법입니다. 일반 redux랑 사용하는 거랑 다른 점이 없습니다만 useReducer를 사용해서 해당 디스패치를 곧바로 사용할 수 있다는 점 정도가 다른 점이겠네요. 음... 좀 더 써봐야 알겠지만 react-redux에서 제공해주는 useDispatch를 사용하는 게 더 손에 익는 것 같습니다. import React, { useReducer } from "react"; const initialState = { count: 0 }; const reducer = (state, action) => { sw..
React, Next, Redux/🚀 React with Hooks 2020. 7. 5. 21:16