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

목업페이지를 구현하면서 dummydata를 작성해 mapping을 하였는데
unique "key" prop 에러가 발생하였다.

---

오류사진

---

tag에 key 값을 부여 했음에도 불구하고

<div key={id} className="mailbox-container" >

에러가 사라지지 않아 찾아보던 중 내가 작성한<> / </> short syntax 로 인해 에러가 난것임을 알 수 있었다.

---

short syntax

short syntax는 아래 코드와 같이 빈 태그를 기재하는 것인데

  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );

short syntax 태그를 항상 감싸는 태그로 사용을 해왔어서 엘리먼트라 인식을 못해
key값을 아래 작성한 <div>에 주어서 발생한 오류였다

지금 생각하면 당연한 에러였는데 key를 전달하는 내용에만 초점을 두어서 에러를 핸들링하는데 시간을 소요하였다..

• short syntax 는 key를 전달 해줄 수 없다

---

(다시한번 보는) key 속성

React에서 map 메소드 사용 시, key 속성을 넣어야 하며
key 속성의 위치는 map 메소드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어야한다

---

Error 코드

  return (
    <>
      {dummydata.length === 0
        ? <div className="mailbox-container-empty"> 받은 편지가 없습니다.</div>
        : dummydata.map((el, id) => {
          return (
             //<> 빈 Tag로 감싸주어서 에러 발생 (주석처리 하니 해결)
              <div key={id} className="mailbox-container" >
                <div className="sort-readCheck"> {el.isRead === false ? "안읽음" : "읽음"} </div>
                <div className="icon-mail">
                  {el.isRead === false
                    ? <GoMail size="60" />
                    : <GoMailRead size="60" />}
                </div>
                <div className="text-mail"> {el.title} </div>
                <div className="text-mail" >
                  보낸사람 : {el.writerName} / 도착날짜 : {el.received_at}
                </div>
              </div>
            // </>
          )
        })}
    </>
  )

---

참고사이트

• React short syntax 공식문서

---

코드를 작성하며 short syntax 편리하다 생각되어 자주 사용하였는데 잘 알지 못하고 코드를 적어서 고생을 하였다.
당연하다고 생각 된 부분들도 에러가 발생한다면 맞다고 생각 한 코드들도 짚고 넘어가면서 에러를 확인해야겠다.