React / useCallback() 정리

 

 

 

useCallback( )

 

React에서 useCallback은 함수를 메모이제이션 하는 훅이다.

불필요하게 새로운 함수가 계속 만들어지는 것을 방지하기 위해 사용한다.

 

const memoizedFunction = useCallback(() => {}, [ ]);

 

- 첫 번째 인자 : 메모이제이션할 함수

- 두 번째 인자 : 의존성 배열

- 배열 안의 값이 바뀔 때만 새로운 함수를 생성한다.

- 배열 안 값이 바뀌지 않으면 이전에 생성한 함수를 재사용한다.

 

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Clicked!");
  };

  return <button onClick={handleClick}>Click me</button>;
}

 

- 렌더링 될때마다 handleClick은 새로운 함수가 된다.

- 만약 이 함수를 props로 자식 컴포넌트에 넘기면, 자식 컴포넌트는 항상 새로운 props를 받은 것처럼

  인식해서 불필요하게 다시 렌더링 될 수 있다.

 

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []); // 의존성이 없으면 항상 같은 함수 재사용

  return <button onClick={handleClick}>Click me</button>;
}

- useCallback()을 사용하면 렌더링이 다시 일어나도 같은 함수 객체를 재사용한다.

- 따라서 자식 컴포넌트에 전달하더라도, 불필요한 렌더링을 막을 수 있다.

해당 기능을 언제 사용해야 할까

 

1. 자식 컴포넌트에 함수를 Props로 넘길 때

2. 함수가 큰 연산을 포함하거나 자주 생성 될 때 

 

보통 useCallback() 함수를 부모에서 사용하면(해당 함수는 특정 경우에만 재생성) ->

자식에서 React.Memo() 로 받는다.(전달받는 props가 바뀌지 않으면 해당 컴포넌트는 재 렌더링 되지 않는다.)