[react] Props&State ② - List&Key

이전 글에서 만든 WorldClock 컴포넌트는 하나 추가할 때마다 일일히 태그를 작성해야되는 귀찮음이 있었다.

이를 해결하기 위해서 리스트로 간편하게 바꿀 수 있다.

function App() {
  const cityTimeData = [
    ['서울',10],
    ['베이징',9],
    ['시드니',12],
    ['LA',17],
    ['부산',10]
  ]
  const WorldClockList = cityTimeData.map((citytime,index)=>
      <WorldClock city={citytime[0]} time= {citytime[1]} key = {index}/>
  )
   return (
    <div className="App">
      <h1 className={'myStyle'}>Hello World</h1>  
      </div>
      {WorldClockList}
      }
    </div>
  );
}

결과가 동일하게 나오는 것을 볼 수 있다. 반복성 있는 컴포넌트에서 엘리먼트는 반드시 고유한 key를 가져야한다. 그래서 index 인자를 받아 key로 추가한 것이다. 권장사항은 아님. 아래 공식문서 인용 참조

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny’s가 작성한 글인 인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명을 참고하시길 바랍니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.