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

에러 내용

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

 

에러 이유

• 리액트에서 map을 사용하여 반복된 요소를 출력 시 key값을 지정해 주어야 한다.

보통 때 였으면 key값을 추가하면 되는데 이미 key 값이 존재한다....왜?!!

에러가 출력되는 페이지에 map()은 단 두군데에서 사용 되는데 두군데 모두 정확히 들어있는것 확인,,,

그렇다면 왜일까?

 

수정 방법

1차

key값을 index로 사용하는건 왠만하면 지양하는게 좋다라고 해서 index가 아닌 item의 값을 변경해 보았으나 효과는 없었다

 

2차 혹시 연결된 다른 컴포넌트에서 나타나는 건가 싶어 전체 확인을 하였으나 없음

 

해결

설얼마 싶은 부분이 있어 확인해 봤더니 역시나가 역시나,,,,,,,,,,

등잔밑은 어두웠다

 

지금 유지보수 중인 프로젝의 경우 랜더링 할 때 JSX가 부모요소가 하나 임에도 불구하고

 Fragment로 감싸져 있는 코드가 굉장히 많다.

아래와 같은 코드로 되어있어 최상위 태그에 key 값이 없어 발생하는 경고였다.

const Test = () => {
	items.map((item, index)=>{
        return (
            <>
                <div key={index}>
                    <img src="이미지경로" alt="" />
                    <span> text </span>
                </div>
            </>
        )
    })
}

위의 코드는 두가지 방법으로 수정 할 수 있다.

1. 아래 div태그가 아닌 Fragment에 key값을 추가해준다. 추가할 때는 약식(<></>)이 아닌 <Fragment key={keyValue}></Fragment>로 작성해 주어야 한다.
2. div태그 하나로 묶여진 컴포넌트이므로 Fragment자체를 빼버린다.

나는 간단하게 Fragment를 빼버렸다