[ToyProject-Todomate] 투두메이트 클론 프로젝트 32

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

---

1. axios 설치하기

2. axios 시작하기

---

 

 

이번엔 비동기 모듈을 만들어보자.

별도 설치할 필요 없는 다양한 자바스크립트 모듈이 있지만(HTTP Client 라이브러리 : HTTP 상에서 통신을 하는 자바 기반 컴포넌트) 리액트 프로젝트에서 많이 사용하고 있기도 하고 코드가 간결해보이는 axios를 사용해본다.

 

axios는 yarn이나 npm을 통해 작업영역에 설치해서 사용해야 한다. 그래서 의존성이 생기는 것이 단점이다.

추천해주신 fetch도 사용해보고 싶었는데 레퍼런스가 조금 더 많은 axios로 선택했고 

파일 분리를 통해 api와 통신하는 과정을 하나의 파일에서 관리하는 방법을 배워보려고 한다.

 

Recoil 에서도 비동기 통신을 위해 사용할 수 있는 코드를 주고 있는데 이걸 쓰기엔 아직 여러모로 지식이 모자라서 ...

 

 

---

 

1. axios 설치하기

 

axios는 비동기 통신 프레임워크이기 때문에 yarn이나 npm 을 통해 설치해줘야 한다.

아래의 명령어를 터미널에 입력한다.

 

 

//npm
npm install axios
//axios
yarn add axios

 

 

그리고 별도의 디렉토리 - 컴포넌트 파일을 하나 생성해준다.

나는 api - getApis.js 라는 이름의 디렉토리와 컴포넌트를 생성했다. 

 

 

 

 

 

API와 통신하기 위한 방법 중에 주로 사용하는 방식은 아래와 같다.

 

 

GET : API의 정보를 받아오기 위해 GET 방식을 사용한다. 
POST : API로 정보를 전송해 값이나 상태를 변경하기 위해 POST 방식을 사용한다.
DELETE : 무언가를 삭제하기 위해 DELETE 방식으로 전달한다.

 

 

쿼리로 따지면 GET은 SELECT, POST는 UPDATE, PUT, PATCH, DELETE는 DELETE 다.

 

 

우선 무언가를 GET 방식으로 불러와보자.

 

 

 

2. axios 시작하기

 

 

아까 만든 getApis 컴포넌트 파일 상단에 axios를 import 해준다. 

 

import axios from 'axios';

 

 

우리는 아직 API가 완성되지 않았기 때문에 가상의 테스트 api를 하나 얻어온다. 

(처음에는 로컬에 data/data.json 파일을 만들어 시도했으나 로컬에서 axios로 json을 받아올 수는 없다고 한다. 참고할 블로그는 여기)

 

jsonPlaceHolder 서비스에서 샘플 API를 하나 따왔다.

 

https://jsonplaceholder.typicode.com/users/1

 

위의 URL에 요청하는 axios 함수를 getApis 파일에 만들어준다.

 

 

import axios from 'axios';

export default function getResources () {
  //axios
  axios.get('https://jsonplaceholder.typicode.com/users/1')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})
}

 

 

위의 getResources 를 실행하기 위해서는 어떤 신호를 줘야 하는데 useEffect 나 onClick등을 이용할 수 있겠다.

데이터를 불러오는 것이 필요한 컴포넌트에 해당 함수를 import 해보자

 

나는 이전에 만들어둔 Goals 컴포넌트에 넣어보기로 했다.

아래의 import 문을 상단에 추가한다.

 

 

import getResources from '../api/getApis';

 

 

그리고 Goals 컴포넌트 안에 useEffect를 추가해준다.

useEffect를 추가하기 위해서는 react에서 useEffect를 import 해와야 한다.

 

 

import React, { useEffect } from "react";
import getResources from '../api/getApis';

export default function Goals(props) {

  useEffect(()=>{getResources()})
    
}

 

 

위와 같이 작성하면 Goals 컴포넌트가 실행될 때 (렌더링 될 때) getResources 함수가 실행된다.

 

 

 

 

 

 

이제 별도의 파일에서 axios 함수를 만들어 GET으로 불러올 수 있게 되었다.