React.useEffect 와 Promise

Promise 는 자바스크립트에서는 없어서는 안될 덕목? 이다.

Promise 없는 자바스크립트는 상상할수없어이제......ㅠㅠ

 

React.useEffect 안에서는 await 을 쓸수없다. 만약당신이  await 을 썼다면 리액트가 바로 당신을 혼줄 내줄것이야 - 는 개소리고 콘솔에 경고문을 보게된다. 

React.useEffect(async () => {
  // 이렇게 쓰면 안되고
  const result = await axios(
    'https://something.com/api',
  );

  setData(result.data);
}, []);

그렇다면 어떻게 사용해야 할까? 

promise 부분을 별도의 함수로 만들어서 호출한다.

React.useEffect(() => {
  fetchData();
}, []);

function async fetchData() {
  const result = await axios(
    'https://something.com/api',
  );

  setData(result.data);
}

 

추가로

await 대신 다음과 같이 쓴다면 useEffect 내에서 사용은 가능하다. 하지만 이건 개인 취향인듯

나는 개인적으로 await 을 선호하기 때문에 이렇게는 사용하지 않는다.

fetchData().then(result => setData(result.data));