Axios는 자바스크립트를 사용해 클라이언트 측에서 HTTP 요청을 보내는 데에 매우 유용한 라이브러리입니다. 이 글에서는 Axios를 사용하여 클라이언트 측에서 서버로부터 받은 데이터를 파싱하는 방법에 대해 알아보겠습니다.

Axios 설치하기

먼저, Axios를 사용하기 위해 프로젝트에 해당 라이브러리를 설치해야 합니다. npm을 통해 다음과 같이 설치할 수 있습니다:

npm install axios

데이터 가져오기

Axios를 사용하여 서버로부터 데이터를 가져오기 위해서는 get 메소드를 사용합니다. 다음은 예제 코드입니다:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    // 서버로부터 받은 데이터 처리하기
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리하기
    console.log(error);
  });

위의 코드에서 https://api.example.com/data는 실제 데이터를 가져올 API의 엔드포인트 URL입니다. get 메소드는 Promise를 반환하므로, .then()과 .catch()를 통해 데이터와 에러를 처리할 수 있습니다.

데이터 파싱하기

Axios로부터 받은 데이터를 파싱하려면, 해당 데이터의 형식에 따라 적절한 방법을 사용해야 합니다. 서버로부터 받은 데이터가 JSON 형식이라면, response.data를 그대로 사용할 수 있습니다. 예를 들어, 다음은 JSON 데이터의 예입니다:

{
  "name": "John Doe",
  "age": 25,
  "email": "johndoe@example.com"
}

위의 JSON 데이터를 파싱하여 각각의 값을 얻으려면 다음과 같이 할 수 있습니다:

axios.get('https://api.example.com/data')
  .then(response => {
    const name = response.data.name;
    const age = response.data.age;
    const email = response.data.email;
    // 파싱된 데이터 처리하기
    console.log(name, age, email);
  })
  .catch(error => {
    console.log(error);
  });

위의 코드에서 response.data.name과 같이 접근하여 데이터를 얻을 수 있습니다.

마무리

Axios를 사용하여 클라이언트 측에서 데이터를 파싱하는 방법에 대해 알아보았습니다. Axios는 간편한 API를 제공하여 HTTP 요청과 응답을 처리할 수 있습니다. 데이터를 파싱하기 위해서는 해당 데이터의 형식에 따라 적절한 방법을 선택하여 사용하면 됩니다.