useCallback과 함수재생성

fpg1·2023년 11월 27일

useCallback을 공부하다 다음의 문장을 보고 의문이 들었다

함수 내부에서 상태 값에 의존해야할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 합니다.
(리액트를 다루는 기술, 개정판 209p)
(강조는 제가 했습니다)

주의 하실 점은, 함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 입니다. 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없습니다.
(벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/basic/18-useCallback.html)
(강조는 제가 했습니다)

아쉽게도 왜 그렇게 해야하는지에 대해 명쾌한 설명이 없다
이것저것 찾아보니 다음의 설명이 제일 명쾌했다

(...) 컴포넌트 내부에 작성된 함수는 컴포넌트가 다시 렌더링될 때마다 매번 새롭게 만들어집니다 (...)
useCallback훅은 컴포넌트 내부의 함수를 캐싱하여 다시 렌더링되더라도 함수를 매번 생성하지 않도록 해줍니다(...)
useCallback훅에 의해 캐싱된 함수는 함수가 생성될 때의 상태나 속성을 참조하기 때문입니다.
(원쌤의 리액트 퀵스타트 with 타입스크립트 239-240p)

profile
backend

0개의 댓글