useEffect 안에서 async, await 사용하는 법

async function을 useEffect 밖에 선언하고, useEffect 안에서 해당 함수를 호출한다.

const [data, setData] = useState<IProps[] | null>(null);

...

useEffect(() => {
	getData();
}, []);


async function getData(address) {
  const response = await axios.get(url, { headers });
  setData(response);
}

...

+ 서버로부터 data를 받아오기 전까지는 data가 null이기 때문에 그 짧은 순간에는 렌더링할 데이터가 없어서 에러가 발생한다.
이를 방지하기 위한 방법은 return문에서 조건을 걸어주고, data가 null일 동안은 로딩 컴포넌트를 보여주는 것이다.

return (
	<div className='App'>
  	{data === null ? <Loading /> : <div>{data}</div>}
  	</div>
);

참고 : 조건부 렌더링