리엑트에서 리스트를 jsx로 변환하다보면 key prop 을 요구하는 경우를 마주하게 된다.
key
리엑트가 요구하는 key는 리스트를 통해 생성된 각 엘리먼트에 안정적 고유성을 제공하기 위함이라고 한다.
이때 마땅히 key 값에 넣을 만한 고유한 값이 없다면 가장 쉽게 선택할 수 있는 것은 index다.
그러나 key로 key를 사용은 지양해야 한다고 한다.
관련해서 아래의 두 자료를 읽어보았다.
(위 글은 예시도 자세하다. )
인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다.
인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다.
그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.이 부분이 매우 의미심장 하다.
- 컴포넌트의 순서가 바뀌거나
- 컴포넌트 리스트의 맨 앞에 붙이는
것 과 같은 행위가 없으면 써도 괜찮은 것 같기는 하다. (예를 들어 firstChild 등을 지우는 행위를 하면 연산이 매우 비효율적으로 일어나는 것으로 보인다.)
