TIL 20211012 [항해99 27일차]

Arong·2021년 10월 12일

React axios 항해99

Axios

목록 보기

1/1

Axios 설치

Using yarn: yarn add axios
Using npm: npm install axios
Using bower: bower install axios

Axios의 기본적인 사용법

가장 많이 사용하게 될 GET/POST 메소드의 기본적인 사용방법 및 메소드들
첫번째 인자는 요청을 보낼 url, 두번째 인자는 서버로 보낼 data
그 외 기타 메소드(get, post, put, patch, delete 등등..)

HTTP 메서드 별칭

axios.get(url[, config])
axios.post(url[, data[, config]])
axitos.put(url[, data[, config]])
axitos.patch(url[, data[, config]])
axios.delete(url[, config])
axios.request(config)
axios.head(url[. config])
axios.options(url[. config])

Axios를 좀 더 편하게 사용하는 방법

인스턴스 생성으로 더 간편하게 axios를 사용해보자
사용할 API들을 모듈화하여 사용해보자

import axios from 'axios';

const instance = axios.create({
  // 기본적으로 우리가 바라볼 서버의 주소
  baseURL: 'http://localhost:4000/',
  //headers에는 나중에 토큰을 넣어도되고 원하는 방식으로 활용 가능
  headers: {
    'content-type': 'application/json;charset=UTF-8',
    accept: 'application/json',
  },
});

export const apis = {
  // baseURL을 미리 지정해줬기 때문에 함수의 첫 번째 인자에 들어가는 url은
  // http://localhost:4000/ + 내가 작성한 url 즉 예시로
  // getPost함수에서는 instance.get('http://localhost:4000/posts')로 요청을 보내게 됩니다.
  // get과 delete의 경우 두 번째 인자에 데이터를 담아 보낼수 없기 때문에 서버에 데이터를 보낼경우 
  쿼리를 이용하여 보내주도록 합니다.

  // 게시물 불러오기
  getPost: () => instance.get('/posts'),
  // 게시물 작성하기
  createPost: (contents) => instance.post('/posts', contents),
  // 게시물 수정하기
  editPost: (id, content) => instance.put(`/posts/${id}`, content),
  // 게시물 삭제하기
  delPost: (id) => instance.delete(`/posts/${id}`),
};

Jason-server

Node를 기반으로 구동되는 API-Server로 별도의 서버가 없는 환경에서 프론트엔드 작업을 진행하고자 할 때 유용하게 사용된다.
테스트 용도 및 연습 용도로 사용!

Jason-server 사용방법

src폴더 최상위 위치에 data.json 파일을 만든다.

json형태의 데이터를 작성한다.

터미널에 "npx json-server ./data.json --port 4000" 입력

그러면 실제로 localhost 4000번으로 서버가 구동이 된다.

json-server로 만든 서버를 이용한 Axios예제

import React, { useEffect, useState } from 'react';
import './App.css';
import { apis } from './axios';
// 위에서 만든 axios를 모듈화한 apis를 불러와줍니다.

function App() {
  const [list, setList] = useState([]);
  
  useEffect(() => {
  // 페이지가 렌더될때 처음에 1번 서버에 요청하여 데이터를 받아옵니다.
  // 저희가 미리 만들어둔 모듈이 있기때문에 apis.getPost()를 실행하면 서버에 요청을 보내게 됩니다.
  // 추가로 then과 catch문을 통해 성공,실패 로직을 구현해주시면 됩니다.
  // 서버에서 받아오는 데이터들이 궁금하다면 response를 console.log 한 번 찍어서 살펴보세요 !
  
    apis
      .getPost()
      .then((res) => {
        const post = res.data;
        setList(...list, post);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);
  
  return (
    <div className='App'>
      {list &&
        list.map((item) => {
          return (
            <div key={item.id}>
              <h2>{item.title}</h2>
              <p>{item.body}</p>
            </div>
          );
        })};
    </div>
  )
}

export default App;

Redux-thunk를 활용한 api통신

Redux-Thunk와 Axios를 활용해서 redux middleware함수에서 api통신을 처리 할 수 있다.
Redux-Thunk + Axios GET활용예시

import { createAction, handleActions } from 'redux-actions';
import { produce } from 'immer';
import { apis } from '../lib/axios';

// action 생성
const LOAD_POST = 'LOAD_POST';

// actions creators
const loadPost = createAction(LOAD_POST, (list) => ({list}));

// middleware func
const getPostMiddleware = () => {
   return (dispatch) => {
   
   // redux-thunk를 활용한 middleware 함수 입니다.
   // 우선 앞에서 만든 axios모듈을 통해 getPost()를 실행시켜줍니다.
   // response를 받아온 data를 post_list 상수에 넣어줍니다.
   // 위에 만든 loadPost 액션 함수에 인자로 post_list를 넣어주고 dispatch 시킵니다.
   // 그러면 받아온 데이터를 redux에 담게 되겠죠 ?
   
    apis
      .getPost()
      .then((res) => {
        const post_list = res.data;
        dispatch(loadPost(post_list));
      })
      .catch((err) => {
        console.error(err);
      });
  };
};

// reducer
export default handleActions(
  {
    [LOAD_POST]: (state,action) =>
      produce(state, (draft) => {
        draft.list = action.payload.list;
      }),
  },
  initialState
);

const postCreators = {
  getPostMiddlewrae
};

export { postCreators };