[짜잘한 react] axios, async 사용하기

오늘의 주제
1. axios와 async으로 비동기적이게 데이터 불러오기
2. useEffect 내부에 axios를 사용할 때 함수 따로 선언

1. axios와 async으로 비동기적이게 데이터 불러오기

1-1. async 사용하기
1) async() =>{} 형태로 감싸주기
2) 성공 시 try{}
3) 실패 시 catch(e){console.log(e)}

1-2. axios 사용하기
1) response 선언
2) await axios.get()으로 데이터 가져와주기
3) response.data를 state에 넣어주기

function App() {
  const [data, setData] = useState(null);
  // 1. async을 통해 비동기적으로 불러오기
  const onClick = async () => {
    // 1-1. 성공 시
    try {
      // 2. axios를 async 안에서 사용하기
      // 2-1. respose 선언
      // 2-2. await axios.get()으로 데이터 가져오고
      // 2-3. response.data state에 넣어주기
      const response = await axios.get(
        'https://newsapi.org/v2/top-headlines?country=kr&apiKey=fba7a3abc501445ab9a18643f2f5104a'
      );
      setData(response.data);
      // 1-2. 실패 시
    } catch (e) {
      console.log(e);
    }
  };
  return <button onClick={onClick}>불러오기<button/>;
}

2. useEffect 내부에 axios를 사용할 때 함수 따로 선언

• useEffect 내부에 axios를 바로 사용할 수 없기 때문에 다른 fetch함수를 선언 후 내에서 바로 함수 실행하는 패턴을 거쳐야한다.

  useEffect(() => {
    //** useEffect 내부에 바로 axios를 사용할 수 없음 **/
    //** 따라서 async을 사용하는 함수 따로 선언 **/
    const fetchData = async () => {
      // 1. loading true로 state 만들어주고
      setLoading(true);
      // 2. 자료 가져오기
      try {
        const response = await axios.get(
          'https://openapi.naver.com/v1/search/news.json'
        );
        setArticles(response.data.articles);
      } catch (e) {
        console.log(e);
      }
      // 3. loading false로 바꿔주기
      setLoading(false);
    };
    // 4. fetchData() 함수 실행하기
    fetchData();
  }, []);