써야해서 배우는 Redux 1탄

최예준·2024년 2월 26일

redux 공부 상태관리 프론트엔드

공부

목록 보기

12/19

언젠간 만날줄 알았던 Redux...

React 를 뒤늦게 접한 나머지, 신문물인 Recoil 이라던지 Jotai 라던지 등 비교적 쉬운 상태관리 라이브러리들을 사용해왔따. (날먹)

하지만 이번에 이직한 곳은 상태관리를,
그저 Redux 로 사용하고 있었으니...

전부터 이론으로는 알고 있었지만 직접 사용해보지는 않아서,
이번에 직접 사용해본 경험을 토대로 정리문서를 작성해 보도록 하겠다.

Redux 넌 뭐니?

상태관리의 조상님

중앙 집중식 Storage와 상태 업데이트를 위한Reducer를 사용하고,
단방향 데이터 흐름을 따른다는 특징이 있음

Hook 사용안함.

redux 는 처음으로 만들어진 Javascript 상태관리 라이브러리 이다.
크게 아래와 같으 3가지 특성을 가지는데,

단일 스토어: 전역 상태를 하나의 스토어에 저장
불변성 유지: 상태는 읽기 전용이며, 액션을 통해서만 상태를 변경할 수 있음
순수 함수의 리듀서: 액션에 따라 상태를 변화시키는 순수 함수임

우선 디스패치, 액션, 리듀서, 스토어 등 생소한 용어들이 많을텐데 용어먼저 알아보고 가자.

액션(Action)

뭐에 쓰는 물건인가요?: 액션은 마치 쇼핑 목록 같은 것입니다. 우리가 슈퍼마켓에 가서 필요한 것들을 적어가는 것처럼, 애플리케이션에서도 "이런 일을 해주세요"라고 요청하는 목록을 만들어요.
예시: "커피 한 잔 추가해주세요" 라고 적힌 쪽지.
예시: { type: 'ADD_TODO', text: 'Learn Redux' }

액션 생성자(Action Creator)

뭐에 쓰는 물건인가요?: 액션 생성자는 액션(쇼핑 목록)을 만들어내는 요리사 같은 역할을 해요. 우리가 "커피 한 잔 주세요"라고 말하면, 그 말을 쪽지에 적어주는 거죠.
예시: "커피 한 잔 추가해주세요"라고 쪽지를 써주는 친절한 카페 직원.

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

디스패치(Dispatch)

뭐에 쓰는 물건인가요?: 디스패치는 우리가 쇼핑 목록(액션)을 가지고 슈퍼마켓(스토어)에 제출하는 과정입니다. "이것 좀 해주세요"라고 요청하는 거죠.
예시: 쇼핑 목록을 들고 계산대에 가서 "이것 좀 사고 싶어요"라고 말하는 것.

디스패치된 액션은 스토어에 의해 리듀서로 전달되며, 
  리듀서는 이 액션을 기반으로 상태를 업데이트합니다.

리듀서(Reducer)

뭐에 쓰는 물건인가요?: 리듀서는 슈퍼마켓에서 쇼핑 목록을 보고 실제로 물건을 장바구니에 담는 사람입니다. 우리가 원하는 것(액션)을 보고, 그에 맞게 상품을 준비해요.
예시: "커피 한 잔 추가해주세요"라는 쇼핑 목록을 보고, 커피 한 잔을 장바구니에 담는 과정.

function todoReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.text];
    default:
      return state;
  }
}

스토어(Store)

뭐에 쓰는 물건인가요?: 스토어는 모든 것이 이루어지는 슈퍼마켓입니다. 우리의 쇼핑 목록을 받아서, 장바구니에 담긴 물건들을 관리하고, 우리가 무엇을 샀는지 알려주죠.
예시: 우리가 물건을 사고 싶을 때 가는 슈퍼마켓. 어떤 물건이 있는지, 우리가 이미 산 물건은 무엇인지 등을 알려줍니다.

역할: 스토어는 애플리케이션의 상태를 저장하고, 
  액션을 디스패치하는 역할을 하며, 
  리듀서를 통해 상태가 업데이트될 때마다 리스너들에게 알립니다.
  
API: 스토어는 여러 API를 제공합니다. 

주요 API로는 
	getState()(현재 상태를 반환), 
    dispatch(action)(액션을 디스패치), 
    subscribe(listener)(상태 변경 시 호출될 리스너를 등록) 

등이 있습니다.