2023-11-28 본 캠프 39일차 / 58일차 TIL

2023-11-28 본 캠프 39일차 / 58일차 TIL

 

주요 진행사항

- 내일배움캠프 리액트 심화과정 강의 수강

 

강의 내용 정리

1. 리덕스 toolkit

리덕스 toolkit은 리덕스의 어려운 세팅들을 더욱 효율적이고 쉽게 개선한 라이브러리이다.

 

즉, 리덕스를 개선한 것이기에 오리지날 리덕스와 같은 개념을 가지고 있다.

 

설치는 다음과 같다

 

npm install @reduxjs/toolkit / yarn add @reduxjs/toolkit

 

사용법

기존 리덕스와 구분되는 부분은 크게 두가지 부분으로 나뉜다

 

1. config 

기존 리덕스는 combineReducers, createStore 두가지 메서드를 통해서 store를 생성했다.

리덕스 toolkit은 이 두가지 메서드를 하나의 메서드로 통합시켜 코드의 간편성과 효율성을 높혔다.

//config file

import {configureStore} from '@reduxjs/toolkit'
// import modules

const store = configureStore({
	reducer : {
    	//modules..
    }
}); 

export default store

 

2. module 

기존 모듈은 action creater를 다시 한번 생성해주는 컨벤션을 주로 사용한다.

따라서 리듀서 생성과 action creater 생성이라는 두번의 작업이 필요하다는 불편한 점이 있었다.

리덕스 toolkit은 리듀서의 생성과 동시에 action creater도 생성하기 때문에 불필요한 작업을 줄였다.

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

const initialState={
	num:0,
}

const counterSlice = createSlice({
	name : 'counterSlice',
    initalState,
    reducers : {
    	increaseNumber : (state,action)=>{
        	state.num+=1;
        }
    }
})

// config 파일에서 import 할 reducer 정보
export default counterSlice.reducer 
// dispatch를 위해 각 컴포넌트에서 import 할 action creater 정보
export const {increaseNumber} = counterSlice.actions

 

이 코드를 보고 이전 리덕스와 다른 한가지를 확인 할 수 있다.

기존 리덕스에서는 리듀서의 리턴값이 state이기 때문에 복사를 위해서 ...state를 먼저 했던 경험이 있을 것이다.

하지만 increaseNumber의 내부를 보면 리턴값이 없다. 다만 직접 원하는 state의 항목을 선택하여 값을 변경하고 있다.

이 또한 redux toolkit의 장점이라고 할 수 있겠다.

 

2. json-server

 

json-server는 개발을 하면서 직접 데이터를 가지고 올 수 없을 때 데이터의 구조와 비슷하게 mock 데이터를 생성후 테스트를 도와주는 라이브러리이다.

 

하나의 로컬에서 이같은 것이 가능한 이유는 개발하는 로컬 포트와 json-server의 로컬 포트를 다르게 주기 때문이다.

 

설치법은 다음과 같다

npm install json-server / yarn add json-server

 

설치가 완료되었다면 mock데이터를 저장할 json 파일을 root 경로에 생성한다.

 

 

위 작업을 하였다면 바로 사용을 하면 되지만 간단한 추가 작업을 거친다면, 더 편하게 사용이 가능하다.

// package.json "scripts" : {     "json" : "json-server --watch db.json --port {원하는 포트번호}" }

 

이 작업을 하지 않는다면, json-sever을 작동 시킬 때마다 "json-server --watch db.json --port 4023" 과 같은 명령어를 계속 쳐야한다.

작업을 마친다면 정말 간단하게 yarn json 이라는 명령어로 단순화 시킬 수 있다.

 

 

이제 기본 세팅이 완료되었다.

 

실행

json-server --watch db.json --port {원하는 포트번호} / yarn json

 

실행이 완료되었다면, 각 데이터를 비동기 작업을 통해서 사용하면 되겠다.

추가로 restfull 정보는 다음 사이트에서 확인하면 되겠다. 

json-server