useEffect 안에서 async 사용하기

useEffect 안에서 비동기 작업(예를 들면 서버에서 데이터를 불러오는)을 하게 되는 경우가 종종 있다.

await을 사용하기 위해선 async를 붙여야 하고, 아래와 같은 코드가 되는데,

useEffect(async () => {
	await data fetching(); 
}, []);  

이런 경우 에러가 발생하게 된다.

원인은 useEffect는 반환값으로 오직 clean-up 함수만이 허용되는데 async 구문은 Promise 객체를 반환하기 때문이다.

이러한 문제점을 해결하기 위한 방법으로는 두 가지가 있는데,

우선 첫 번째 방법은 async-await 대신 then을 사용하는 것이다.

useEffect(() => { 
	data fetching().then(res => setState(res.data));
}, []);

18 이전의 React에서는 then() 안에서 실행되는 setState 함수들이 Batching되지 않는 현상이 있었는데, React 18부터는 Automatic Batching이라는 새롭게 추가된 기능 덕분에 이렇게 코드를 짜도 상관없을 것 같다.

두 번째 방법으로는 async-await 구문이 필요한 함수를 만들고, useEffect 안에서 실행하는 방식이다.

useEffect(() => {
	const aF = async () => {
		const res = await data fetching();
    	setState(res.data);
	}
	af();
}, []);

이런 식으로 작성하면 된다.