[ React.js ] Hooks - useEffect - RestAPI, 비동기, Promise, Async Await

React.js, function component style

 

RestAPI 등 외부 API를 적용하여 데이터를 외부에서 받아와서 useEffect Hooks 내에서 데이터를 풀어줄 때의 주의사항 중 한개를 서술한다.

기본적으로 REST API와 같은 외부 데이터들은 promise.then 형식으로 데이터를 받는다.

 

그럴 때 async await을 사용하는데,

React.js useEffect() Hook에서는 async를 직접적으로 사용하면 안된다.

useEffect ( async () => {
	await something...
})

이렇게 사용하면 안된다는 뜻이다.

 

async await을 사용하려면, 내부에서 사용해야한다.

useEffect (() => {
	const result = async () => {
    	const something = await axios.get( ) ...
    }
})

이런 식으로 말이다.

 

왜냐하면 useEffect() Hook은 void 속성을 가져, 반환하는 값이 없다.

그러나 async await이 내뱉는 결과물은 객체 형태이기 때문이다.

 

이상 메모 끝~

 

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.