useCallback을 이용한 함수 최적화

원래 컴포넌트가 렌더링 될 때는 그 내부의 함수도 다시 생성한다.

하지만 같은 함수를 컴포넌트가 재랜더링 될때마다 재생성하는 것은 좋은 게 아니다..

만약 부모 컴포넌트가 갖고 있는 함수가 props로 자식컴포넌트로 내려가는 상황이라고 해보자.

그럼 부모 컴포넌트가 재랜더링된다면, 이를 받는 자식도 props가 새로워지니 필요하지 않아도 재랜더링 되는 현상이 생길 수 있다.

한번 테스트 해보자.

const B = ({ message, posts }) => {
  console.log("B is redering");
  const testFunction = () => {};
  return (
    <div>
      <h1>B Component</h1>
      <Message message={message}></Message>
      <List posts={posts} test={testFunction}></List>
    </div>
  );
};

B에 더미 testFunction을 만들고 List로 보내주자.

const List = React.memo(({ posts, test }) => {
  console.log("List is rendering");
  return (
    <ul>
      {posts.map((post) => (
        <ListItem key={post.id} post={post}></ListItem>
      ))}
    </ul>
  );
});

어라? 강의 내용대로라면 자식 컴포넌트로 재랜더링 되어야 하는데 그런일이 일어나고 있지 않다. 이거 패치되거나 해서 내용이 달라진듯…?

useCallback()

어쨌든 강의 내용을 따라가보자. useCallback()은 메모이제이션된 함수를 반환하는 함수이다.

쉽게 말하면 React.memo의 함수버전이다.

사용법은, useCallback안에 콜백함수와 의존성 배열을 순서대로 넣어주면 된다고 함.