[React] Warning: Each child in a list should have a unique "key" prop

React에서 map() 메서드를 사용할 때

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

이러한 에러가 발생하는 경우가 있습니다.

에러 원인

    render() {
        let abc = ["test1", 1004, "test2"];
        
        return(
            <ul>
                {abc.map((item) => <li>{item}</li>)}
            </ul>
        )
    }

React에서 map()을 사용하기 위해서는 배열의 각 요소마다 독립적인 key 값을 설정해 주어야 하는데
위 코드처럼 그러지 않을 경우에 에러가 발생하게 된다.

• 이때 key는 변하지 않고 유일하며 예상 가능해야 한다.
• index는 쉽게 생각할 수 있겠지만 비효율적으로 동작할 가능성이 있기 때문에 지양한다.
• 배열의 요소들 중 중복된 값이 있다면 그 또한 사용하지 않는 게 좋다.

해결 방법

    render() {
        let abc = ["test1", 1004, "test2"];
        
        return(
            <ul>
                {abc.map((item) => <li key={item.id}>{item.name}</li>)}
            </ul>
        )
    }

위 코드처럼 id라는 속성을 추가하거나 데이터 일부에 해시를 적용하여 해결할 수 있다.

ket는 형제 사이에서만 유일하면 되고, 전역에서 유일할 필요는 없다.

감사합니다 😊