[React] 빈 JSX 태그에 key 속성 추가하기 <></>

🤔 구현하고자 하는 것

빈 JSX 태그 <></>에 key 속성 추가하기

👀 에러 상황

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

배열의 map으로 리턴되는 컴포넌트의 최상위 태그에 key 속성이 없어 리액트에서 에러를 반환한다.

{[
  { id: 'inbox', label: '받은 쪽지함' },
  { id: 'outbox', label: '보낸 쪽지함' },
].map(({ id, label }) => (
  <>
    <MenuToggleInput
      type="radio"
      name="message"
      id={id}
      value={selectedBox}
      onChange={() => setSelectedBox(id)}
			defaultChecked={id === 'inbox'}
    />
    <MenuLabel htmlFor={id}>{label}</MenuLabel>
  </>
))}

💡 속성 추가하기

첫번째 시도
태그에 직접 추가하기
<key={id}>...</> 안 됨 ..

두번째 시도 ⇒ ✅ 해결!
<React.Fragment> 컴포넌트를 사용한다.

Fragment란?

리액트에서 컴포넌트를 반환할 때는 하나의 태그로 감싸져 있어야 한다.
여러 자식을 가진 컴포넌트를 반환하고자 한다면, 마찬가지로 하나의 상위 태그로 묶어야 한다.
이럴 때 상위 태그로 <React.Fragment>를 사용할 수 있다.

❗️❗️❗️ 그런데! <>는 사실 <React.Fragment>의 단축 문법이다.

리액트 공식 문서에서도 key 속성을 전달하기 위해서는 <React.Framgment>를 명시적으로 선언해야 한다고 말한다.

현재까지는! Fragment에 전달할 수 있는 속성은 key가 유일하다.
다른 속성이 필요하다면 다른 태그로 감싸는 방법을 사용하자.

Reference

Fragments
Keyed-Fragments