useCallback 또한 메모이제이션을 통해 컴포넌트의 성능을 최적화 시켜준다.
인자로 전달한 콜백 함수 자체를 메모이제이션 해주는 것.
함수형 컴포넌트
<Component / > 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화
함수형 컴포넌트 속 함수를 useCallback()으로 감싸주면?
<Component / > 렌더링 → Component 함수 호출 → Memoize 된 함수를 재사용
함수도 매번 새로운 객체로 만들어진다.
컴포넌트 렌더링 사이에 값을 안정적으로 유지하는데 사용된다.
useCallback(() => {
return value;
}, [item])
Next.js 입문하기 (0) | 2024.05.15 |
---|---|
Styled-component의 CSS Reset하는 방법 (0) | 2024.05.04 |
useMemo() (0) | 2024.03.12 |
useReducer() (0) | 2024.03.11 |
useEffect() (0) | 2024.03.08 |