[ React ] Warning : Each child in a list should have a unique "key" prop. 오류 해결

React혹은 Next.js 에서 아래와 같은 Warning이 뜨는 경우가 있는데, 주로 반복문에서 key를 누락했을 때, 발생한다. List 안의 데이터를 map이나 다른 메서드를 이용해서 꺼낼 경우 객체를 구분할 수 없기 때문이다.

See https://react.dev/link/warning-keys for more information.
Each child in a list should have a unique "key" prop.

 

 

---

 

 

그런데, 반복문 안의 객체에 key를 분명히 적용시켰는데, 이런 오류가 뜨는 경우가 생겼다. 아래는 그 예시이다. 이 부분에서

{menuList.map((menu, index) => (
        <>
          {menu.children ? (
            <Item
              menu={menu}
              type="multiple"
              language={language}
              key={`multiple-${menu.menuNm_ENG}-${index}`}
              className={className}
            />
          ) : (
            <Item
              menu={menu}
              type="single"
              language={language}
              key={`single-${menu.menuNm_ENG}-${index}`}
              className={className}
            />
          )}
        </>
      ))}

 

 

---

 

 

이럴 경우 아래와 같이 해결하니 문제가 해결 됐다. 빈 블럭도, 아래와 같이 key를 넣어줘야 인식할 수 있기 때문이다. 안그러면 Item 객체는 인식하는데 저 뭉텅이를 인식 못할 수 있나보다.

{menuList.map((menu, index) => (
        <React.Fragment key={index}>
          {menu.children ? (
            <Item
              menu={menu}
              type="multiple"
              language={language}
              key={`multiple-${menu.menuNm_ENG}-${index}`}
              className={className}
            />
          ) : (
            <Item
              menu={menu}
              type="single"
              language={language}
              key={`single-${menu.menuNm_ENG}-${index}`}
              className={className}
            />
          )}
        </React.Fragment>
      ))}