[DAY-70] React 심화(2)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
난..아직 recoil의 아토믹함에서 헤어나오지 못했다.
redux와 친해지려면 아직 멀었습니다.
아니 미들웨어 왜 그렇게 많아요?

Redux

Redux는 Prop Drilling 문제를 해결하기 위해 등장한 상태 관리 라이브러리이다.

그렇다면 contextAPI와 어떤 점이 다를까?

1. ContextAPI

• React 내장 API
• Provider가 가진 상태를 Consumer가 가져올 수 있다.
• 소규모 프로젝트에 적합

2. Redux

• Thrid Party 라이브러리
• 미들웨어 기능 제공
• 성능 최적화 제공
• Reducer를 통해 Store에 상태를 저장, 해당 상태가 변경되면 View가 렌더링
• 소규모 프로젝트에는 적합하지 않을 수 있다.

즉 Redux는 ContextAPI와 useReducer Hook을 함께 사용한 것과 유사하다.

Redux가 많은 기능을 가지고 있다고 해서 무조건 Redux를 사용해야 하는 것은 아니다.

상황에 맞게 선택해서 사용하는 것이 좋다.

Redux 3가지 원칙

1. Single source of truth

하나의 프로젝트 (어플리케이션) 안에는 하나의 스토어만 사용하자는 원칙이다.

이렇게 하면 어플리케이션의 디버깅이 쉬워지고 서버의 직렬화가 될 수 있다.

또한 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.

2. State is read-only

상태를 변화시키는 방법은 오직 Action을 일으키는 방법 뿐이다.

3. Changes are made with pure functions

변화를 일으키는 Reducer 함수는 순수한 함수여야 한다.

1. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
2. 파라미터 외의 값에는 의존하지 않는다.
3. 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
4. 똑같은 파라미터로 호출된 Reducer 함수는 언제나 똑같은 결과 값을 반환한다.

Redux 기초

Redux에서 사용하는 가장 기초적인 용어는 Store, action, dispatch, reducer이 있다.

1. Store

상태가 들어있는 부분을 Store라고 한다.

하나의 프로젝트는 하나의 Store만 가질 수 있다.

2. Action

상태에 변화가 필요하다면, Action을 일으켜야 한다.

Action은 객체로 표현되며 **type필드를 반드시 가지고 있어야 한다.**

import { v4 } from "uuid";
import { Action } from "./types";

export const addTask = (content: string): Action => {
  return {
    type: "ADD_TASK",
    payload: {
      id: v4(),
      content,
      complete: false,
    },
  };
};

export const updateTask = (
  id: string,
  content: string,
  complete: boolean
): Action => {
  return {
    type: "UPDATE_TASK",
    payload: {
      id,
      content,
      complete,
    },
  };
};

export const removeTask = (id: string): Action => {
  return {
    type: "REMOVE_TASK",
    payload: {
      id,
      content: "",
      complete: false,
    },
  };
};

3. Dispatch

Store의 내장 함수 중 하나인 디스패치는 액션 객체를 넘겨줘 상태를 업데이트하는 유일한 방법이다.

즉 상태를 업데이트하기 위해서는 Store의 Dispatch함수를 이용해야 한다.

이벤트 트리거와 같다.

const dispatch = useDispatch();

dispatch(addTask(task)); // 이런 형식으로 사용한다.

4. Reducer

Reducer는 현재 상태와 액션 객체를 받아 필요하다면 새로운 상태를 리턴하는 함수이다.

이벤트 리스너라고 생각할 수 있다.

import { Action, Task } from "./types";

export const tasks = (state: Task[] = [], action: Action) => {
  switch (action.type) {
    case "ADD_TASK": {
      const newTask = action.payload;
      return [...state, newTask];
    }
    case "UPDATE_TASK": {
      const updatedTask = action.payload;
      return state.map((oldTask) =>
        oldTask.id === updatedTask.id ? updatedTask : oldTask
      );
    }
    case "REMOVE_TASK": {
      const removedTask = action.payload;
      return state.filter((task) => task.id !== removedTask.id);
    }
    default: {
      return state;
    }
  }
};

Redux-toolkit

실습에서 많은 라이브러리를 다뤘지만, 가장 중요해 보이는 공식 라이브러리 redux-toolkit에 대해 짚어보도록 하자.

Redux를 아무 라이브러리 없이 사용하게 되면, Type 정의 → action 함수 정의 → reducer 정의 후에야 하나의 Action이 생성된다.

이런 너무 복잡한 일련의 과정을 함축시켜줄 수 있는 라이브러리가 Redux-toolkit이다.

1. configureStore

configureStore을 사용하면 store를 만들어준다. 마치 createStore과 같다.

하지만 다른 점은 reducer 뿐만 아닌 middleware, devTools 사용 여부, 스토어의 초기 값 등을 같이 지정할 수 있다.

export const store = configureStore({
  reducer: rootReducer,
  middleware: [logger],
  devTools: true,
});

2. createSlice

createSlice를 사용하면 createAction, createReducer가 내부적으로 함께 사용된다.

아래와 같이 작성하면 slice 이름을 접두사로 Action Type이 자동으로 생성된다. (tasks/add)

export const tasks = createSlice({
  name: "tasks",
  initialState: [] as Task[],
  reducers: {
    add: {
      reducer: (state: Task[], action: PayloadAction<Task>) => {
        state.push(action.payload);
      },
      // prepare를 작성함으로써 리듀서가 실행되기 이전에 액션의 내용을 편집할 수 있다.
      prepare: (content: string) => ({
        payload: {
          id: v4(),
          content,
          complete: false,
        },
      }),
    },
    update: {
      reducer: (state: Task[], action: PayloadAction<Task>) => {
        const index = state.findIndex((task) => task.id === action.payload.id);
        state[index] = action.payload;
      },
      prepare: (id: string, content: string, complete: boolean) => ({
        payload: {
          id,
          content,
          complete,
        },
      }),
    },
    remove: {
      reducer: (state: Task[], action: PayloadAction<Pick<Task, "id">>) => {
        const index = state.findIndex((task) => task.id === action.payload.id);
        if (index !== -1) state.splice(index, 1);
      },
      prepare: (id: string) => ({
        payload: { id },
      }),
    },
  },
});

Redux를 사용한 실습을 하고 느낀 점은, 진입장벽이 매우 높다.

또한 다른 사용 예시를 찾아보는데, 사람마다 각자 다 다른 라이브러리를 사용한다..

자주 사용하면서 감을 익히는 수밖에 없다고 생각한다. 흠

---

출처

https://kyounghwan01.github.io/blog/React/redux/redux-basic/

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

프로그래머스