The above error occurred in the </> component.

리액트 프로젝트 도중 오늘도어김없이 에러가 터졌는데, 단순 콘솔 에러만 발생한 게 아니라 fetch해온 데이터를 setState도 하지 못해서 컴포넌트에 렌더링도 할 수 없었다.

const showInfo = (
  <div>
    <h2>{artistInfo.artist.name}</h2>
    <h4>{artistInfo.artist.name}</h4>
  </div>
);
return <div>{loading ? <h1>Now Loading</h1> : showInfo}</div>;

컴포넌트의 ,혹은 JSX의 스타일을 테스트 해볼 때도 본 적이 있던 에러였는데, 서버를 다시 껐다가 켜보고, 데이터를 다시 fetch해봐도, 코드를 재조립해도 해결이 되지 않았는데, 스택 오버플로우를 보고 설마 싶어서 문득 고친 코드가 해결이 될 줄은 정말 몰랐다.

이 문제는 객체 대신 스타일을 문자열로 사용할 때 발생합니다. 예를 들어 객체를 스타일로 사용하거나 toString 메서드에 오류를 발생시키는 등의 일반적인 이유가 있습니다.

react.js the above error occurred in the component (there is no error above)

return (
  <div>
    {loading ? (
      <h1>Now Loading...</h1>
    ) : (
      <div>
        <h2>{artistInfo.artist.name}</h2>
        <h4>{artistInfo.artist.name}</h4>
      </div>
    )}
  </div>
);

JSX가 너무 길어서 변수에 담아 선언하려 했는데 이번에는 그것이 문제였던 듯 싶다. 변수를 없애고 바로 JSX를 넣어주니 데이터 fetch 문제도 같이 사라졌다.

이걸 보고 한시간을 넘게 골머리를 앓았는데 혹여나 같은 에러를 본 사람이 있다면 시간을 줄일 수 있길...

원문: Medium