TIL : redux toolkit , json Server

redux toolkit (RTK)

redux toolkit은 리덕스를 사용함에 있어서 불필요한 형식적인 코드를 사용해야 하는 불편함을 해소하기 위해 만들어졌다.

redux 전체코드의 양을 줄이기 위한 새로운 api가 추가가 되고, Ducks 패턴들의 요소가 자동화되었다.

redux toolkit 설치하기

yarn add react-redux @reduxjs/toolkit

createSlice( )

createSlice 라는 API를 이용해서 Action Value, Action Creator, Reducer가 하나로 합쳐지게 되면서 더이상 Action Value, Action Creator를 따로 생성해 주지 않아도 된다.

modules 파일에서 createSlice 쓰기

기본형태

const counterSlice = createSlice({
	name: '', // 이 모듈의 이름
	initialState : {}, // 이 모듈의 초기상태 값
	reducers : {}, // 이 모듈의 Reducer 로직
})

modules 파일에서 추가로 달라지는 점

// 컴포넌트에서 사용하기 위해 action creator를 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// configStore에 등록하기 위해 reducer를 export default 한다.
export default counterSlice.reducer;

config > configStore.js 에서 달라지는 점

import { configureStore } from "@reduxjs/toolkit";
/**
  * reducer를 import
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우에는 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

Redux Devtools

: redux를 사용했을 때 크롬에서 현재 프로젝트의 state 상태, 어떤 action이 일어났을 때, 그 action이 무엇이며, 그것으로 인해 state가 어떻게 변경되었는지 등을 알 수 있는 개발툴 ( 확장프로그램 ) 로, 구글 웹스토어에서 다운받을 수 있다. 개발자도구에서 활용할 수 있다.

json Server

: 간단한 DB와 API서버를 생성해주는 패키지

백엔드에서 실제 DB와 API서버가 구축될때까지 프론트엔드 개발에서 임시적으로 사용할 mock data를 생성하기 위하여 사용한다.

mock data ?

: 모의 데이터, 프론트개발자가 백엔드 구축 전 프론트엔드 개발에서 임시적으로 사용하기 위하여 삽입하는 가짜 데이터

설치하기

yarn add json-server

실행하기

yarn json-server --watch db.json --port 3001

이 명령어는 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 의미로,

실행시키면 폴더안에 기본값이 세팅되어 있는 db.json 파일이 생성되며, localhost:3001로 react파일을 열 수 있게된다.

json파일 열기

//(예)
localhost:3001/toods

브라우저주소의 url을 입력한다는 건 get요청을 한다 ⇒ 우리가 만든 api서버에 get요청을 한 셈이기 때문에 db.json에 넣었던 데이터를 확인할 수 있다.

GET /todos 200 6.116 ms - 101

누군가가 이렇게 get요청을 했고, 이거를 6.116ms만에 리턴을 했다.