[React] API 연동하기 with axios

프로젝트를 하다 보면 서버에서 데이터를 받아오고, 보내야 하는 상황이 생긴다.

예시를 통해 axios를 이용하여 API를 연동하는 방법을 알아보자!

1. axios 설치하기

API를 호출하기 위해서 axios라는 라이브러리를 설치해야 한다.

// 1. npm을 이용하여 설치하는 경우
npm install axios

// 2. yarn을 이용하여 설치하는 경우
yarn add axios

 

설치했다면 사용하고자 하는 프로젝트에서 import를 해야 한다.

import axios from "axios";

 

이렇게 API를 사용 가능한 상태가 되었다. 우리는 API를 사용해서 아래와 같은 동작을 할 수 있다.

 

• Create : 데이터 생성(POST)
• Read : 데이터 조회 (GET)
• Update : 데이터 수정 (PUT)
• Delete : 데이터 삭제 (DELETE)

 

이 중에서 나는 데이터를 조회할 수 있는 GET을 사용해보려고 한다.

2. proxy 설정하기

GET을 사용하기 이전에 proxy 서버를 설정해주어야 한다. 서버에서 CORS에 대한 설정을 따로 해주지 않았다면, api를 사용할 때 에러를 마주하게 된다. 따라서 프론트 측에서 개발할 때 CORS에러를 마주하지 않고 싶다면 우회할 수 있도록 proxy 서버를 설정하여야 한다. 나 같은 경우는 package.json에 다음과 같은 코드를 추가하였다.

"proxy" : "http://12.34.56.789"

http://12.34.56.789 라고 쓰여있는 부분에 서버 주소를 넣으면 된다.

 

간단히 설명하자면 CORS는 허용된 출처만 접근할 수 있는 권한을 주는 것인데, 프론트 서버가 허용되지 않았기에 proxy 서버를 통해 서버와 서버 간 통신으로 만들어 통신이 가능토록 하는 것이다.

3. 코드 작성하기

나는 아이디가 중복되었는지를 확인하는 api를 사용하고자 했다. 그래서 다음과 같은 코드를 작성하였다.

  const isIdDuplicated = async () => {
    const api = `/api/dup_check/${uid}`;
    try {
      const res = await axios.get(api);
      if (res.status === 200) {
        return res.data.dup;
      }
    } catch (e) {
      console.log(e.response);
    }
  };

 

전체적인 흐름은 다음과 같다.

 

 

isIdDuplicated이라는 함수를 만들었다. 이 함수는 내가 보낸 id에 해당하는 id가 이미 있는지, 즉 중복검사를 해서 이미 있다면 true, 없다면 false를 반환하는 함수이다. 먼저 api에 내가 보내야 하는 주소를 적어주는데, uid를 함께 보내야 해서 ${uid}라고 코드를 작성하였다. 그다음 axios.get(api); 를 통해 해당 api주소로 get요청을 보냈다. 그리고 그 응답을 res라는 상수에 넣어두었다. 만약 그 통신이 성공적이라면(res.status가 200이라면) res.data.dup, 즉 응답으로 오는 true/false 값을 그대로 반환하도록 해줬다. 통신을 성공하지 못했다면 catch(e) 부분으로 들어가는데, 이때는 console에 에러 내용을 출력하도록 해줬다.

 

 

async/await

이때 함수에 async/await이라는 키워드가 추가되었다. async는 함수 선언부 괄호 앞에 위치하고, await는 axios 호출부 앞에 위치하게 되는데, 이 키워드들은 비동기 통신을 위해 사용된다. 서버에 요청을 하는 동안 프로그램이 멈추지 않고 다른 작업이 수행하도록 하기 위해 이러한 비동기 방식을 사용하는 것이다.

4. 사용하기

Signup.js

  const idChangeHandler = async (e) => {
    setUserInfo({ ...userInfo, id: e.target.value });
    if (!idCheck(e.target.value)) {
      setInvalidIdInfo("6-15자의 영문 소문자, 숫자만 사용 가능");
      return;
    }
    if (await isIdDuplicated(e.target.value)) {
      setInvalidIdInfo("아이디가 중복되었습니다.");
      return;
    }
    setInvalidIdInfo("");
  };

회원가입에서 api를 호출한 isIdDuplicated 함수를 사용해서, 만약 중복되었다면 설명하는 부분에 "아이디가 중복되었습니다."가 뜰 수 있도록 하였다. 간단하지만, 사용할 때에도 await 키워드를 사용하여 비동기 처리해주어야 하는 점은 꼭 유의해야 한다❗️