
useCallback을 활용하여 불필요한 재랜더링 해결하기
2023. 5. 11. 16:30
개발이야기/React.js
React에서 컴포넌트가 재랜더링될 때, 그 컴포넌트 내에 정의된 모든 함수들은 새로 생성됩니다. 특히, 부모 컴포넌트에서 정의된 함수가 자식 컴포넌트로 props로 전달될 때, 부모 컴포넌트가 재렌더링되면 해당 함수는 새로운 참조를 가지게 됩니다. 그러면 자식 컴포넌트는 props가 변경되었다고 인식하여 불필요한 재랜더링을 하게 됩니다. 이러한 문제는 자바스크립트의 함수가 클로저(closure)라는 특성 때문에 발생하는데, 클로저는 함수가 생성된 시점의 환경을 '기억' 합니다. 이 문제를 해결하기 위해 react에서는 useCallback이라는 Hook을 사용합니다. useCallback을 사용하면 useCallback 첫번째 인자로 전달된 함수를 메모이제이션(저장)하고, A 컴포넌트가 재렌더링될 때마..