[React] 여러 개 요소 return할 때 key값 지정하기

Problem?

react 컴포넌트를 만들다가 map 안에서 여러 개의 요소를 리턴할 때 key값을 설정해주는 부분에서 헷갈리는 부분이 있었다.

const Child = ({ data }: Props) => {
  return (
    <li>
      <ul>
        {data?.map((child) => {
          return (
            <>
              <li key={`${child.id}-${child.name}-1`}>{child.name}</li>
              {child.type === 'folder' && <Child key={`${child.id}-${child.name}-2`} data={child.children} />}
            </>
          )
        })}
      </ul>
    </li>
  )
}

 

여러 요소를 리턴할 때 div로 요소들을 감싸고 key값을 지정해줘도 되지만, 아래와 같은 마크업 구조를 만들고자 했기 때문에 따로 div로 감싸고 싶지 않았다.

<ul>
  <li>Child1</li>
  <li>
    <ul>
      <li>Grand Child 1</li>
      <li>Grand Child 2</li>
    </ul>
  </li>
</ul>

 

그래서 빈 태그 <>로 감싸주고 나머지 요소들에 key값을 따로 지정해주면 될 것이라고 생각했는데 key값이 중복된다는 메시지가 콘솔에 등장했다.

 

Solution

const Child = ({ data }: Props) => {
  return (
    <li>
      <ul>
        {data?.map((child) => {
          return (
            <React.Fragment key={`${child.id}-${child.name}`}>
              <li>{child.name}</li>
              {child.type === 'folder' && <Child data={child.children} />}
            </React.Fragment>
          )
        })}
      </ul>
    </li>
  )
}

그리고 빈 태그가 아닌 React.Fragment로 감싸주면 된다는 것을 알았다. 기존의 빈 태그 대신 React.Fragment를 써주고, 거기에만 key값을 지정해주면 해결되는 문제였다.

 

빈 태그를 쓰는 것이 너무 습관이 되다 보니 Fragment를 쓸 생각을 못했던 것 같다. 😂

 

Reference

https://stackoverflow.com/questions/23840997/how-can-i-return-multiple-lines-jsx-in-another-return-statement-in-react