[React] Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody> 오류

Intro

전달받은 props를 map 함수를 이용하여 table를 만들던 도중 다음의 오류가 발생하였습니다.

 

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

 

<table>
    <thead>
        <tr>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        {props.map((item, index) => {
            return (
                <>
                    <tr key={index} onClick={}>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                    </tr>
                    <OtherComponent />
                </>
            );
        })}
    </tbody>
</table>

제가 봤을 때는 분명 각 자식에 index 라는 key 값을 부여하고 있다고 생각했는데요..

 

Why?

하지만..알고보니 원인은 바로 <></> 에 있었습니다.. key 값은 root component에 적용 되는 것이 원칙이기 때문이죠. 하지만 저는 OtherComponent 를 함께 작성해야 했기에 <></> 태그를 제거할 수 없었습니다. (JSX 문법 🤧) 

 

 

How to solve the problem

<></> 에 key를 넣는 방법을 찾는게 관건이였습니다. 리액트 공식 페이지에서 key가 있는 Fragments 내용에 대한 설명을 찾을 수 있었습니다. 

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

그러면 기존 에러가 발생하였던 코드를 고쳐봅시다.

<table>
    <thead>
        <tr>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        {props.map((item, index) => {
            return (
                <React.Fragment key={index}>
                    <tr key={index} onClick={}>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                        <td>{item}</td>
                    </tr>
                    <OtherComponent />
                </React.Fragment>
            );
        })}
    </tbody>
</table>

<></> 를 Recat.Fragment로 변경하고 key 값을 넣어줬습니다. 다음의 코드를 적용하니 오류가 발생하지 않고 정상 작동합니다. 

 

---

https://ko.reactjs.org/docs/fragments.html

https://kangdanne.tistory.com/147