리액트를 다루는 기술 개정판 [외부 API를 연동하여 뉴스 뷰어 만들기]

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

  - 비동기 작업의 이해 > API 호출해서 데이터 받아오기 > API 키 발급받기 > 뉴스 뷰어 UI 만들기 > 데이터 연동하기

    > 카테고리 기능 구현하기 > 리액트 라우터 적용하기

 

  - 비동기 작업의 이해

    . setTimeout(func, 3000) : 3초 후에 func 수행

 

  - Promise: 콜백 지옥 코드가 형성되지 않도록 ES6에 도입된 기능

    . then을 사용하며 그 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다.

function increase(number) {
	const promise = new Promise((resolve, reject) => {
    	setTimeout(() => {
        	const result = number + 10;
            if (result > 50) {
            	const e = new Error('NumberTooBig');
                return reject(e);
            }
            resolve(result);
        }, 1000);
    });
    return promise;
}

increase(0).then(number => {
	console.log(number);
    return increase(number);
})
.then(number => {
	console.log(number);
    return increase(number);
})
.then(number => {
	console.log(number);
    return increase(number);
})
.catch(e => {
	console.log(e);
});

 

  - async/await

    . Promise를 더 쉽게 사용할 수 있도록 해 주는 문법

    . 함수의 앞에 async 키워드를 추가하고, 함수 내부에서 Promise 앞에 await 키워드를 사용한다.

    . 이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다.

function increase(number) {
	const promise = new Promise((resolve, reject) => {
    	setTimeout(() => {
        	const result = number + 10;
            if (result > 50) {
            	const e = new Error('NumberTooBig');
                return reject(e);
            }
            resolve(result);
        }, 1000);
    });
    return promise;
}

async function runTasks() {
	try {
    	let result = await increase(0);
        console.log(result);
        result = await increase(result);
        console.loc(result);
        result = await increase(result);
        console.loc(result);
        result = await increase(result);
        console.loc(result);
    } catch (e) {
    	console.log(e);
    }
}

 

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

    . 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트 (HTTP 요청을 Promise 기반으로 처리)

    . axios.get으로 요청하고, then을 통해 비동기적으로 확인 (async를 사용할 수도 있음)

 

  - 데이터 연동하기

    . useEffect를 사용하여 컴포넌트가 처음 렌더링되는 시점에 API를 요청한다.

    . useEffect에 등록하는 함수에 async를 붙이면 안 된다. useEffect에서 반환하는 값은 뒷정리 함수이기 때문이다.

    . async를 사용하고 싶으면 함수 내부에서 새로 만들어서 사용해야 한다.

    . loading이라는 상태도 관리하여 API 요청이 대기 중인지 판별한다.

 

  - 카테고리 기능 구현하기

  - API 호출 시 카테고리 지정

    . category를 prop으로 받아서 주소에 추가해준다.

 

  - 리액트 라우터 적용하기

    . 카테고리 값을 useState가 아닌 리액트 라우터의 URL 파라미터로 관리한다.

 

  - NavLink 사용하기

    . 선택된 카테고리에 다른 스타일을 주는 기능을 NavLink로 대체한다.

 

  - usePromise 커스텀 Hook 만들기

    . 나만의 util 함수를 만든다.