14장 외부 API를 연동하여 뉴스 뷰어 만들기

14.1 비동기 작업의 이해

14.1.1 콜백 함수
14.1.2 Promise
14.1.3 asnyc/await

화살표 함수에 async/await을 적용할 때는 async () => {}와 같은 형식으로 적용함.

const onClick = async () => {
	try {
    	const response = await axios.get(...);
        setData(response.data);
    } catch(e) {
    ...
    }
};

14.2 axios로 API 호출해서 데이터 받아 오기

14.3 newsapi API 키 발급받기

14.4 뉴스 뷰어 UI 만들기

14.5 데이터 연동하기

userEffect 내부에서 async/await을 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 다른 함수를 반들어 사용해야함.

useEffect(() => {
	const fetchData = async () => {
      setLoading(true);
      try {
        ...
        const response = await axios.get(...);
        setData(response.data.xxx);
      } catch (e) {
      	console.log(e);
      }
      setLoading(false);
    }
    fetchData();
}, [category]);

14.6 카테고리 기능 구현하기

14.7 리액트 라우터 구현하기

리액트 라우터의 Router, NavLink등을 사용하여 라우터 구현

//리액트 라우터 설치
yarn add react-router-dom

14.8 usePromise 커스텀 Hook 만들기