Objects are not valid as a React child (found: [object Promise]) 에러 원인 및 해결

평화롭게 React를 하던 개발자 A....

뜻밖의 에러를 맞닥뜨린다....!

Objects are not valid as a React child (found: [object Promise])

에러를 만드는 코드의 예시는 다음과 같다. (회사 코드라 첨부할 수 없는 점 양해 부탁드려요)

원인 !

const Screen = async () => {
	
	const item = await web.getUserInfo();
    
    return (
    <div>
    	<div>{item.name}</div>
        <div>{item.age}</div>
    </div>
}

이 코드를 실행할 시 에러를 발생한다. 그 이유는
모든 함수형 컴포넌트는 async로 실행될 수 없기 때문이었다!

해결방법

이럴때 필요한 것이 useEffect 이다.

사실 평소에 당연하게 쓰던걸 오늘은 왜 안했는지 모르겠지만...!
그로인해 useEffect를 쓰는 이유에 대해 더 잘 알게 되었으니 아주 칭찬해!

함수안에서 렌더링되어야 하는 정보가 비동기로 처리되어야 한다면 useEffect를 사용하면 된다.

useEffect가 뭔지 모른다면 이 문서를 참고하면 좋을 것 같다.

혹시 저 글을 읽기 싫으시다면 간단히 설명하자면 마운트/언마운트/업데이트시 작업을 작업을 처리하는 hooks 라고 생각하면 됩니다.

useEffect(()=> {
	// state 업데이트시. 마운트시 작업( 화면이 처음 렌더링될 때 )
    console.log( "hello, screen!" );
    
    return() => {
    	console.log("good bye world!");
    }
    
},[state])

각설하고,

그래서 비동기를 적용한 데이터를 어떻게 렌더링 할까?
상단의 코드가 에러가 나지 않도록 수정한다면 이렇게 된다.

const Screen = () => {
	
	let item;
    const fetchData = async() => {
    	item = await web.getUserInfo();
    }
    useEffect(async() => {
     fetchData(); //1번 방법
     function getData async(){
     	item = await web.getUserInfo();
     }
     getData(); //2번 방법 
    },[])
    return (
    <div>
    	<div>{item.name}</div>
        <div>{item.age}</div>
    </div>
}

point 1. 함수형 컴포넌트 최상단에 async 붙이지 않기.

point 2. useEffect 안에 async awiat 을 적용한 함수를 사용한다. 방법은 2가지가 있다.

1. 비동기 함수를 외부에 선언해서 useEffect 함수 내부에서 실행시키는 방법
2. useEffect 내부에 함수를 선언하고 바로 실행시키는 방법

도움이 되시길 바랍니다! ㅎㅎ