2022-01-28 ( Warning: Each child in a list should have a unique "key" prop.)

- 주어진 상황 😢

리액트에서 배열에 map 함수를 사용하여 이미지을 보여주려 했다.

 

  let addThumbnail = images.map( (image)  => {
      return (<a>
        <Thumbnail />
      </a>
      )
    })

작동은 잘 되는듯 하지만 콘솔창에 에러가 떴다.

- 만난에러😈

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

 

- 원인 👌

 

배열의 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 key 값을 지정해야 한다.

 

 

- 해결과정 🧵

배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어주면 된다.

et addThumbnail = images.map( (image)  => {
      return (<a key={image.id}> // key값 넣음!
        <Thumbnail />
      </a>
      )
    })

 

 

여기서 자바스크립트의 배열은 동적이기 때문에, 다시말해 배열의 길이나 원소 등이 변할 수 있기 때문에 

배열의 index를 key prop으로 사용하는 것을 지양해야 한다.

 

 

- 느낀점 😀

저번에 리액트 배우면서 key값을 고유하게 넣어줘야 한다는것은 알고있었지만 까먹음..

 

그래도 덕분에 이 에러글도 기록할 수 있었다!

 

- 참조:

https://ko.reactjs.org/docs/lists-and-keys.html

https://codingmania.tistory.com/292

https://crong-dev.tistory.com/47