학습내용

• Redux Toolkit
• json-server
• immer
• axios

Redux Toolkit(RTK)

기존 리덕스 모듈의 코드를 줄이고 더 간편하게 사용하기 위해 개량한 도구. RTK에서는 더이상 Action Value와 Action Creator를 생성하지 않고 Slice라는 API를 사용해서 Action Value, Action Creator, Reducer를 한 번에 작성한다.

yarn add react-redux @reduxjs/toolkit

manageTodo.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  initialList: [중략],
};

const manageTodo = createSlice({
  name: "manageTodo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      console.log(action.payload);
      state.initialList = [...state.initialList, action.payload];
    },
    deleteTodo: (state, action) => {
      console.log(action.payload);
      state.initialList = state.initialList.filter(
        (todo) => todo["id"] !== action.payload
      );
    },
    updateTodo: (state, action) => {
      console.log(action.payload);
      state.initialList = state.initialList.map((todo) => {
        if (todo.id === action.payload) {
          return {
            ...todo,
            isDone: !todo.isDone,
          };
        } else {
          return todo;
        }
      });
    },
  },
});

export const { addTodo, deleteTodo, updateTodo } = manageTodo.actions;
export default manageTodo.reducer;

configStore.js

import manageTodo from "../modules/manageTodo";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: { manageTodo },
});

export default store;

combimeReducers-createStore 2단계를 거쳐서 생성했던 기존의 방식과 달리 리듀서를 모으는 동시에 store를 생성한다.

index.js에서 Provider를 주입하는 방식과 컴포넌트에서 모듈을 사용하는 방식은 변함이 없다.

Redux Devtools
프로젝트의 state 상태, 액션 발생시 해당 액션이 무엇이고 state가 어떻게 변경되었는지 알려주는 개발툴. Toolkit의 내장툴이기 때문에 일반 redux에서 사용하기 위해선 별도의 설정이 필요.

immer

불변성 관리를 대신 해주는 리액트 라이브러리
yarn add immer

import produce from 'immer';

const state = {
  number: 1,
  dontChangeMe: 2
};

const nextState = produce(state, draft => {
  draft.number += 1;
});

produce(수정하고 싶은 상태, 업데이트 정의 함수)

📌 참조문헌

json-server

간단한 DB 및 API 서버를 생성해주는 패키지로 실제 DB와 API가 구축되기 전 임시로 사용할 mock data 개념이다.

yarn add json-server

임시 데이터이긴 하나 서버이기 때문에 리액트와 별개로 실행해야만 리액트와 json-server가 통신할 수 있다. 아래 명령어를 통해 실행한다. (port의 번호는 유동적)
yarn json-server --watch db.json --port 3001

명령어를 실행하면 db.json 파일이 생성된다. 이 파일 안에 데이터를 넣어주면 된다.

Axios

http를 통해 서버와 통신하기 위해 사용하는 패키지
yarn add axios

API 명세서

요청 코드를 작성하기에 앞서 요청 방식을 확인하기 위해선 API 명세서를 참고해야 한다.

📌 참조문헌

Path Variable

GET /posts
GET /posts/1
POST /posts
POST /posts/1
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

/ 뒤에 오는 경로를 변수로 사용하는 방식. 주로 전체 정보, 상세 정보와 같은 단순 식별 용도로 활용.

Query Parameter

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

=의 전후 정보를 변수로 사용하는 방식. 정렬이나 필터링 용도로 활용.
ex) author.name이 typicode인 comments를 조회

HTTP 프로토콜
웹에서 브라우저와 서버간에 데이터를 주고받는 방식. 각각의 데이터 요청이 서로 독립적으로 관리가 되고 있으며 이를 상태가 없는(stateless) 프로토콜이라고 부른다. 이 점 때문에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있다는 장점이 있다.

📌 참조 문헌

요청하기

GET
서버 데이터 조회
axios.get(url[, config])

POST
서버 데이터 추가. 보통은 클라이언트의 데이터를 body 형태로 서버에 추가하는 용도로 사용.
axios.post(url[, data[, config]])

DELETE
서버 데이터 삭제
axios.delete(url[, config])

PATCH
서버 데이터 수정
axios.patch(url[, data[, config]])

PATCH	PUT
데이터 일부만 수정	데이터 전체를 수정

네트워크 탭
네트워크 개발시에는 개발자도구의 네트워크 탭을 확인하면서 진행하는 것이 좋다. 문제가 발생시 네트워크 탭의 정보를 통해 디버깅 할 수 있다.

• headers
  Request, Status Code 정보
• payload
  개발자가 보낸 body 정보
• response
  개발자가 보낸 요청에 대한 서버의 응답값

더 알아보기
📌 인스턴스
📌 인터셉터