[React] Async & await

도입배경

프로젝트 진행 할 당시 한 페이지에 2가지의 api를 요청해야했다. 비동기처리 방법에 대해 고민하였고 지난 프로젝트 Vue에서 사용했던 Async & await가 생각나서 적용하게 되었다.

1. Async, awiat 사용예시

const users = async() => {
    console.log(await getData());
    return await getData();
}

2. 장점

• 코드가 간결해지고, 가독성이 높아진다.
• try / catch로 에러를 핸들링할 수 있다.
• error 확인이 쉽다.

3. 적용예시

userEffect에 async를 사용하여 인플루언서api와 스토어 api 두 가지를 요청하였다.
요청으로 받은 데이터를 useState setState에 넣어 값을 바꿔주었다.

import { fetchStoresMainPage } from '_api/Stores';
import { fetchInfluencer } from '_api/Main';

...

useEffect(() => {
    let newAddress = '구미 진평동';
    setAddress(newAddress);

    const MainData = async () => {
      try {
        // redux에 저장된 user id 사용하기
        const response = await fetchInfluencer('1');
        setFooders(response.data);

        const res = await fetchStoresMainPage();
        setStores(res.data);
        
      } catch (err) {
        console.log(err);
      }
    };
    MainData();
  }, []);