기본적으로 세가지 hook은 dependency 관계에 있는 변수 값이 변화하는 것에 연동되어 실행되는데, 구체적인 차이가 무엇인지 비교해보기
useEffect( () => { const subscription = props.source.subscribe(); return () => { subscription.unsubscribe(); }; }, [props.source], );
- class component의 life cycle 함수(side effect)를 function component에도 동일하게 사용가능
- 최초 컴포넌트 마운트 되는 경우, 컴포넌트 내 레이아웃 배치와 랜더링이 완료된 후에 실행
- 두 번째 인자(배열)의 요소로 지정하면, 해당 요소 값의 업데이트 되는 경우에만 실행
- 그러나, state나 props를 dependency로 지정하면, 불필요한 랜더링 발생 가능
const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], );
- memoization 된 콜백(함수) 자체를 반환
useCallback(fn, deps)
은useMemo(() => fn, deps)
은 동일- 의존성이 변경되는 경우, 이전에 기억하고 있던 함수 자체와 비교해서 다른 경우에만 리랜더
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
- memoization 된 값을 반환
- 의존성이 변경되는 경우, 이전에 기억하고 있던 리턴 값과 비교해서 다른 경우에만 리랜더
- useMemo에서 전달된 함수는 랜더링 중에 실행되므로, 랜더링 중에서 실행하지 않는 함수는 useEffect를 사용할 것
- useRef와의 차이는, useRef는 DOM element의 특정 속성 값을 기억한다면, useMemo는 특정 함수의 리턴 값을 기억하는 것
https://ko.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect