본문 바로가기
프로그래밍/react

1-12) [리액트 기초] useCallback

by 플로어코딩 2024. 2. 7.

useCallback은 컴포넌트가 리렌더링 될 때 내부에 작성된 함수를 다시 생성하지 않도록 메모리제이션하는 리액트훅이다.

 

useCallback 사용법

 

const uc  = useCallback(func, arrays);

 

 

첫 번째 인수로는 콜백 함수를 전달하고, 두 번째 인수로는 의존성 배열을 전달한다.

useCallback은 의존성 배열에 담긴 값이 바뀌면 첫 번째 인수로 전달한 콜백 함수를 다시 만들어 반환한다.

 

만약 첫 번째 인수로 전달한 콜백 ㅎ삼수를 어떤 경우에도 재성성되지 않게 하려면 의존성 배열을 빈 배열로 전달한다.

 

const uc = useCallback(func, []);

 

useReducer가 반환하는 함수 dispatch는 함수  reducer를 호출하는데, 이 reducer는 항상 최신 State를 인수로 받는다.

따라서 State 관리 도구 useState가 아닌 useReducer를 이요할 때는 함수형 업데이트를 사용하지 않아도 된다.

 

 

댓글