[Redux] Store, Reducer

본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다.

개인적으로 이해한 내용이 들어가있어 부정확한 내용이 적힐 수 있습니다. 지적 바랍니다.

 

npm install redux

 

Redux  왜 쓸까?

사실 RTK까지 강의를 듣고 나서도  Redux를 왜 쓰는지 어렴풋이는 알겠는데 정말 어렴풋이만 알았다.

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

라고 하는데 예측 가능한게 뭔데요? 몰?루 이러고 있으니까 당연히 이해가 안됐다.

그러다 새벽에 React 연습하다가 유튜브에서 괜찮은 영상을 봐서

가장 첫 글인 이 글에 가장 첫  부분, 즉 쓰는 이유를 알았어야 하는 타이밍인 이 곳에 이제야 정리해두려고 한다.

 

Redux를 쓰는 이유는 크게 2가지이다.

 

• props 문법을 쓰지 않고 다른 컴포넌트에 상태를 전달하기 위해서
• 상태를 예측 가능하게 관리하기 위해서

 

뭔 소린가 싶겠지만 일단 가보자. 우리는 React에서 이미 상태가 뭔지 배웠다. 

상태(State)란 Component 안에서 변하는 값 혹은 값을 저장하는 공간을 말한다.

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

그렇다. Redux는 이러한 상태를 저장해두는 창고이다.

 

아니 그러면 그냥 쓰면 되지 뭐하러 창고까지 만들어서 저장해요?

 

React는 Component들을 미리 만들어두고 이를 불러와서 html로 뿌려주는 형식으로 코딩한다.

즉, 쉽게 말해 html 덩어리를 만들어서 컴포넌트라고 묶어놓고 이를 갖다쓰면서(재사용하면서) 코딩하는 것이다.

그런데 Component가 다 똑같으면 복붙이지 재사용하는 의미가 없다.

그래서 Component에 속성을 줄 수 있게 하는 오브젝트 파라미터인 props을 쓴다.

그리고 이는 다시 말해 두 컴포넌트 간 상태 전송 방법으로 props가 쓰일 수 있다는 말이다.

 

 

잠깐 위의 이미지를 보자. A, B, C. D 컴포넌트가 다음과 같은 구조로 짜여있다.

A 컴포넌트가 가진 상태를 D 컴포넌트에 전달하려면 아까 말한대로 props를 사용하면 된다.

문제는 A 컴포넌트가 다이렉트로 D 컴포넌트에게 props를 던져주면서 상태를 전달할 수 없다는 것이다.

또, D 컴포넌트가 A 컴포넌트에 직접적으로 접근해서 상태를 가져올 수도 없다.

그래서 props를 통해서 A가 B로, B가 C로, C가 D로 전달해야 A의 상태를 D로 전달할 수 있는 것이다.

이 과정에서 불필요한 props의 사용이 일어나게 된다.

 

• props 문법을 쓰지 않고 다른 컴포넌트에 상태를 전달하기 위해서
• 상태를 예측 가능하게 관리하기 위해서

 

Redux를 쓰면 이런 불필요한 props의 사용 없이 직접적으로 접근이 가능해진다.

왜? 창고가 따로 있으니까. State는 창고에 보관되니 창고에서 꺼내오면 되는 것이다.

 

와! 창고 아시는구나!

와! 이제 알 것 같아요! 근데 예측 가능한 상태 컨테이너가 뭐에요? 그거 몰라서 이거 적는거잖아요.

이 예측 가능한 상태 컨테이너가 아까 봤던

 

• props 문법을 쓰지 않고 다른 컴포넌트에 상태를 전달하기 위해서
• 상태를 예측 가능하게 관리하기 위해서

 

와 연결된다.

 

우리는 이제 Redux로 props를 쓰지 않고 Component에서 State를 불러올 수 있게 되었다.

그런데 Component가 상태를 보기만 하면 좋을텐데

 

상태(State)란 Component 안에서 변하는 값 혹은 값을 저장하는 공간을 말한다.

 

Component는 상태를 수정하려한다.😂

Component에서 불려간 상태가 수정되다가 상태가 에러가 났다면?

Component를 하나하나 다 뒤져가면서 어디서 에러가 났는지 살펴봐야하는 것이다.

상태를 사용하는 컴포넌트가 1개라면 괜찮겠지만 100개라면? 1000개라면?

 

Redux는 창고 안에 상태를 수정할 수 있는 방법들을  "정의"해둔다.

더하기는 상태에 1을 더하는거고, 빼기는 빼는거고 이런 식으로 말이다.

그리고 Component는 상태를 직접 수정하는 것이 아닌 "Redux야. 더하기 해줘."와 같은 방법으로 상태를 수정한다.

 

즉, 상태는 Redux만이 수정할 수 있으며, Component는 값을 볼 순 있지만 수정하려면 Redux에 요청해야하는 것이다.

만약 에러가 난다면? 우리가 추측하는 원인은 창고에 적힌 방법 말고 없다. 즉, 예측 가능해지는 것이다.

 

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

 

이 말이 이 뜻이다. 아마도. 어쨌든 이러한 이유로 Redux를 사용한다.

덧붙여 Redux는 React 뿐만 아니라 Vanilla JS나 그 외 다양한 환경에서도 사용 가능하다.

그러나 상태를 관리한다는 점에서 상태가 핵심 개념인 React와 잘 맞기 때문에 React와 많이 쓰이는 것이다.

 

Store

import { createStore } from "redux";

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

const ADD = "ADD";
const MINUS = "MINUS";

const countModifier = (count = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1;
    case MINUS:
      return count - 1;
    default:
      return count;
  }
};

const onChange = () => {
  number.innerText = countStore.getState();
};

const countStore = createStore(countModifier);

countStore.subscribe(onChange);

add.addEventListener("click", () => countStore.dispatch({ type: ADD }));
minus.addEventListener("click", () => countStore.dispatch({ type: MINUS }));

 

Store란 data(State)를 넣는 곳이다.

그렇다면 State란 뭘까? State는 내 Application에서 바뀌는 data를 말한다.

 

createStore & Reducer

import { createStore } from "redux";

const reducer = () => {
	return "hello"
};

const countStore = createStore(reducer);

console.log(countStore.getState());

 

redux에서 createStore라는 함수를 통해 데이터를 저장할 Store를 만들어준다.

Store를 만들 때에 reducer라는 함수가 정의되어 createStore에 파라미터로 들어가야한다.

 

Reducer는 Store에 저장된 내 data를 motify하는 함수이다.

reducer가 return하는 값이 내 application의 data(Store가 저장하고 있는 State의 값)가 된다.

예를 들어 reducer가 "hello"라는 string을 return한다면 store에 저장된 data의 값은 "hello"가 되는 것이다.

 

오직 Reducer만이 Store가 저장하고 있는 값을 수정할 수 있다!

즉, redux에서는 data가 Store 한 곳에만 존재하게 되고 이 값은 Reducer로만 수정할 수 있게 되는 것이다.

 

Store 내부의 data는 getState() 함수를 이용하여 가져올 수 있다.

 

import { createStore } from "redux";

const countModifier = (state = 0) => {  //state가 없을 경우 0으로 초기화
  return state
};

const countStore = createStore(countModifier);

 

reducer는 현재의 state와 같이 불려지지만 state가 undefined되어있을 경우 초기화 하기 위해 

state = 0이라는 파라미터를 주었다.

 

 

Reference

React 입문자들이 알아야할 Redux 쉽게 설명(8분컷)) - 코딩애플