[React] Redux

또띠·2023년 9월 13일

React redux

React

목록 보기

2/17

그동안 리액트를 공부하면서 리덕스(Redux)에 대한 내용을 정리하지 않았는데 잘 이해를 못하기도 했고 너무 어려워서 정리를 멈추고 흐름을 이해하고 작성하고자 기다렸다.

이제서야 말할 수 있는! 리덕스가 무엇이고 왜 사용하는지, 어떻게 사용하는지 정리해 보려고 한다.

🔮 Redux 가 무엇인가?

리덕스는 가장 많이 사용하는 상태 관리 라이브러리이다.

리액트를 공부하면 자연스럽게 리덕스도 함께 공부하게 되는데 그렇다고 리액트만 사용하는 라이브러리가 아니다.
즉, 바닐라 자바스크립트부터 뷰, 앵귤러 등등 JS 기반의 라이브러리나 프레임워크에서도 사용할 수 있다.

🔮 Redux 그럼 왜 쓸까?

상태 관리를 효율적으로 하기 위해 사용한다.

useState로 생성된 state는 local state이라면 리덕스로 생성된 state는 global state로
어디서든 저장소(state)에 접근해서 관리하기 용이하다.

리덕스 아키택처

🔮 Redux 의 주요 개념들

액션 (action)

상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생한다. 이는 하나의 객체로 표현된다.
그리고 액션 객체에서는 type을 반드시 필요로 한다.

{
	type : 'ADDTODO'
 	data : {id: 1, content: '투두리스트'}
}

액션 함수

액션 객체를 만들어 주는 함수이다.
보통은 휴먼 에러를 방지하기 위해 함수의 형태로 만글어 관리하는 편이다.

const removeTodo = (payload) => {
  return {
    type: REMOVE_TODO,
    payload,
  };

리듀서 (reducer)

리듀셔는 변화를 일으키는 함수이다. 액션 발생 시 리듀서가 현재 상태와 전달 받은 액션 객체를 파라미터로 받아 온다. 그리고 두 값을 확인 후 새로운 상태로 만들어서 반환 해 준다.

// initialState (초기값)
const initialState = [
  {
    id: 1,
    title: "멋진 프론트엔드 개발자 되기",
    contents: "숨 참고 JS 딮 다이브 🌊",
    isDone: false,
  },
];

// reducers (리듀서)
const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    case REMOVE_TODO: 
      return state.filter((item) => item.id !== action.payload);
    case SWITCH_TODO: 
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

보통은 initialState(초기값)을 먼저 지정해 두고 사용한다.
switch문을 사용해서 위에서 만들어둔 액션객체의 변수명을 가져 온 후 각각의 실행시킬 내용을 작성한다.

참고로 리듀서안에서 일어나는 행위들은 불변성을 유지시켜줘야 한다!

불변성은 변하지 않는 것을 의미하는데 예들들어 push, pop 같은 메서드를 사용하면 기존의 배열에 변화를 끼친다.

하지만 이는 좋은 방법이 아니기에 기존의 내용에 변화를 일으키지 않기 위해 여기서는 스프레드(...) 문법을 사용하거나 Immer등을 사용해서 기존에 있는 내용을 그대로 두고 새롭게 만들어서 작업하도록 한다.
(이는 ES6에서 나온 map, filter 만 봐도 알 수 있다!)

스토어 (store)

스토어는 중앙 저장소 같은 느낌이다. 한 개의 프로젝트에서는 반드시 단 하나의 스토어를 가진다.
스토어 안에는 현재 어플리케이션의 상태(state)와 리듀서가 들어 있다.

보통은 config > configStore.js 로 관리하는 것 같다.

// 1. create rootReducer with reducers
const rootReducer = combineReducers({
  todos,
});

// 2. create store
const store = createStore(rootReducer);

디스패치 (dispatch)

디스패치는 스토어의 내장 함 수 중 하나로 '액션을 발생시키는 것'이다.

const dispatch = useDispatch();

const newTodo = {
      title,
      contents,
      isDone: false,
      id: uuidv4(),
    };

dispatch(addTodo(newTodo));

dispatch(액션함수(payload)) 형태로 사용된다.

🔮 Redux 의 세가지 규칙

1. 단일 스토어

하나의 어플리케이션에는 하나의 스토어가 들어갈 것.

2. 읽기 전용 상태

기존의 객체는 건들이지 않고 새로운 객체를 생성해 주어야 함.
(내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다)

3. 리듀서는 순수한 함수

리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
파라미터 외 값은 의존하지 않는다.
비동기 요청 작업은 미들웨어로 관리하기!

또띠

✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨