[React] React Hooks : useCallback

 

- 컴포넌트 성능을 최적화 하는 방법

---

# useCallback

 

• 인자로 전달한 콜백함수 그 자체를 Memoization 해주는것
• 함수가 필요할 때마다 새로 생성하는게 아니라 메모리에서 가져와서 재사용하는 것
• 렌더링 → component 함수 호출 → 모든 내부 변수 초기화
• useCallback 사용 렌더링 → component 함수 호출 → Memoize 된 함수를 재사용
• 컴포넌트가 처음 렌더링 될때만 함수객체를 초기화 해주고 이후에 렌더링 될 때는 새로운 함수객체를 할당 받는게 아니라 이전에 이미 할당받은 함수객체를 계속 가지고 있으면서 재사용하는것

 

useCallback (() => {
    return value;
}, [item])

 

• 첫번째 인자 ☞ Memoization 해 줄 콜백함수
• 두번째 인자 ☞의존성배열
• 의존성 배열안에있는 값이 변경되지 않는이상 콜백함수는 변경되지 않음

​

☞ 함수객체가 메모리의 주소를 가지고 있고 렌더링 되어 초기화 된다면 함수객체가 새로운 메모리 주소를 받아서 달라졌기 때문에 의존성배열에 함수객체를 써줬어도 초기화 되어 실행하는것

 

---

 

 

📌 참고
별코딩 | 리액트 훅스 시리즈