React - useCallback

useCallback

재정의를 통한 리렌더링을 막기 위해 사용하는 훅
주로 이벤트 핸들러나 콜백 함수를 메모이제이션하는 데 사용된다.
함수를 메모이제이션하여 동일한 함수 인스턴스를 재사용하며, 이로 인해 불필요한 리렌더링이 발생하지 않도록 한다.

컴포넌트도 함수이다.
컴포넌트가 렌더링 된다는 것은 함수가 호출된다는 것이다.

리렌더링 할 때 연산을 수행할 뿐만 아니라 함수도 다시 정의한다.

이 때 연산을 수행하는 것을 막기 위해 useMemo를 사용하였고,
함수가 다시 정의되는 것을 막기 위해 useCallback을 사용한다.

예제

아래 예제는 React.memo 함수로 감싸주었음에도 불구하고 해당 체크박스가 변경되면 나머지 체크박스의 값도 다시 렌더링되는 현상이 발생한다.

이는 함수가 재정의 되면서 새로운 메모리에 할당된 함수가 onChange prop으로 넘어오기 때문이다.

결국 이전 함수와 재정의된 함수가 다른 함수이기 때문에 리렌더링이 되는 것이다.

따라서 재정의를 막기 위해 useCallback을 사용할 수 있다.

useCallback으로 감싸주면 변경되는 체크박스만 리렌더링 되고 나머지는 리렌더링 되지 않는다.