Main Project 5/11 ~ 5/12

기간동안 한 일

---

로그인/회원가입 기능 구현을 했다.
백엔드담당자 분과 테스트를 계속 하고 있다.
Redux Toolkit을 이용해서 전역 상태를 설정했다.

Redux Toolkit 란?

---

Redux에서 상태 관리를 더욱 쉽게 해주는 라이브러리이다.
Redux는 상태값 변경 및 처리, Redux store 구성 등이 꽤나 번거로웠는데,
Redux Toolkit은 이러한 문제점을 보완하여 사용자 친화적인 API를 제공한다.
일부 새로운 기능들을 추가하여 Redux를 사용하는데 필요한 모든 것들을 한 곳에 모아서 제공한다.

Redux Toolkit을 사용한 이유

---

Redux에서 더욱 편리한 방법으로 Redux 코드를 작성하고 관리할 수 있는 방법이 있을까 찾아보다가Redux Toolkit은 Redux에서 코드량을 줄 이기 위한 여러가지 도구들을 제공한다는 것을 보고 사용하게 됐다.

Redux Toolkit 메서드

---

• createSlice: reducer와 action creator를 모두 생성해주는 메서드

• createAsyncThunk: 비동기 작업을 처리하는 thunk를 생성해주는 메서드

• createEntityAdapter: 엔티티를 관리하기 위한 CRUD 메서드를 제공하는 메서드

• configureStore: Redux store를 생성해주는 메서드

• createReducer: 직접적인 reducer 함수를 생성해주는 메서드

• createAction: action creator를 생성해주는 메서드

  Redux Toolkit 사용법

  ---

• 패키지 설치

npm install @reduxjs/toolkit

• 스토어 생성하기

import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
	reducer: {
		auth: userSlice.reducer,
	},
});
export default store;

• configureStore() 함수는 reducer 옵션을 통해 전달된 객체는 스토어의 초기 상태 및 상태 업데이트를 처리하는 함수이다.
  
  

• 리듀서 작성하기

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

const initialState = {
	isAuthenticated: false,
	email: '',
	memberId: '',
};

const userSlice = createSlice({
	name: 'user',
	initialState,
	reducers: {
		loginSuccess: (state, action) => {
			state.isAuthenticated = true;
			state.email = action.payload.email;
			state.memberId = action.payload.memberId;
		},
		loginFailure: (state) => {
			state.isAuthenticated = false;
			state.email = '';
			state.memberId = '';
		},
	},
});
export const { loginSuccess, loginFailure } = userSlice.actions;

• createSlice() 함수는 reducer를 생성하는 데 필요한 여러 가지 구성 요소를 제공하며. 반환하는 객체에서는 reducer 함수가 포함되어 있다.
• 이 함수는 state의 초기값과 action 생성자 함수를 만들어준다.
• initialState는 상태의 초기값을 정의하고, name은 reducer의 이름을 나타낸다.
• reducers는 액션 생성자 함수와 연결된 reducer 함수를 포함하는 객체이다.
  
  

• 스토어에서 사용

• React 컴포넌트에서 Redux Toolkit 스토어를 사용하는 방법은 크게 두 가지이다.
  • useSelector hook을 사용하여 스토어에서 상태값을 읽기
  • useDispatch hook을 사용하여 액션 디스패치하기
  • 여기서 내가 사용한 방법은 useDispatch hook이다.
  • useDispatch hook을 사용하면 컴포넌트에서 스토어에 액션을 보낼 수 있다.

import { useDispatch } from 'react-redux';
import { loginSuccess, loginFailure } from '../store/userSlice';

const dispatch = useDispatch();

dispatch(loginSuccess({ email: res.data.email }));
dispatch(loginFailure());