Objects are not valid as a React child 해결 방법

😮 Objects are not valid as a React child 에러 발생 원인

"Objects are not valid as a React child" 오류는 일반적으로 React에서 문자열, 숫자 또는 React 구성 요소와 같은 유효한 자식 요소가 아닌 객체를 렌더링하려고 할 때 발생합니다. 이 오류는 일반적으로 다음과 같은 상황에서 발생합니다.

1. 컴포넌트에서 객체를 반환하고 있거나
2. 컴포넌트의 자식 요소 중 하나가 객체입니다.

🙌🏻 해결 방법

해결 방법은 다음과 같습니다.

1. 확인해야 할 첫 번째 사항은 렌더링하는 컴포넌트의 반환 값입니다.
2. 컴포넌트가 객체를 반환하고 있다면 해당 객체를 문자열, 숫자 또는 유효한 자식 요소로 변환해야 합니다. 만약 자식 요소가 객체인 경우 해당 객체를 문자열, 숫자 또는 유효한 자식 요소로 대체해주세요.
3. React에서 객체를 자식 요소로 렌더링하려는 경우 일반적으로 객체를 문자열로 변환하기 위해 JSON.stringify()를 사용할 수 있습니다. 예를 들어:

return (
  <div>
    {JSON.stringify(myObject)}
  </div>
)

4. 컴포넌트의 자식 요소가 객체 배열인 경우, 각 객체를 적절한 자식 요소로 매핑해야합니다. 예를 들어:

return (
  <div>
    {myObjectArray.map((object) => (
      <div key={object.id}>
        {object.name}
      </div>
    ))}
  </div>
)

5. 객체를 자식 요소로 렌더링해야하는 경우, 객체를 처리할 수 있는 컴포넌트를 만들어 사용하세요.

 

요약 : "Objects are not valid as a React child" 에러는 컴포넌트에서 객체를 그대로 렌더링할 때 주로 발생하는 에러다. JSON.stringify()를 사용해 객체를 문자열로 반환하거나 _객체를 적절한 요소로 매핑_하면 해결된다.