[React 99% 에러잡기] Error: Object are not valid as a React child (found: object with keys{result}). if you meant to render a collection of children, use an array instead.

사건의 발단

CRA를 사용해서 React 개발 환경을 갖춘 뒤에 간단하게 '섭씨 온도'를 '화씨 온도'로 변경하는 계산기를 만들려고 했다.

섭씨 컴포넌트는 구현을 완료했고, 화씨 컴포넌트를 구현하던 중에 문제가 발생했다.

 

아래는 에러가 발생한 화씨 컴포넌트의 코드이다.

상위 컴포넌트로 부터 받은 데이터를 화씨 컴포넌트에서 출력하는 기능을 하는 소스 코드이다.

const Fahrenheit=(props)=>{
    return(
        <div>
            <label>화씨 : {props}</label>
        </div>
    )
}

---

예상 외 전개

복잡하지도 않은 부분이었기 때문에 별 걱정이 없었다.

하지만, 화씨 컴포넌트 구현한뒤 확인한 브라우저는 된통 빨간색으로 도배되어 있었다...... *발

 

코드가 아예 200줄, 300줄이거나 로직이 복잡한 경우라면 그러려니 하면서 고치려 갔을거다..

근데.. 이건 좀... 약 7줄 되는 코드에서 사용된 로직도 없다시피 하는데.. 에러 라늬..... ㅠㅠㅠㅠㅠㅠㅠ

 

하하.. 이건 눈감고 봐도 문제가 될만한게 props 밖에 없다...

 

---

시도한 방법들

 

하위 컴포넌트로 전달되는 Props 값 출력 [ Error 해결 : 실패 ( 에러 발생 원인 1개 줄임) ]

상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 과정에서의 소스코드를 잘못 작성하여,

데이터가 유실 되었는지 확인 할려고 했다.

하지만, 초기값으로 설정된 "" 가 정상적으로 출력되어, 데이터 유실에 대한 문제는 아니였음을 알 수 있었다.

Console.log("Props Data : ",props)

 

JSX 수정 [ Error 해결 : 성공 ]

상위 컴포넌트로 부터 받아온 데이터에 문제가 없다면,

그것을 화면에 출력하는 부분에서 문제가 있을 것이라고 생각했다.

( 솔직히 말하면, 눈 씻고 찾아봐도 에러가 나올 구멍이 여기 밖에 없었다.. :| )

 

그리고 나는 props가 쓸쓸하게 있는 것을 깨달았고, 옆에 살포시  .result를 붙여줬다.... ** ** 같은

<label>화씨 : {props.result}</label>

 

잘 돌아간다....

잘~ 돌아간다.

 

아래는 상위 컴포넌트에서 하위 컴포넌트 Fahrenheit에 데이터를 result에 담아서 넘겨주는 부분이다.....

하위 컴포넌트에서 상위 컴포넌트로부터 넘겨 받은 데이터 result를 사용할때는 props.result 의 형식으로 사용해야 한다.

<Fahrenheit result={state.result}></Fahrenheit>

 

최종적으로 수정한 코드는 아래와 같다.

const Fahrenheit=(props)=>{
    console.log("Props Data : ",props)
    return(
        <div>
            <label>화씨 : {props.result}</label>
        </div>
    )
}

 

 

이걸로 또 하나 알아간다.... :)