[React] React에서의 최적화 2: useCallback 훅 정리 (feat. 리랜더링 방지)
카테고리 없음
2024. 4. 13. 13:39
useCallback이란? useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook입니다. -- 리액트 공식문서 결론만 말하면 함수가 리랜더링 되는 것을 방지해주는 훅 중 하나이다.. 레퍼런스 const cachedFn = useCallback(fn, dependencies) 매개변수 fn: 캐싱할 함숫값입니다. 이 함수는 어떤 인자나 반환값도 가질 수 있습니다. React는 첫 렌더링에서 이 함수를 반환합니다. (호출하는 것이 아닙니다!) 다음 렌더링에서 dependencies 값이 이전과 같다면 React는 같은 함수를 다시 반환합니다. 반대로 dependencies 값이 변경되었다면 이번 렌더링에서 전달한 함수를 반환하고 나중에 재사용할 수 있도록 이를 저장합니다. Reac..