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

❗문제 내용

React 단골 경고문... map() 함수를 사용할 때 각 Item마다 독립적인 key 값을 설정해주지 않으면 나타나는 경고문이다. 단순히 요소들을 나열할 때 사용하기도 하지만, 이 요소들을 구분해야 할 수도 있기 때문에, 각 요소마다 고유한 key값을 가지고 있어야 한다. index 값으로 간단히 넣을 수도 있지만, index로 값을 넣을 경우 고정된 값이 아니기 때문에 문제가 발생할 수 있기 때문에, id 값을 따로 넣어주는 게 더 좋다고 알려져 있다👀

⚒️ 문제 해결

기존 코드

{props.typeDesc.split('\n').map((txt) => (
  <>
  {txt}
  <br />
  </>
))}

하지만 나의 경우... 각 요소를 구분할 필요도 없고, 마땅히 사용할 id 값도 따로 없기 때문에 그냥 편리하게 index 값을 사용하기로 했다 ^^; 적절한 조건을 충족시키는 경우 이렇게 사용해도 괜찮...다!

변경한 코드

{props.typeDesc.split('\n').map((txt, idx) => (
  <div key={idx}>
    {txt}
	<br />
  </div>
))}

key 값으로 index를 넣어주면 손쉽게 해결할 수 있으나, 각 요소를 구분할 필요가 있을 때는 따로 id 값을 사용하자.

🙇‍♂️ 참고자료

[React] 배열의 index를 key로 쓰면 안 되는 이유