[React] useCallback을 이용한 최적화

React.memo()로 성능 최적화할 수 있었지만
실제로 부모 컴포넌트에서 자식 컴포넌트로 props를 내릴경우
부모 컴포넌트가 렌더링되면 자식 컴포넌트도 렌더링이 되므로..
react memo로 감싸줬음에도 불구하고 다시 리렌더링되는 것이다..?

그럼 되게 비효율적이잖아!
그래서 이를 해결할 방법이 바로 React.useCallback 함수다.

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

의존성 배열에 바뀐 부분이 없다면 메모이제이션된 함수를 계속 사용하므로
동일한 참조 값만을 사용하는 함수가 된다.
의존성 배열에 넣어준 값이 바뀌어야지만 그때 다시 함수가 생성되는 것이다.

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

export default function B({ message, posts }) {
  console.log('B component is Rendering')
  const Func= useCallback(()=>{},[]);
  return (

    <div>
      <h1>B component</h1>
      <Message message={message} />
      <List posts={posts}  func={Func}/>
    </div>
  );
}

위 코드를 보면 list component를 memo()로 감싸줬고, B 컴포넌트에 useCallback을 설정했다. console로 어느 컴포넌트가 렌더링이 되는지 살펴보면

이렇게 B 컴포넌트만 렌더링 되는 걸 확인할 수 있었다!

따라서 렌더링이 필요하지 않는 컴포넌트를 제외한 것만 렌더링 됨으로써 최적화 가능!