[React] Hook : useCallback, useMemo

불필요한 렌더링을 줄이기 위해 사용하는 방법들

- React.memo : 컴포넌트 캐싱

- useCallback : 함수캐싱

- useMemo : 값 캐싱

 

React.memo

function Box () {
     return <div>박스</div>;
}
export default React.memo(Box);

 

 

❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다.

-> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.

function Parent () {
     const [count, setCount] = useState(5);
     const initCount = () => setCount(0);
     return <div><Box initCount={initCount}/></div>;
}
function Box ({ initCount }) {
     return <div><button onClick={() => initCount()}>초기화</button></div>;
}
export default React.memo(Box);

 

 

 

useCallback

const cachedFn = useCallback(fn, dependencies)
    - fn : 캐싱할 함수
    - dependencies : 값이 변경되면 경우, 반응할 값들의 목록

function Parent () {
     const [count, setCount] = useState(5);
     const initCount =useCallback(() => setCount(0), []);
     return <div><Box initCount={initCount}/></div>;
}
function Box ({ initCount }) {
     return  <div><button onClick={() => initCount()}>초기화</button> </div>;
}
export default React.memo(Box);

 

useMemo

: 재렌더링 사이에 계산 결과를 캐싱하기 위해 사용한다. (공식 문서)

const cachedValue = useMemo(calculateValue, dependencies);
    - calculateValue : 캐싱하려는 값을 계산하는 함수. 순수해야 하며 인자를 받지 않고, 모든 타입의 값을 반환할 수 있어야 한다.
    - dependencies : 변경되는 걸 감지할 값들의 목록

const value = useMemo( () => heavyWork(), [] );