[React] 리액트 키에러 | Warning: Each child in a list should have a unique "key" prop 에러

 

map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 

 

피흘리는 콘솔창..

 

하지만 이 문제는 이미 알고 있던 부분이였다. 

react에서는 key를 통해 기존트리와 이후 트리의 자식들이 일치하는지 확인하기때문에, 효율적으로 렌더링 하기 위해선 key를 사용해야한다! 

더해서 , key를 인덱스로 사용할 수 도있는데 인덱스 값은 재배열이 될 경우 비효율적으로 동작한다. 따라서 index를 key로 사용하는것은 지양하자! 

 

---

아는 에러가 나와서 기분좋게 해결하려고 내 코드를 봤다 ^_^

return (
    <ul >
      {followpost && followpost.map((post) => {
        return (
        <>
          <PostStyle key={post.id}>  // 여기... key있는데..
            <UserChat userName={post.author.username} userId={post.author.accountname} img={imgCheck(post)} />
            <PetImg src={"https://mandarin.api.weniv.co.kr/" + post.itemImage}></PetImg>
            <TxtBox>
              <TitleTxt>{post.itemName}</TitleTxt>
            </TxtBox>
            <ContentTxt>{post.link}</ContentTxt>
            <DateTxt>{post.updatedAt.substring(0, 10)}</DateTxt>
          </PostStyle>
          </>
        )
      })}
    </ul>
    )

...? key값 있는데요..

그렇게 다시 삽질 시작.

 

 

---

열심히 구글링 한 결과 중요한 사실을 알게 되었다!

 

- key값은 최상위 태그에 있어야한다.

- 위 코드에서는 최상위 태그가 fragment이다.. ( <> </> )

- 따라서 map함수를 사용하여 게시글을 렌더링 할때는 fragment자체에 key값을 주거나, 아니면 그냥 지우자!

 

즉, 아래 코드처럼말이다.

return (
    <ul >
      {followpost && followpost.map((post) => {
        return (
          <PostStyle key={post.id}>  // 최상위 태그에 key를 주도록!
            <UserChat userName={post.author.username} userId={post.author.accountname} img={imgCheck(post)} />
            <PetImg src={"https://mandarin.api.weniv.co.kr/" + post.itemImage}></PetImg>
            <TxtBox>
              <TitleTxt>{post.itemName}</TitleTxt>
            </TxtBox>
            <ContentTxt>{post.link}</ContentTxt>
            <DateTxt>{post.updatedAt.substring(0, 10)}</DateTxt>
          </PostStyle>
        )
      })}
    </ul>
    )

 

---

 key에러는 한곳에서 난 것이 아니였는데, 추가적으로 map함수 안에 또 map을 사용하는 곳에서 역시 key값을 지정해 주어야한다. 

 

---

 

그럼 여기서 궁금점, 고유한 key값이 딱히 없는 애들은 어떡하죠..? index는 비효율적이라 했는데..

다시 구글링을 열심히 해본결과,

 

1. for문 안에서 1씩증가시키며 key값을 주기

2. API를 사용하는 경우 각 고유의 id값주기 (여기선 해당 X)

3. 난수생성기를 이용하여 고유 key값을 주기 

 

이런 방법들이 있는데 , 특히 2번이나 3번이 좋다고 하였다.

그래서 고유 key값이 없는 애들은 3번을 이용하여 다음과 같이 key값을 주었다. 

 

key={Math.random() * 100}

 

이 방법으로 사용해서 코드를 짜던 중 안좋은 점을 발견했다..!!

바로 key값이 새로고침 될 때마다 바뀌면서 그 리스트 값들도 재렌더링 되면서 깜빡인다는 점이다!!!!
그래서 나는 다음과 같이 수정했다.

 

let keyVal = 1; 
 key ={keyVal++}  // 해당 컴포넌트의 +1씩 증가시키며 키값으로 넣어주기

 

이렇게 했더니 더이상 깜빡임은 발생하지 않았다..  참고하시길..!!

---

그리고 혹시나 이런 어이없는 에러를 만나시는 분들께 추가적으로 적는건데 . . . 각 고유의 id값을 key로 설정하시려면 명칭이 id인지 _id인지.. 이런것도 확인해보시길.. (저도 저것때문에 또 한참 헤맷습니다..^^)

 

 

그러면 react key error 해결~!