21일차

21일차는 Redux에 대해 복습하고 더 공부하는 시간을 가졌다. 전에는 주로 Reducer 라는 함수를 위주로 배웠다면, 이번에는 더 큰 개념으로 Redux라는 걸 공부했다.

git : https://github.com/leeyulgok/5-Day1

---

수업

Redux

이전에도 정리를 했지만 수업에서의 핵심만을 정리하면 다음과 같다. Redux란, 상태 관리를 위한 상태 컨테이너 라이브러리다. 그 중 Store는 애플리케이션의 상태(state)를 저장하는 단일 저장소로 상태는 읽기 전용이며, 상태를 변경하기 위해 액션(dispatch)을 디스패치해야 한다.

이전에는 prop로 데이터를 전달했다면, Redux를 사용하면 이미지와 같이 사용할 수 있다. 하나의 저장소를 두고 필요하면 요청을 통해 가져다 쓴다. 간단하게 얘기해서 prop를 사용하기 귀찮으면 사용한다고 보면 된다.

---

Redux 사용예시

아주 간단하게 Redux를 사용해서 사용자 이름을 변경하는 웹을 만들었다. 결과는 아래와 같다.

필요한 라이브러리

npm install redux react-redux @reduxjs/toolkit redux-logger

이제 이를 만든 코드를 기록하도록 하겠다.

사용코드

사용한 코드는 총 4가지다. userSlice, store, App, index 이렇게 구성되어 있다. 각각의 역할은 다음과 같다.

1. userSlice : Redux Toolkit에서 제공하는 createSlice 함수를 사용하여 정의된 Redux 슬라이스.
2. store : Redux의 스토어. userSlice에서 정의한 리듀서와 함께 Redux DevTools와 미들웨어를 설정하여 애플리케이션의 상태 관리
3. App : React 애플리케이션의 메인 컴포넌트
4. index : React 애플리케이션을 렌더링하고, Redux의 Provider 컴포넌트를 사용하여 애플리케이션에 Redux 스토어를 제공

역할별로 코드를 설명하도록 하겠다.

1. store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from '../reducer/userSlice'

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default store;

store.js는 말 그대로 store를 생성하는 파일이다. import부분을 살펴보면 userReducer은 내가 만든 파일이고, configureStore 함수는 Redux Toolkit에서 제공하는 스토어 설정 함수로, 이 함수를 사용하여 스토어를 생성하고 반환한다.

reducer 라는 객체는 user라는 이름으로 userReducer를 등록했다. 그리고 이렇게 만든 스토어를 store라는 변수에 할당하고 모듈로 보낸다.

이렇게가 store의 코드인데, 핵심은 store를 생성하고 Reducer를 정의해서 반환한다. 그리고 store에 저장된 Reducer를 사용해서 상태를 업데이트한다는 것이다.

2. userSlice.js

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

const initialState = {
  name: "",
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setName: (state, action) => {
      state.name = action.payload;
    },
  },
});

export const { setName } = userSlice.actions;

export default userSlice.reducer;

userSlice.js는 Redux Toolkit에서 제공하는 createSlice 함수를 사용하여 리덕스 슬라이스를 정의하는 역할이다.

짚고 넘어가기 Redux Toolkit과 Redux Slice

우선 Redux Toolkit은 Redux의 공식적인 도구 모음이다. Redux를 더욱 간편하게 사용할 수 있게 해준다고 보면된다.

Redux Slice는 이 도구 모음 중에 하나로, 기존의 Redux에서는 액션 타입, 액션 생성자 함수, 리듀서 함수를 각각 작성해야 했습니다. 하지만 Redux Slice를 사용하면 액션과 리듀서를 한 번에 정의할 수 있다.

코드를 살펴보면 우선 initialState로 객체의 초기 상태를 설정한다. 그리고 Redux Slice를 생성한다.

createSlice 함수를 사용하여 생성된 userSlice는 name, initialState, reducers 객체가 있다. name은 슬라이스의 이름을 정의하고, initialState은 초기 상태를 가리킨다.

객체 중 하나인 reducer는 Reducer 함수다. state와 action을 받아서 새로운 상태를 반환한다. 여기서 중요한 건 불변성인데 직접적인 상태 변경이 아닌 새로운 객체를 반환한다는 점을 이해할 필요가 있다.

마지막으로 createSlice 함수의 반환 값으로 생성된 액션과 리듀서를 내보낸다. userSlice.actions를 통해 액션 생성자를 가져올 수 있고, userSlice.reducer를 통해 리듀서를 가져올 수 있다.

3. App.js

import React, {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import { setName } from "./reducer/userSlice";

const App = () => {
  const dispatch = useDispatch();
  const userName = useSelector((state) => state.user.name);
  const [inputName, setInputName] = useState('');

  const handleNameChange = () => {
    dispatch(setName(inputName));
    setInputName('');
  };

  const handleInputChange = (event) => {
    setInputName(event.target.value);
  };

  return (
    <div>
      <h1>Hello, {userName}</h1>
      <input
        type="text"
        id="name"
        value={inputName}
        onChange={handleInputChange}
      />
      <button onClick={handleNameChange}>Change Name</button>
    </div>
  );
};

export default App;

App.js는 메인 컴포넌트다. 내용이 많기 때문에 Redux에 관련한 핵심만 짚고 넘어가려 한다.

우선 import다.

import { useDispatch, useSelector } from "react-redux";
import { setName } from "./reducer/userSlice";

첫 번째는 useDispatch와 useSelector 훅을 사용하여 Redux 스토어와 상호 작용하도록 한다. 스토어는 앞에 정의한 스토어다. 두 번째 import는 userSlice에서 정의한 setName 액션 생성자를 가져왔다.

다음으로 변수 dispatch와 userName이다. dispatch는 상태를 업데이트 하는 역할이고, userName은 스토어의 상태에서 user의 name을 가져온 거다(상태를 가져옴).

그리고 다음은 기존과 똑같이 값을 입력하고 버튼을 누르면 핸들러가 동작해서 값을 올려주는 역할이다.

4. index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

const rootElement = document.getElementById('root');

const app = (
  <Provider store={store}>
    <App />
  </Provider>
);

const root = createRoot(rootElement);
root.render(app);

마지막으로 index.js다. 애플리케이션의 진입점으로 App 컴포넌트를 렌더링하고, Provider 컴포넌트를 사용하여 Redux 스토어를 애플리케이션에 제공한다.

---

정리하기

Redux를 사용하여 간단한 웹을 만들어봤다. 정말 코드는 단순하다. 그러나 어렵다. 다양한 라이브러리가 지원해주기 때문에 막 다루는 것보다 이해를 하고 넘어가는 게 중요한 부분인 것 같다. 그렇기 때문에 다양한 예를 해보면서 이를 익히고 다음에 적용을 잘하고 싶다.

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프