[Next.js] 난 분명 key를 설정했는데, 왜 경고가 뜨는 거야?

여전히 사이드 프로젝트를 진행하고 있다.

 

이게 뭐냐고! 

코드를 확인해봤다.

난 분명히 잘 설정 했는데?!

---

 

1. 문제 해결

- Fragment 사용

{teamList
          .sort((a, b) => a.rate - b.rate)
          .map((item) => {
            return (
              <React.Fragment key={item.name}>
                <div
                  className=" flex flex-col w-full overflow-hidden relative"
                  style={item.rate === 1 ? { height: 230 } : null}
                >
                ...
                </div>
              </React.Fragment>
            );
          })}

 

- Fragment 삭제

{teamList
          .sort((a, b) => a.rate - b.rate)
          .map((item) => {
            return (
                <div
                  className=" flex flex-col w-full overflow-hidden relative"
                  style={item.rate === 1 ? { height: 230 } : null}
                  key={item.name}
                >
                ...
                </div>
            );
          })}

 

 

2. 원인

리스트 렌더링할 때, key를 설정해야한다는 사실을 알고 있었는데,

Fragment 를 사용했다고 없는 애 취급을 했ㄷr,... (미안해..)

Fragment는 실제 DOM에 렌더링되지 않는 단순한 래퍼 역할을 한다.
하지만, React 내부적으로는 Fragment도 컴포넌트 트리에서 노드로 취급된다.
따라서, 리스트 렌더링에서 Fragment도 Key를 가져야 한다!