React에서 배열을 올바르게 렌더링합니다.

나는 당신이 .map 을 꽤 많이 사용했고 그것이 어떻게 잘 작동하는지 이해한다고 생각합니다. React에서도 .map를 사용할 수 있습니다. 페이지에 배열을 렌더링하는 데 도움이 됩니다. 나를 위해 나는 바닐라 JS에 대한 맵 함수 내에서 키를 실제로 사용한 적이 없습니다. React의 경우 매우 중요하지만 그 이유를 살펴보겠습니다.

다음 구성 요소가 있다고 가정해 보겠습니다. 그것은 과일의 배열을 렌더링합니다.

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

위의 예에서 React는 경고를 표시합니다.

Warning: Each child in a list should have a unique "key" prop.

이제 .map 함수는 아무런 문제 없이 배열의 내용을 렌더링할 것입니다. 제 말은 단지 "경고"일 뿐이지만 키 소품을 추가하지 않으면 모두 잘못될 수 있다는 뜻입니다.

React가 요소의 위치를 ​​알 수 있도록 .map 함수의 자식에 key prop을 추가해야 합니다. 아래 링크로 이동하여 요소를 클릭하여 테스트할 수 있습니다.

https://react-fundamentals.netlify.app/isolated/final/07.extra-1.js

처음 두 예제가 마지막 예제와 어떻게 다른지 확인하십시오. 배열 인덱스를 키로 사용하는 것이 React의 기본 동작과 다르지 않다는 것을 알 수 있습니다. 인덱스를 사용하는 것은 올바르지 않습니다. 여기서 포커스 상태에서 볼 수 있듯이 포커스는 항상 해당 인덱스에 유지됩니다. 키를 사용할 때처럼 요소와 함께 이동하는 대신.

키는 고유해야 하므로 다음과 같이 코딩해야 합니다.

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li key={item.id}>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

진정한 영웅처럼 설명해주셔서 감사합니다.