Redux 발 담가보기

 

📒 Redux란?

React에서 주로 사용하며, 상태관리를 별도의 저장소에서 다룰 수 있는 라이브러리

 

📌 useState와 Redux의 차이

📝 useState()의 경우

단방향으로만 상태를 갱신할 수 있다.

물론 당연히 props를 통해 상태 갱신 함수를 내려주면 되지만 좋은 방법은 아니라고 알고 있다.

 

📝 Redux의 경우

모든 컴포넌트에서 Redux Store에 접근하여 상태를 가져오거나, reducers를 통해 상태를 갱신할 수 있다.

 

 

📌 Redux Store의 구성 요소

• `initialState`: 상태의 기본값
• `reducers`: 상태를 바꾸는 방법을 정의한 코드. reducers를 사용하지 않고서는 상태를 변경할 수 없다.
• `action` : reducers를 실행하는 함수 (dispatch라는 redux 내부의 함수로 실행한다.)

 

📌 Redux 를 어떤 프로젝트에서 사용하는 것이 좋을까?

사용된 컴포넌트가 적고 컴포넌트 사이에 상태 전달이 적다면 오버스펙이 될 수 있다. 오히려 사용하지 않는게 더 좋을 수 있다.

단, 컴포넌트를 사용하다가 상위 컴포넌트에 있는 상태를 가져오는 작업을 하는 것이 너무 귀찮은 단계까지 되었다면 사용하면 좋다.

 

📒 Redux-ToolKit (RTK) 란?

Redux 공식 개발 팀에서 개발했고, Redux를 더 효율적으로 사용할 수 있도록 도와주는 라이브러리.

공식 문서: https://redux-toolkit.js.org/

Redux Toolkit | Redux Toolkit

 

📒 예시 코드

import { nanoid, PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from 'utils/@reduxjs/tookit';

const slice = createSlice({
  name: 'todo',
  initialState: [],
  reducers: {
    addTodo: {
      reducer: (state, action: PayloadAction<TodoItem>) => {
        state.todolist.push(action.payload);
      },
      prepare: (content: string) => {
        const id = nanoid();
        return { payload: { id, content, completed: false, editing: false } };
      },
    },
    checkTodo: (state, action: PayloadAction<{ id: string; }>) {
      const { id } = action.payload;
      const todo = state.todolist.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});