리액트(React) axios 로 API 호출하기

axios는 현재 가장 많이 사용하고 있는 자바스크립트 HTTP 클라이언트 입니다.

이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다. 

리액트 프로젝트를 생성하여 이 라이브러리 설치하고 사용해보도록 하겠습니다.

앞으로 axios 를 이용해 뉴스뷰어를 만들어 볼 예정이므로 프로젝트를 news-viewer로 만들어 보겠습니다.

>npx create-react-app news-viewer

>cd news-viewer 

>npm i axios 

설치 후 개발 편의를 위해 VS Code에서 파일 자동 불러오기 기능을 활용하고 싶으면 최상위 디렉토리에서 jsconfig.json 파일을 만들어 줍니다.

{
  "compilerOptions": {
    "target": "ES6"
  }
}

App.js 를 다음과 같이 작성해서 테스트 해봅니다.

[불러오기] 버튼을 누르면 JSONPlaceholder 에서 제공하는 가짜 API 호출하고 이에 대한 응답을 컴포넌트 상태에 넣어서 보여주는 예제입니다.

import { useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);
  const onClick = () => {
    axios
      .get('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => {
        setData(response.data);
      });
  };

  return (
    <div>
      <div>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && (
        <textarea
          rows={7}
          value={JSON.stringify(data, null, 2)}
          readOnly={true}
        />
      )}
    </div>
  );
}

export default App;

위 코드에 async 를 적용하면 다음과 같습니다.

function App() {
  const [data, setData] = useState(null);
  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1',
      );
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };

결과는 똑 같습니다.