key

 

 

React에서 컴포넌트에 부여하는 key 속성은 다음과 같은 이유로 사용됩니다

 

성능 최적화

key 속성을 사용하면 React가 컴포넌트의 변경 사항을 더 효율적으로 감지할 수 있습니다. 예를 들어, 리스트에서 각 항목에 고유한 key를 제공하면 React가 항목을 식별하고 재사용하거나 변경 사항을 추적할 수 있습니다.

 

 

재사용 가능한 컴포넌트 관리

리스트나 반복되는 요소들에서 key를 사용하면 React가 요소를 식별하고 관리할 수 있습니다. 이를 통해 React는 변경된 요소만 업데이트하고 나머지는 유지합니다.

 

동기화 문제 해결

동일한 컴포넌트를 여러 번 렌더링하거나 업데이트할 때 각 컴포넌트에 고유한 key를 제공하면 React가 각 컴포넌트를 서로 구별할 수 있습니다. 이를 통해 예기치 않은 동작이나 문제를 방지할 수 있습니다.

 

 

동적 목록 업데이트

동적인 리스트나 목록을 렌더링할 때 key를 사용하면 React가 새로운 항목을 쉽게 추가하거나 삭제할 수 있습니다. 특히 삭제된 항목이나 순서가 변경된 항목을 식별하는 데 사용됩니다.

 

 

 

 

   const [answerState, setAnswerState] = useState('');
   const [userAnswers, setUserAnswers] = useState([]);
   const activeQuestionIndex =
    answerState === '' ? userAnswers.length : userAnswers.length - 1;
  
  
  <div id="question">
        <QuestionTimer
          key={activeQuestionIndex}          
        />
  </div>

 

사용예: 위의 코드처럼 key prop에 동적인 값을 할당해주면, 할당된 값이 변경될때마다 해당 key를 prop으로 부여받은 컴포넌트는 리렌더링이된다. 마운트 시 DOM에 기록된 컴포넌트를 리렌더링 할 필요성이 있을때 유용하다.