[React] List와 Key 개념

여러 개의 컴포넌트 반복 출력하기

✅ map 활용

return (
  <>
    {cardInfos.map((info)=>(
      <Card imgSrc={info.imgSrc} title={info.title} subtitle={info.subtitle] author={info.author} />
    ))}
  </>
)

Key

리액트가 어떤 항목을 변경, 추가, 삭제 시에 식별하는 것을 도와주는 역할을 한다.

즉, 요소의 고유성을 부여하기 위함으로 배열 내부 요소에 지정해주면된다.

대부분 데이터의 ID를 key로 부여한다. 만일 ID가 존재하지 않는다면 인덱스를 key로 사용해주도록 한다.

※ map() 함수 내부에 있는 요소에 key를 넣어주는 것이 좋음

return (
  <>
    {cardInfos.map((info)=>(
      <Card key={info.id} imgSrc={info.imgSrc} title={info.title} subtitle={info.subtitle] author={info.author} />
    ))}
  </>
)

하지만, 인덱스를 사용하는 것은 리액트로부터는 권장하지 않는다.

왜냐하면 성능 저하나 state 관련 문제가 발생할 수 있기 때문인데 

<ul>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
</ul>

<ul>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
  <li>세번째 리스트</li>
</ul>

위와 같이 두 리스트 사이의 변경은 잘 작동하지만 

<ul>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
</ul>

<ul>
  <li>세번째 리스트</li>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
</ul>

다음과 같은 두  리스트 사이의 변경은 종속 트리를 유지하지만 모든 자식을 변경해야 하므로 별로 좋지 않다.

 

💡이를 해결하기 위해서 key 속성을 이용하는데 key를 추가하여 트리의 변환 작업을 효율적으로 수행하도록 도와주는 것이다.

<ul>
  <li key="1">첫번째 리스트</li>
  <li key="2">두번째 리스트</li>
</ul>

<ul>
  <li key="3">세번째 리스트</li>
  <li key="1">첫번째 리스트</li>
  <li key="2">두번째 리스트</li>
</ul>

또한, 배열이 재배열되면서 컴포넌트의 state와 관련한 문제가 발생하기도 한다.

➡️랜더링이 잘 못 된다는 것!

 

 

추가로 key는 형제 사이에서만 고유한 값이어야 한다.

이 말은 전체 범위에서 고유할 필요는 없다는 뜻이다. 두 개의 다른 배열을 만들 때에 동일한 key 사용이 가능하다!