계기
강의를 듣다가
컴포넌트를 통해 전달되는 함수는
useCallback을 꼭 써서 최적화를 시키라
는 말을 들었다.
이 말은 무슨 말일까!
아마 나중에 React.memo를 이용해 렌더링을 막아서 최적화를 진행할 터인데,
이때 prop으로 전달되는 함수가 재선언 되지 않게 하기 위해 그렇게 하는 것으로 보인다.
그런데 이것에 대해 검색해보다가 다음과 같은 사실을 알게 되었다.
- useCallback에서 callback 함수 내에 사용되는 모든 값들은 deps에 있어야 한다.
그렇지 않다면 가장 최신값을 보장하지 못한다.이는 useEffect에서 비동기처리를 했을 때와 같은 이유로 보인다.
그때를 되짚어보면 useCallback을 통해 memoization된 함수는 이전 컴포넌트 함수의 클로저이기 때문!
- 만약 사용되는 변수가 이전의 state 값이라서 그 값을 deps에 넣어줘야 한다면,
함수형 업데이트로 deps에서 제거해 줄 수 있다.예를 들어 useCallback내의 함수가
increment(prev++)이런 형태였다면
increment(prev=>prev++)같은 형태로 바꿔주면 된다.useCallback에 deps로 등록한 이유가 최신값 보장받기 위해서였기 때문!
