학습내용
- Redux Toolkit
- json-server
- immer
- axios
기존 리덕스 모듈의 코드를 줄이고 더 간편하게 사용하기 위해 개량한 도구. 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에서 사용하기 위해선 별도의 설정이 필요.
불변성 관리를 대신 해주는 리액트 라이브러리
yarn add immer
import produce from 'immer';
const state = {
number: 1,
dontChangeMe: 2
};
const nextState = produce(state, draft => {
draft.number += 1;
});
produce(수정하고 싶은 상태, 업데이트 정의 함수)
📌 참조문헌
간단한 DB 및 API 서버를 생성해주는 패키지로 실제 DB와 API가 구축되기 전 임시로 사용할 mock data 개념이다.
yarn add json-server
임시 데이터이긴 하나 서버이기 때문에 리액트와 별개로 실행해야만 리액트와 json-server가 통신할 수 있다. 아래 명령어를 통해 실행한다. (port
의 번호는 유동적)
yarn json-server --watch db.json --port 3001
명령어를 실행하면 db.json 파일이 생성된다. 이 파일 안에 데이터를 넣어주면 된다.
http를 통해 서버와 통신하기 위해 사용하는 패키지
yarn add axios
요청 코드를 작성하기에 앞서 요청 방식을 확인하기 위해선 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
개발자가 보낸 요청에 대한 서버의 응답값