Each child in a list should have a unique "key" prop. 해결 방법

 

 

이번 글에서는 Warning: Each child in a list should have a unique "key" prop. 에러 해결 방법에 대하여 알아보겠습니다.

 

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

 

 

[에러가 발생한 코드]

class TestComponent extends Component {
    render() {
        let arr = ["코딩병원", 119, "코딩병원"];
        
        return(
            <ul>
                {arr.map((item) => <li>{item}</li>)}
            </ul>
        )
    }
}

 

 

[에러 원인]

react에서 map() 메서드를 사용하기 위해서는 배열의 각 Item마다 독립적인 key 값을 설정해야 합니다.

하지만, 위의 코드를 보니 key prop과 관련한 세팅이 전혀 없습니다.

 

 

[해결 방법]

class TestComponent extends Component {
    render() {
        let arr = ["코딩병원", 119, "코딩병원"];
        
        return(
            <ul>
                {arr.map((item) => <li key={item}>{item}</li>)}
            </ul>
        )
    }
}

 

key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다.

가장 먼저 생각나는게 Index지만, react에서는 Index로 key 값을 주는 것을 지양하고 있습니다.

항목들이 재배열(삽입, 삭제)되지 않는다면 이 방법도 잘 동작할 것이지만 아닌 경우 비효율적으로 동작할 것입니다.

그러면 위의 코드처럼 Item값으로 세팅하면 정답일까요? 

 

만약, 배열의 item들 중에 같은 값을 가지고 있다면 어떻게 될까요?

key가 중복됩니다. 중복되면 독립적인 key 값이 아니므로 

Encountered two children with the same key, `코딩병원`. 의 에러가 콘솔에 출력됩니다.

 

가장 좋은 방법은 ID라는 속성을 추가해주거나 데이터 일부에 해시를 적용하는 방법입니다.

해당 key는 오로지 형제 사이에서만 유일하면 되고, 전역에서 유일할 필요는 없습니다.

<li key={item.id}>{item.name}</li>

 

 

출력 화면

 

 

References

react.org