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

안녕하세요 flamewizkey님 이정환입니다.

TodoItem의 체크박스를 클릭했을 때, TodoItem의 부모 컴포넌트들(TodoList, App 등)이 리렌더링 되는 현상은 버그가 아닌 자연스러운 현상입니다. 아래는 강의 화면 캡쳐인데요 아래 화면에서도 부모 컴포넌트들은 리렌더링 되고 있는것을 확인하실 수 있습니다.

본 챕터의 핵심 포인트는 특정 TodoItem 컴포넌트의 체크박스가 클릭되었을 때, 다른 TodoItem 컴포넌트가 불 필요하게 리렌더링 되지 않도록 최적화 하는 작업입니다. 따라서 다른 TodoItem이 아닌 부모 컴포넌트의 리렌더링 여부는 핵심이 아닙니다.

참고로 부모 컴포넌트들이 렌더링 되는 이유는 간단합니다. TodoItem의 체크박스가 클릭이 되면 App 컴포넌트의 todos State 값에 변화가 발생하게 되고 이로 인해 App 컴포넌트가 리렌더링 되어 App 아래의 모든 컴포넌트가 리렌더링 되기 때문입니다.

안녕하세요, 인프런 AI 인턴입니다. flamewizkey님께서 겪고 계신 TodoItem 컴포넌트의 리렌더링 문제에 대해 설명드리겠습니다.

리액트에서 컴포넌트가 리렌더링되는 주된 이유는 다음과 같은 경우입니다:

1. 부모 컴포넌트의 리렌더링: 부모 컴포넌트가 리렌더링되면 해당 부모의 자식 컴포넌트들도 함께 리렌더링될 수 있습니다.

2. 컴포넌트의 상태 변경: 자체 상태(state)가 변경될 때마다 관련 컴포넌트는 리렌더링됩니다.

3. Props 변화: 부모로부터 받은 props가 변경될 때마다 자식 컴포넌트는 리렌더링됩니다.

flamewizkey님이 링크해주신 GitHub 리포지토리를 기반으로, 여러 번의 리렌더링이 발생하는 원인을 알아보겠습니다.

리렌더링 및 해결 방안

1. 상태 관리 확인: 컴포넌트 내에서 사용하는 state가 어떻게 변하는지 확인하세요. 상태 변화는 항상 리렌더링을 유발합니다.

2. React.memo 사용 고려: 자식 컴포넌트가 props에 따라 리렌더링되는 것을 방지하기 위해 React.memo를 사용하여 메모이제이션을 적용할 수 있습니다. 이를 통해 특정 props가 변할 때만 리렌더링되도록 설정할 수 있습니다.

   import React, { memo } from 'react';

   const TodoItem = memo(({ todo, onChange }) => {
     // TodoItem 컴포넌트 코드
   });

   export default TodoItem;

3. useCallback 사용 검토: onChange와 같은 함수 props가 부모로부터 전달될 때, useCallback을 활용하여 함수가 새로운 객체로 생성되지 않도록 해보세요. 이렇게 해야 함수를 통해 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지할 수 있습니다.
   

참고할 수 있는 유사한 문제 해결 사례

1. 일기 추가 시 DiaryEditor 리렌더링 질문

   • 설명: React의 상태 초기화 과정에서의 State 업데이트와 관련한 리렌더링 이슈를 분석하고 강조합니다.
     

2. Checkbox를 누르는데 왜 Editor가 리렌더링되나요?

   • 설명: 특정 이벤트가 다른 컴포넌트의 리렌더링을 유발하는지에 대한 분석과 솔루션을 제공합니다.
     

위 질문과 답변을 통해 useCallback, React.memo 및 상태 관리에 대한 좀 더 심화된 이해를 얻을 수 있습니다.

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