[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 28일차 - Redux

 

🤔 Redux란?

👉 Redux는 리액트 생태계에서 가장 사용률이 높은 라이브러리이다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 상태 관리를 손쉽게 할 수 있다. 

👉 Redux는 useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. 다만 차이가 있다면 Redux는 전역으로 데이터 상태를 관리한다. 

👉 Props를 가지고 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 방식을 사용하지만 간단한 상황에서는 잘 작동하지만, 애플리케이션이 복잡해지고 컴포넌트의 계층이 깊어질수록 상태 관리가 복잡해질 수 있다. 특히 여러 컴포넌트가 동일한 상태를 공유하거나, 비동기 작업으로 상태가 변경되어야 하는 경우에는 더욱 그렇다. 

 

👉 리덕스의 3가지 규칙

1️⃣ 하나의 애플리케이션 안에는 하나의 스토어

2️⃣ 상태는 읽기전용(새로운 상태를 생성하여 업데이트를 해주는 방식으로 한다. )

3️⃣ 변화를 일으키는 함수, Reducer는 순수한 함수(이전 상태 절대 건들지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환) 

 

👉 리덕스의 기본 흐름

1️⃣ 하나의 중앙 데이터 store를 갖습니다. (데이터는 state(상태)를 말한다.)

2️⃣ 상태 값을 변경해야할 때 데이터들의 state 값을 수정해줄 reducer 함수를 만든다.

3️⃣ dispatch를 사용하여 reducer에게 state 값을 수정하라고 action 값과 함께 요청한다. 

 

👉 예시(숫자 증가, 감소 기능 만들기)

1️⃣ 중앙 store 기본 설정

import { configureStore } from "@reduxjs/toolkit"
import counterSlice from "./counterSlice"
import { logger } from "redux-logger";


// state slice는 이름을 바꿔도 된다.   
const store = configureStore({
    reducer: {
    	counter : counterSlice,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),

});

export default store;

👉 configureStore은 Redux 스토어를 쉽게 설정하고 생성하는 도구 이를 통해 개발자는 애플리케이션의 상태 관리에 집중하면서  Redux를 더 편리하게 사용할 수 있다. 

👉 미들웨어는 action이 dispatch 되어서 reducer에 도달하기 전에 중간에 실행되는 함수들의 집합이다. 액션을 가로채서 로그를 남기거나, 액션을 취소하거나, 비동기 작업을 수행하는 등의 역할을 할 수 있다.

👉 기존의 미들웨어에 logger은 액션과 그에 따른 새로운 상태를 콘솔에 기록하는 역할을 수행하는 미들웨어이다. 

 

2️⃣ slice 생성

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

const initialState = {
   value: 0
}


export const counterSlide = createSlice({
   name : "conuter",
   initialState,
   reducers: {
      addCounter : (state) => {
         state.value += 1;
      }
      minusCounter : (state) => {
         state.value -= 1;
      }
   }
});

export default counterSlice.reducer;

export const { addCounter, minusCounter} = counterSlice.actions

👉 createSlice에서 자동으로 액션 생성자를 만들고 reducer를 조합한다. 

👉 createSlice를 통해서 3가지의 규격에 맞게 생성한다. 1.이름, 2.초기 상태,  3. reducers 안에 reducer 함수 이렇게 3가지로 구성된다. 

👉 counterSlice.reducer은 최종적으로 생성된 Reducer를 가리킨다. slice reducer을 의미한다. 

👉 그리고 createSlice 함수는 우리가 작성한 reducer 함수에 해당하는 액션 생성자를 자동으로 만들어 준다. 액션 생성자들은 counterSlice.actions 객체에 저장되어 있다. 안 그러면 아래처럼 직접 작성해야 한다.

function addCounter() {
  return {
    type: 'counter/addCounter'
  }
}

function minusCounter() {
  return {
    type: 'counter/minusCounter'
  }
}

dispatch(addCounter());
dispatch(minusCounter());

 

3️⃣ dispatch 사용하여 state 변경

import { useDispatch, useSelector } from "react-redux";
import { addCounter, minusCounter } from "../store/counterSlice"

const Counter = () => {
     const count = useSelector((store) => store.counter.value)
	
     const dispatch = useDispatch();
     
     const addHandler = () => {
        dispatch(addCounter())
     };
     
     const minusHandler = () => {
       dispatch(minusCounter());
     }
	
     return (
       <div>
         <h1>counter</h1>
         <p>count: {count}</p>
         <div>
       	 <button onClick={addHandler}>증가</button>
         <button onClick={minusHandler}>감소</button>
       	 </div>
       </div>
     
     )
}

 

👉 dispatch를 이용해서 상태를 변경한다.

👉 useSelector를 이용해서 어떤 슬라이스에 상태를 이용하고 싶은지 정해주면 된다. 

👉 여기 액션 생성자에 잠깐 짚고 넘어가면 dispatch 함수는 액션을 발행하고, reducer에서 이 액션을 처리하는데 사용된다. 

 

👉 액션 생성자 기본 형태 

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: text
  };
}

👉 이 액션은 애플리케이션에서 스토어에 보내는 데이터 묶음이다. 반드시 type 필드를 가지고 있는다. 객체 형태이다. 

 

4️⃣ Redux 스토어 React 앱에 연결

import { Provider } from "react-redux";
import Counter from "../src/components/Counter"
import store from "../src/store";

function App() {
  return (
    <Provider store={store}>
      <div>
        <Counter />
      </div>
    </Provider>
  );
}

export default App;

👉 항상 Provider를 통해 스토어를 연결하고 최상위 컴포넌트 위치하고, store라는 prop을 통해 Redux 스토어를 받는다. 

 

 

 

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.