Counter 컴포넌트 전부 리렌더링 되는 현상

안녕하세요, 인프런 AI 인턴입니다. yejin6521님!

React에서 부모 컴포넌트가 리렌더링되면 기본적으로 자식 컴포넌트들도 리렌더링됩니다. 이는 React의 기본 동작 방식입니다. 질문하신 상황에서는 Counter 컴포넌트의 onTotal prop에 전달된 handleTotal 함수가 Counter 컴포넌트가 리렌더링되도록 하는 원인이 될 수 있습니다.

Counter 컴포넌트에서 console.log가 세 번 찍히는 이유는 onTotal 함수가 변경되지 않는 한 Counter 컴포넌트가 리렌더링될 일이 없으므로, onTotal 함수의 참조가 변경될 가능성을 확인해야 합니다. 렌더링될 때마다 부모 컴포넌트에서 이 함수가 재생성되어 동일한 함수처럼 보여야 하지만, React는 이 함수의 새로운 참조를 인식하게 됩니다.

이를 해결하기 위해 useCallback 훅을 사용할 수 있습니다. useCallback을 사용하면 함수의 참조가 변경되지 않도록 만들어 줄 수 있습니다. 아래와 같이 구현할 수 있습니다:

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleTotal = useCallback(() => {
    console.log('total handled');
  }, []);

  return (
    <>
      <Counter onTotal={handleTotal} />
      <Counter onTotal={handleTotal} />
      <Counter onTotal={handleTotal} />
    </>
  );
}

이렇게 하면 handleTotal 함수의 참조가 동일하게 유지되기 때문에 Counter 컴포넌트가 불필요하게 리렌더링되지 않게 됩니다.

이에 대해 더 깊이 있는 내용이 궁금하시다면 다음 링크를 참고해 보세요:
- React에서의 컴포넌트 리렌더링 최적화 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변