[ReactJS] 리액트 오류, Objects are not valid as a React child

Objects are not valid as a React child (found: object with keys {type, payload}). If you meant to render a collection of children, use an array instead.

 

 

이 오류는 리액트 컴포넌트에서 객체를 직접 렌더링하려 할 때 발생하는 오류이다. 리액트는 객체를 직접 렌더링할 수 없다. 예를 들어, payload 또는 type과 같은 객체 속성을 렌더링하려고 할 때 이 오류가 발생한다.

 

 

오류 발생 원인

Objects are not valid as a React child (found: object with keys {type, payload}).

 

오류는 컴포넌트에서 type과 payload와 같은 객체를 렌더링하려 할 때 발생한다. 이 객체는 일반적으로 Redux의 액션 객체나 다른 형태의 객체일 수 있다.

원인 예시

// 예시: 상태나 액션 객체를 렌더링하려 할 때
// x가 객체일 경우 오류 발생

<td>{x}</td>

이 문제는 x가 객체일 때 발생한다. 예를 들어, Redux 액션이나 상태 객체를 직접 렌더링하려고 하면 오류가 발생한다.

 

 

오류 해결 방법

객체를 렌더링하려면, 객체의 속성 중 하나를 사용하거나, 객체를 문자열로 변환해야 한다. 예를 들어, JSON.stringify()를 사용하여 객체를 문자열로 변환할 수 있다.

1. 객체의 속성 사용
객체의 속성을 직접 렌더링하려면, 객체에서 원하는 값을 선택하여 출력한다.

// x가 객체일 때, title 속성만 렌더링
<td>{x.title}</td>

 

 

 

2. JSON.stringify() 사용

객체를 문자열로 출력하려면 JSON.stringify()를 사용하여 객체를 문자열로 변환한다.

// 객체 전체를 문자열로 변환하여 렌더링
<td>{JSON.stringify(x)}</td>