230911 개발일지 TIL - React에서 'key' Prop 경고 메시지 해결(Each child in a list should have a unique 'key' prop)

React에서 'key' Prop 경고 메시지 해결(Each child in a list should have a unique 'key' prop)

React에서는 리스트 항목을 렌더링할 때 각 항목에 고유한 key prop을 제공해야 하는데 그렇지 않으면, 다음과 같은 경고 메시지가 콘솔에 출력된다.

리스트의 각 항목에 고유한 key prop을 제공하면 된다.

데이터 배열을 매핑하여 JSX 요소의 리스트를 생성하는 경우

{faqs.map((faq) => (
  <div>{faq.content}</div>
))}

위 코드는 key prop 없이 리스트를 생성하므로 경고 메시지가 발생하는데 문제를 해결하려면 다음과 같이 각 div 요소에 고유한 key prop을 제공해야 한다.

{faqs.map((faq) => (
  <div key={faq.id}>{faq.content}</div>
))}

여기서 주의할 점은 key 값으로 배열의 인덱스를 사용하지 않는 것이 좋다. 왜냐하면 배열의 순서가 변경될 경우 React가 컴포넌트 업데이트 최적화를 잘못 수행할 수 있기 때문이다.

복잡한 구조에서 'Key' Prop 경고 처리하기
모든 단계에서 고유한 key 값을 제공해야 한다.
아래 예제 코드는 중첩된 map 함수로 인해 'Key' Prop 경고가 발생하는 상황이다.

{faqs.map((faq) =>
  faq.faqs.map((innerFaq) => (
    <Collapse.Panel header={innerFaq.question} key={innerFaq.faqId}>
      <p>{innerFaq.answer}</p>
    </Collapse.Panel>
  )),
)}

위 코드에서는 faqs.map() 함수가 여러 개의 Collapse.Panel을 반환하고 있다. 이 경우, React는 이들이 하나의 배열로 묶여 있다고 가정하며, 따라서 각 배열 항목에 고유한 key prop이 필요하다.

이 문제를 해결하기 위해, 각 FAQ 항목 (즉, faq.faqs.map())을 별도의 컨테이너 요소 (예: div)로 감싸고 해당 요소에 고유한 key를 제공할 수 있다.

{faqs.map((faq) => {
  const panels = faq.faqs.map((innerFaq) => (
    <Collapse.Panel header={innerFaq.question} key={innerFaq.faqId}>
      <p>{innerFaq.answer}</p>
    </Collapse.Panel>
  ));
  return <React.Fragment key={faq.id}>{panels}</React.Fragment>;
})}

위 코드에서는 각 FAQ 항목에 대해 Collapse.Panel의 배열을 생성하고, 이를 React.Fragment로 묶어 반환한다. 그리고 이 Fragment에는 상위 FAQ 항목의 id를 key로 사용하여 고유성을 보장한다.