Why is Key important in React?
📍 Key를 안쓰면 어떻게 될까?
위 코드를 보면 map() 함수를 이용해 numbers 배열을 반복 실행하고 각 항목에 대해 <li> 엘리먼트를 반환하고 배열의 결과를 listItems에 저장하고 있습니다.
이 코드를 실행하면 react에서는 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시될겁니다.
하지만 경고가 뜨더라도 DOM에 정상정으로 rendering됩니다.
왜 이런 경고가 뜨는지 알려면 리엑트에서 key가 정확히 무엇인지 알아야합니다.
🔑 Key에 대해서 알아보자
React에서 key는 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
Key는 항상 배열 내부의 엘리먼트에 지정해주어야 합니다. 이는 엘리먼트에 안정적인 고유성을 부여하기 위해서 입니다.
🍥 Key를 지정해주는 방법
가장 ideal하게 key를 선택해주는 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용해주는 것입니다. 보통은 데이터의 ID를 key로 사용해줍니다.
렌더링 한 항목에 대한 안정적인 ID가 없으면 항목의 index를 key로 사용할 수 있습니다. 하지만 항목의 순서가 바뀔 수 있는 상황이 생길 수도 있기 때문에 index를 사용하는 것은 좋지 않습니다.
✌🏻 마지막으로...
key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서는 고유하지 않아도 괜찮습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용해도 괜찮습니다!
Reference
