Today I Learn # 38 < React-redux toolkit >

Learn/Today I Learn

Today I Learn # 38 < React-redux toolkit >

미래개발자 2022. 12. 22. 14:20

728x90

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

React 심화강의 복습중

오늘 새로 배운 내용

< redux 흐름 >
modules 안에는 reduser를 return하는 많은 module들이 들어감
이 module들이 합해져 Store을 이룬다
이 module들 안에는 여러가지 state를 관리할수 있는 설정들이 들어가 있다.
여기서 반환하는 reduser들을 호출해서 state값을 변경하게됨
reduser들을 호출할땐 dispatch를 이용

결국 modules안에 있는 파일들은 리듀서(state,action을 이용)를 만드는게 핵심! -> config로 가서 결합하여 rootReducer을 만들어서 Store을 만듬

reducer -> state와 그것을 관리하는 방법(=action --> type, payload)

action이란 놈은 ===>

{
type: '',
payload: ''.
};

action creator은 액션 객체를 생성

- state가 변경되는 과정 - (todos.js파일)
action creator에서 만들어진 객체가 dispatch안으로 들어가서 reducer에 있는 switch case에 type 맞는 걸 찾음 -> 그때 넘겨준 payload에 맞는 액션객체를 리턴해준다.

------ React 심화 ------

<<< 리덕스 toolkit >>>

리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것
코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷
리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같습니다.
컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같습니다.
바뀐 부분은 그저 모듈 파일 뿐

(1) 툴킷 설치하기

CRA를 통해 새로운 프로젝트틀 생성하고 yarn을 통해 아래 패키지를 설치

yarn add react-redux @reduxjs/toolkit

(2) count 프로그램 코드 비교

Slice 라는 API를 사용하면 Action Value, Action Creator, Reducer가 하나로 합쳐진다!

//createSlice API 뼈대

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

counterSlice 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 된다는 점
Action Value 까지 함수의 이름을 따서 자동으로 만들진다. 그래서 우리는 Reducer만 만들어주면 됨

// counterSlice.js의 Slice 구조

// counterSlice.js의 Slice 구조

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

일반 리덕스에서 export를 통해서 각각의 Action Creator를 내보내주었던 것을 아래 코드를 작성하면 똑같이 내보낼 수 있습니다.

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

(3) configStore 비교

예)

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer 입니다.
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 합니다.
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 입니다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

store를 export default 해서 최상위의 index.js Provider에 주입해주는 것은 전혀 바뀐게 없습니다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

< Redux Devtools 사용 >

리덕스를 사용하면, 리덕스 devtools를 사용할 수 있습니다.
현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있습니다.
구글 웹스토어에서 플러그인을 설치

툴킷이 아닌 일반 리덕스에서 devtools를 사용하고자 한다면, 별도 설정이 필요합니다. 툴킷은 devtools이 내장되어 있기 때문에 별도의 코드 설정 없이 바로 사용 가능

정리:
- slice를 이용하면, Reducer, Action Value, Action Creator를 한번에 구현할 수 있다.
- 툴킷을 사용하면, 별도의 설정없이 devtools를 사용할 수 있다.
- *내장된 주요 패키지 : thunk, devtools, immer 등.*

<<< json-server >>>
json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지
Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성

<json-server 설치하기>

yarn add json-server

<json-server 실행하기>
간단한 패키지이긴 하나, 말그대로 서버
리액트도 start하고, json-server로 start 해야 합니다

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

db.json 파일 예시)

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

http://localhost:3001/todos로 이동해서 확인

정리:
- json-server를 통해서 임시 API를 구축하고, 서버의 data를 mocking 할 수 있으며 이것을 통해 선제적으로 FE 개발을 진행할 수 있다.
- heroku를 이용해서 json-server를 배포할 수 있다.