key prop
⚠️ Warning: Each child in a list should have a unique "key" prop.
무조건 한번씩은 보게되는 key prop Warning 메세지이다.
이 에러는 왜 발생하는걸까? 🤷♀️
key prop의 역할
key props는 React에서 성능을 최적화하고 컴포넌트의 상태를 관리하는 데 유용한 도구이다.
어떤 항목이 변경,추가 또는 삭제될 때 React는 항목을 식별하기 위해 key props를 사용한다. 그래서 보통 리스트와 같은 컴포넌트에서 사용되는데, 리스트에 항목이 추가되거나 변경될 때 react는 key props를 사용해서 어떤 요소가 변경되었는지 알 수 있다. 때문에 변경된 요소만 다시 렌더링할 수 있어 효율적이다. (불필요한 리렌더링 방지✨)
React는 Virtual DOM을 사용하여 요소의 변경 사항을 찾아내서 반영한다. (이전 DOM 포스팅 참고) key props는 React가 Virtual DOM에서 요소를 찾아서 비교할 수 있도록 도와준다.
따라서 변경될 리스트 요소들에는 key props를 꼭 설정해줘야한다.🌟
예시)
리스트 컴포넌트에 key Props를 전달하는 예시를 살펴보자.
playlist 배열을 돌며 목록 태그를 생성하는 예제이다. key 값으로 map 인자의 index를 설정해주었다.
💥위 예시의 문제점
key props를 잘 설정해주었다. 무엇이 문제일까?
바로 key props로 배열의 인덱스를 사용했다는 점이다. 이건 매우 좋지 않은😩 방법이다. 특히 동적으로 변하는 리스트의 경우!!
위에서 설명했듯이 key prop은 컴포넌트를 식별하는 값이다. 따라서 이 값은 유니크해야한다. 하지만 배열 값의 순서가 바뀌면 인덱스는 다시 배열의 첫번째 인자부터 index 값을 지정해준다. 즉, 배열의 순서가 바뀌면 배열 내 값들의 key 값도 변경된다는 얘기이다. (unique하지 않다는 소리!!)
✅ 해결 방법
key 값에 고유한 값을 넣어주자!!
위 예제를 더 나은 방법으로 바꿔보자
key 값으로 music 값을 넣어줬다. 배열의 순서가 변해도 music 값이 Key 값으로 들어가기 때문에 훨씬 안정적이다.
이런식으로, key 값에는 고유한 값을 넣어줘야한다!!👊
