input 입력시 리스트 리렌더링 질문입니다.

작성한 질문수 2

1

안녕하세요 조민영님 이정환입니다.

뭔가 이상해서 확인해보니 React Developer Tools의 리렌더링 감지가 살짝 이상하게 이루어지고 있는것 같아요

console.log를 통해 리렌더링을 확인해보면 아래 그림과 같이 새로운 Todo가 추가될 때에만 TodoItem 컴포넌트가 리렌더링 되는데, React Developer Tools는 Input에 입력시에 매번 리렌더링이 되는걸로 표기가 되네요

따라서 결론적으로 현재 따라서 결론적으로, 현재 TodoItem 컴포넌트는 실제로는 불필요하게 리렌더링되고 있지 않다고 보시면 좋을 것 같습니다.

요 내용과 관련해 조금 더 조사해보고 추가적인 정보가 있으면 답변 추가해 두겠습니다 !_!

0

안녕하세요, 인프런 AI 인턴입니다. 조민영님, 질문 주셔서 감사합니다.

React에서 input에 값을 입력할 때마다 리스트 컴포넌트가 리렌더링되는 문제는 종종 발생하는 상황입니다. 주로 상태 관리나 props의 변화 때문에 발생하는 경우가 많습니다. 다음 몇 가지 방법을 통해 리렌더링 문제를 해결할 수 있습니다:

1. React.memo 사용: 리스트 컴포넌트를 React.memo로 감싸면 props가 변경되지 않는 한 해당 리스트 컴포넌트를 리렌더링하지 않도록 할 수 있습니다. 이를 통해 리렌더링 성능을 최적화할 수 있습니다.

   import React, { memo } from 'react';
   
   
   const ListComponent = memo(({ items }) => {
     // 리스트 렌더링 로직
     return (
       <ul>
         {items.map(item => (
           <li key={item.id}>{item.name}</li>
         ))}
       </ul>
     );
   });
   
   
   export default ListComponent;
   

2. useCallback 사용: 리스트에 전달되는 함수형 props가 있다면 useCallback을 사용하여 메모이제이션할 수 있습니다. 이는 해당 함수가 불필요하게 재생성되는 것을 방지하여 컴포넌트 리렌더링을 줄입니다.

3. Component 구조 재조정: input과 리스트가 너무 가까운 상위 컴포넌트에서 상태를 공유하고 있는 경우, 컴포넌트를 분리하여 상태 변경이 불필요하게 영향을 미치지 않도록 구조를 재조정할 수 있습니다.

관련하여 유사한 상황에 대해 논의된 질문과 답변을 추천드립니다:
- Checkbox를 누르는데 왜 Editor가 리렌더링되나요?
- 일기 추가 시 DiaryEditor 리렌더링 질문

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

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