[React] axios로 뉴스 앱 만들기(1)

react logo

 

axios

axios는 웹 브라우저에서 HTTP 요청을 보내고, 응답을 받는 HTTP 클라이언트 라이브러리입니다. promis를 기반으로 하며 ajax의 상위호환 버전입니다. 설치도 간단합니다.

npm install axios

axios의 기본적인 사용법은 아래와 같습니다.

axios({
    type: 'GET'/'POST'/'PUT'/'DELETE' ...,
    url: 요청 url 주소,
    responseType: 'json'
}).then(response => {
    //then이 일종의 success라고 생각한다. try 느낌
    //처리할 내용
}).catch(error => {
    //에러 발생 시 처리할 내용
});

 

axios의 단축 메소드

요청 방식에 따라 단축 메소드를 제공합니다. get, post, put, delete 등의 메소드를 사용해서 axios 단축 방법을 사용할 수 있습니다.

 

get 방식

//get방식
axios.get(요청 url 주소, config 객체).then(response => {
        //처리할 내용
    }).catch(error => {
        //에러 발생 시 처리할 내용
    });

post 방식

//post방식
axios.post(요청 url 주소, data 객체, config 객체).then(response => {
        처리할 내용
    }).catch(error => {
        에러 발생 시 처리할 내용
    });

put 방식

//put방식
axios.put(요청 url 주소, data 객체, config 객체).then(response => {
        처리할 내용
    }).catch(error => {
        에러 발생 시 처리할 내용
    });

delete 방식

//delete방식
axios.delete(요청 url 주소, config 객체).then(response => {
        처리할 내용
    }).catch(error => {
        에러 발생 시 처리할 내용
    });

 

이러한 단축 메소드는 매개변수로 객체를 받지 않습니다. 즉, 별도의 키를 지정하지 않지만, 매개변수 순서는 지켜줘야 합니다. 또한, 모든 단축메소드에서 url을 제외한 모든 매개변수는 생략이 가능합니다. url만 쓸 수도 있는 거죠.

 

 

Promise

Promise는 javascript에서 비동기 처리를 담당하는 객체입니다.

이 Promise는 then(), catch(), finally() 메소드를 통해 비동기 작업을 처리합니다. axios가 promise 기반의 비동기 통신 방법입니다. 통신이 성공하면 then()을 사용하고 에러 발생시 catch()를 쓰고, 에러 상관없이 통신이 끝나면 finally()를 통해 비동기 통신을 처리합니다. 어디서 많이 본 느낌이죠?

 

async & await

async/await를 사용하면 promise를 좀 더 가독성있고 편하게 구현합니다. 메소드 앞에 async를 붙여주고 해당 메소드는 항상 Promise 객체를 반환하게 됩니다. await는 항상 메소드 안에서만 사용하며, Promise 객체의 결과값을 받을 때까지 함수를 중지시키는 역할을 합니다. async / await 사용시 예외처리는 메소드 안에서 try-catch 블록을 만들어서 처리합니다. 코드를 살펴보겠습니다.

 

먼저 좀 더 규격화된 형식으로 보여드리겠습니다. const 메소드명을 통해 함수를 제작합니다.

const 메소드명 = async() => {
    //예외처리를 위한 try~catch블록
    try {
        //Promise 객체의 결과를 받을 때까지 메소드의 실행을 중지함
        const response = await axios.get();

        //받은 데이터로 처리할 내용 작성
    } catch(error) {
        //에러 발생시 처리할 내용 작성
    }
}

 

이걸 더 풀어서 async function으로 제작해보겠습니다. 같은 메소드를 다르게 표현할 수 있습니다.

async function 메소드명() {
    try {
        //Promise 객체의 결과를 받을 때까지 메소드의 실행을 중지함
        const response = await axios.get();

        //받은 데이터로 처리할 내용 작성
    } catch(error) {
        //에러 발생시 처리할 내용 작성
    }
}

 

다음은 news API를 사용해서 API를 받아서 화면을 구성하는 실습을 진행해보겠습니다. 

 

뉴스 App 만들기

먼저, 뉴스 API를 등록합니다. 무료로 회원가입 후 API 키를 발급받을 수 있습니다.

https://newsapi.org/register

 

전체 뉴스 받는 API

GET https://newsapi.org/v2/top-headlines?country=kr&apikey=발급받은 키값

특정 카테고리의 뉴스를 받는 API

GET https://newsapi.org/v2/top-headlines?country=kr&category=business&apiKey=발급받은 키값​

컴포넌트 적용

컴포넌트는 크게 네가지 컴포넌트로 구성해서 만들겠습니다.

• NewsItem : 기사 하나 내용을 표시합니다.
• NewsList : 기사 목록을 표출하며, 자식 컴포넌트가 NewsItem 입니다.
• Categories : 기사의 카테고리 이동할 때 필요합니다.
• NewsPages: Router 기능을 구현합니다.

다음 글에서 소개해보겠습니다.