[ERROR 해결 / 리액트] Objects are not valid as a React child (found: object with keys {키값}). If you meant to render a collection of children, use an array instead.

1. 사건일지 

에러내용은 객체는 React 하위 항목으로 유효하지 않습니다(발견: 키가 {키값}인 객체). 하위 컬렉션을 렌더링하려면 대신 배열을 사용하세요.

라고 뜨는데, 키값이 fileSize인 객체가 올바르지 않다는 내용이니, 저 부분을 제대로 꺼내고 있는지 확인해보라는 뜻이다.

 

2. 설명 

사실은 별거없다. 첫번째 줄에 (Found: object with keys {fileSize})에서 문제가 발생했다는데, 리액트 내에 저 fileSize라는 키값 이름으로 데이터를 보여주는 부분을 찾아가보자.

<div>
   <ILabel text="첨부 파일" size="16" type="basic" bold="true" />
   <div>용량 : {state.fileSize}MB / 10MB</div>
</div>

 

그렇다면 state.fileSize는 어떤 모양으로 데이터가 내려오고 있나?

console.log(state.fileSize)

// 로그 내용
{fileSize: '0.099'}

의 형태로 내려오고 있다. 그렇다면 에러가 발생할 수 밖에 없다. state.fileSize안에 또 키값으로 데이터가 감싸져 있기 때문에 저 value만 가져오기 위해선 그 안의 키값을 한번 더 꺼내야한다.

 

3. 해결

: 데이터 형태를 잘 보고, 꺼내주자. 

{state.fileSize}  ➔   {state.fileSize.fileSize}

<div>
   <ILabel text="첨부 파일" size="16" type="basic" bold="true" />
   <div>용량 : {state.fileSize.fileSize}MB / 10MB</div>
</div>

 

 

집중력이 흐트러졌나보다..