Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>

<table>를 이용해서 dom을 구성하는 중에 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>이라는 에러가 발생했다.

<tr> 요소 안에 텍스트 요소가 포함되어 있어서 발생한 에러라고 하는데, 코드를 천천히 살펴보니,

  return (
    <>
      <tr>{category}</tr>
      {filterItems.map((item, index) => (
        <tr key={index}>
          <Td stock={item.stocked}>{item.name}</Td>
          <td>{item.price}</td>
        </tr>
      ))}
    </>
  );

📍 <tr>{category}</tr>

이 <tr>요소 안에 바로 텍스트를 넣은 것이 문제였다.

<tr>의 경우 <td>나 <th>와 같은 요소가 필요한데 해당 요소를 포함하지 않고 바로 텍스트를 넣으면 해당 에러가 발생되는 것이었다.

이를 수정하기 위해서 <td>를 사용했고, 다음 아래와 같이 코드를 수정하니 에러 없이 잘 동작하는 걸 볼 수 있었다.

  return (
    <>
      <tr>
        <td>{category}</td>
      </tr>
      {filterItems.map((item, index) => (
        <tr key={index}>
          <Td stock={item.stocked}>{item.name}</Td>
          <td>{item.price}</td>
        </tr>
      ))}
    </>
  );

처음엔 어디서 에러가 발생하고 있는지조차 파악하기가 힘들었는데, 콘솔 창에 뜨는 에러에 대한 설명 그리고 해당 에러가 발생한 루트를 하나씩 살펴보면서 대략적인 추측이 가능해졌다. 무작정 에러를 구글링해서 해결책을 찾는 것보다는 코드를 천천히 살펴보면서 루트를 따라 에러가 발생한 시점이 어디인지를 먼저 찾는 것이 중요한 것 같다!