[React/리액트] Fragment(<></>)에 key 추가하기 (불필요한 element 생성을 막자!)

리액트에서 <Fragment></Fragement> 혹은 축약형인 <></>를 사용할 때가 있다.
이 fragment는 불필요한 element를 생성하지 않아도 된다는 장점이 있지만
배열 렌더링을 할 때 key 값을 추가할 수 없다는 단점이 있다.

그래서 보통 <div>태그를 감싸서 key값을 주곤 했는데
괜히 불필요한 element를 생성하는 것 같아 느낌적인 느낌으로다가,, 기분이 별로 좋지가 않았음

그래서 해결 방법을 찾아본 결과!

예제

<MenuList>
   {options.map(item => 
     <>
         {item.isborder && <Divider sx={{ my: 0.5 }} />}
         <MenuItem>
           {item.label}
         </MenuItem>,
     </>
   )}
</MenuList>

위 방법 처럼 사용하게 되면 fragment에 key 값을 추가할 수 없다.
div 태그로 감싸 key값을 주는 방법도 있지만 불필요한 div가 생성된다

 

해결

<MenuList>
   {options.map(item => [
      item.isborder && <Divider sx={{ my: 0.5 }} />, // 콤마 붙이기!,,
      <MenuItem>
           {item.label}
      </MenuItem>,
      ]
   )}
</MenuList>

이렇게 코드를 고치니 div를 추가하지 않고도 잘 렌더링이 되었다!

근데 여기서 주의사항.
상위 element인 <MenuList>는 ul 태그이고 하위에 <MenuItem> 컴포넌트는 li이다.
ul 태그 아래에 li태그는 semantically correct (적절한 단어를 못 찾겠음ㅎ)하므로.. 위 방식으로 렌더링이 된다!

뭐 이렇게 쓸일도 없겠지만 ul 태그 안에 <tr> 태그를 위 방식으로 렌더링 하는 경우는
당연히 안되겠죠,,,,?

---

위 방식으로 문제가 있다면 댓글 달아주세요
도움이 되었다면 광고를 눌러주세요 ^_____^

---

참고

the Menu component doesn't accept a Fragment as a child · Issue #16181 · mui/material-ui