[React] - 17) React 프로젝트에서 api 호출하기

안녕하세요

 

실로 오랜만의 포스팅입니다.. 그동안 리액트 공부를 꾸준히 해왔으나 프로젝트에 집중하다보니 포스팅이 많이많이 늦어졌습니다.

 

앞으로는 다시 꾸준하게 포스팅하도록 하겠습니다 ㅠ ㅠ

 

이번 포스팅에서는 리액트 내부에서 Api를 호출하는 코드를 작성해보도록 하겠습니다.

 

자바스크립트의 Promise 문법과 매우 연관이 있으며, 사실 api 호출은 백엔드를 사용하여 서버에서 호출한 뒤 다듬어 프론트 단으로 넘겨주

 

는 방식이 일반적이지만, 지금은 아주 단순한 Github Api를 호출할 것이기 때문에 리액트 내부에서만 작성하도록 하겠습니다.

 

 

우선 axios라는 라이브러리를 설치해야 합니다. 이에 대해 잠깐 알아봅시다.

 

axios는 http 통신을 하는데에 있어 가장 인기많고 사용하기 쉬운 편인 자바스크립트 라이브러리 입니다. 이는 Node.js에서 사용할 수 있게

되어있기 때문에 리액트에서도 당연히 사용 가능합니다. 터미널에 다음과 같이 입력하여 프로젝트를 만든 뒤 axios를 설치해 봅시다.

 

$ yarn create react-app api_call
$ cd api_call
$ yarn add axios

혹은 yarn이 아닌 npm만을 사용하고 있다면,

$ npm install axios

 

으로 axios 라이브러리를 설치해 줍시다. 

 

이제 axios.get(http url) 혹은 axios.post .. 등의 방식으로 http 통신을 할 수가 있습니다.

가장 간단한 방법으로 다음 코드를 생각해 보겠습니다.

const apiCall = () => {

	const response = axios.get(url);
	console.log(response.data);
    
 }

이런 방식으로 짠다면 response로 얻은 데이터를 콘솔에 찍는 것이 가능하겠죠?

하지만 직접 api 호출을 해보신 분들은 이러한 방식으로 사용한다면 에러가 발생할 수 있다는 점을 눈치채셨을 겁니다.

그 이유는 axios든 어떤 라이브러리를 사용하든, 바닐라로 api를 호출하든, 받아오는 데에 걸리는 시간이 있기 때문인데요.

데이터가 받아오지도 않아졌는데 콘솔에 찍으려고 하면 당연히 에러가 발생합니다.

 

그렇기 때문에, 보통 Api를 호출할 때에는 Promise 방식을 사용합니다.

Promise는 말 그대로, 어떠한 작업을 '약속'해 놓고 그 작업이 끝날 때 까지 기다린 뒤 그 다음(then) 작업을 하게끔 하는 것을 말합니다.

 

그중 async/await은 Promise를 쉽게 사용할 수 있도록 해 주는 자바스크립트 문법입니다. 안드로이드를 좀 해보신 분들은 async 통신에서 많이 들어보셨을 수 있겠네요.

 

이 async/await 키워드를 잘 활용하면, Promise 문법을 사용하여 작업이 이루어질 때 까지 기다리게끔 만들 수 있습니다.

위에서 작성한 코드가 이렇게 바뀔 수 있겠네요.

 

const apiCall = async () => {

	const response = await axios.get(url);
    // 위 작업이 끝나야 이 아래로 넘어간다.
	console.log(response.data);
    
 }

 

이해가 가시나요?

 

이제 이를 리액트에 적용해 봅시다.

 

App.js의 코드를 다음과 같이 수정해 봅시다.

import React, { useEffect } from 'react';
import axios from 'axios';
const App = (props) => {

  useEffect(() => {
    const apiCall = async () => {
      let username = "hoonkk";
      const response = await axios.get(`https://api.github.com/users/${username}`);
      console.log(response.data);
    };
    apiCall();
  }, [])
  return (
    <div>
    </div>
  );
};

export default App;

 

useEffect는 이전에 다루었죠? 이는 컴포넌트가 처음에 렌더인되는 시점에 호출되므로 보통 리액트에서 api를 호출할 때는 useEffect에 작성하는 편입니다. 하지만 여기서 중요한 점은, useEffect 안에 들어가는 함수는 '뒷정리 함수'여야 하기 때문에 바로 async을 사용할 수 없습니다. 즉, 안에서 새로운 async 함수를 만들어 준 뒤 호출해주어야 합니다.

 

여기서 호출한 Api는 Github의 api 중 하나인 user의 정보를 호출하는 api 입니다.

username에 여러분들의 아이디를 넣고 작성한 뒤 서버를 가동시켜 봅시다.

 

콘솔에 잘 입력되나요?

 

이 데이터를 렌더링할 수 있도록 가공하려면 조금 더 response로 받은 데이터에 대한 이해가 필요하겠습니다.

 

이 부분은 다음에 다시 포스팅하도록 하겠습니다!