[React] return할 때 unique key가 필요한 이유

💥 문제 발생

export default function Category({category}) {
    return (
        /* 생략 */
            {category.map( (category, i) => {
                return (<dd key={i}> {category}</dd>);
            })}
        /* 생략 */
    )
}

Warning: Each child in a list should have a unique "key" prop.

카테고리 값은 나왔지만 warning

return 값에서 map을 사용해 return 값을 주었는데 실행은 되지만 warning 메시지가 떴다.

 

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. 
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다.
이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
- 리액트 공식 홈페이지 

 

key는 렌더링 했을 때 어떤 변화가 있는지 알아내기 위해 사용한다. 불필요한 렌더링 방지를 위해 각 자식 컴포넌트 마다 구분해줄 수 있는 unique key가 필요한 것이다. 

 

✅ 해결 방법

1. 임의의 index 값 지정

{category.map( (category, i) => {
	return (<dd key={i}> {category}</dd>);
})}

return값 중 최상단에 key값이 들어가야한다. 고유한 값이 있으면 그 값을 주면되지만 일단은 임의로 인덱스값을 키 값으로 주었다. 하지만 인덱스 값은 해당 카테고리 값들이 추가되거나 삭제되지 않는다면 문제 없지만 예상 못할 상황(재배열 등)이 발생할 수 있기때문에 유일해야만하는 key값으로 적절하지 않다.  그리고 소괄호 묶는 이유는 하나면 생략되지만 두 개 이상은 묶어주야한다.

 

2. 배열의 index값 사용하기

{category.map( category => {
    return (<dd key={category}> {category}</dd>);
})}

category의 값만 넘어오고 있기때문에 배열의 index값을 key로 사용했다. 해당 방법은 많이들 사용한다고 한다. 

 

 

참고 

- https://itprogramming119.tistory.com/entry/React-Warning-Each-child-in-a-list-should-have-a-unique-key-prop-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

- https://codiving.kr/55