[JS] 리덕스(redux)가 무엇인가?

리덕스란?

리덕스는 프론트엔드 상태관리 라이브러리이다.

상태관리는 상태를 영어로 직역하면 state이다 즉, 리액트에서 사용하는 state를 관리하는 라이브러리이다.

하지만 꼭 리액트에만 치우쳐져 있지않고 순수한 자바스크립트에서도 사용할 수 있다는 점은 유의하자.

탄생계기

웹에 담는 데이터들이 방대해지고 관리해야할 상태(state)들이 방대해지면서 복잡하고 관리가 어려워 관리할 라이브러리가 자연스럽게 생겨났다.

기존에 컴포넌트 A 컴포넌트 D에 접근하려면 A -> B -> C -> D 접근해야했다. 하지만 리덕스를 사용하면  A -> Store -> D 로 접근할 수 있게 되어 좀 더 효율적이게 변하였다

즉, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있는 방법을 고안해낸 것이다.

사용방법

npm install redux redux-redux --save

import {createStore} from 'redux';

let store = createStore(()=>{ return [{id : 0, name : '신발', quan : 2}]  })

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

그리고 index.js에서 Provider를 import 해주고 <APP />을 Provider로 감싸준다.

createStore 함수를 import 한뒤 상태를 저장한 이후에 Provider store 속성으로 위에서 정의한 store를 추가해준다.

주의할 점은 store는 단 한개만 존재해야한다는 점이다.

액션 ( Action )

state 에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체이다.(Redux Thunk 등 리덕스 라이브러리를 사용한다면 객체가 아닌 함수도 사용이 가능해진다.)

단어 그대로 어떤 동작에 대해 선언되어진 객체인 셈.

액션은 반드시 type 필드를 가지고 있어야 하며, 그 외의 값은 상황에 따라 넣어줄 수 있다.

// action 1
{
    type: "NUMBER_COUNT"
},

// action 2
{
    type: "CHANGE_INPUT",
    text: "안녕하세요
}

액션 생성 함수 ( Action Creator )

이전에 설명한 Action 이 동작에 대해 선언된 객체라면,

Action Creator는 Action 을 생성해 실제로 객체로 만들어주는 함수이다.

위 Action 중 //action 1 예제의 Action 은 아래와 같은 Action Creator 를 통해 만들어 진다.

보통 dispatch로 parameter를 담아서 데이터를 처리할때 사용한다.

export function numberCount(data) {
    return {
        type: "NUMBER_COUNT",
        number: data
    }
}

리듀서 ( Reducer )

State에 변화를 일으키는 함수이다. 쉽게 말해 위에 만들어진 Action 등의 일거리를 직접 수행하는 놈이다.

리듀서는 현재의 State와 Action을 인자로 받아 Store(스토어) 에 접근해 Action에 맞춰 State를 변경한다.

function reducer(state, action) {
    switch(action.type) {
        case 'NUMBER_COUNT':
            return state + 1;
        case 'CHANGE_INPUT':
            return state;
        default:
            return state;
    }
}

디스패치 ( dispatch )

디스패치는 스토어의 내장 함수 중 하나로 리듀서에게 Action을 발생하라고 시키는 것이라고 이해하면 된다.

dispatch 함수는 dispatch(action) 이런 식으로 Action 을 인자로 넘긴다.

이렇게 호출을 하면 스토어가 리듀서 함수를 실행해 리듀서 함수가 넘긴 액션을 처리해 새로운 상태를 만들어 준다.

 

action에 해당 상태(State)가 어떻게 변경되야 하는지 지정하고, Reducer로 action에 변화를 어떻게 일으키는지 정의를 해둔고 디스패치(dispatch)로 리듀서를 실행시킨다. 

리덕스의 세가지 규칙

1. 하나의 애플리케이션에는 하나의 Store만 존재해야 한다.
2. 상태는 읽기전용(수정불가)이다.
3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.

순수한 함수?

• 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다.
• 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 한다.

리덕스 언제 써야 할까?

리덕스를 어떤 프로젝트에 써야 할지 말지 고민 할 때에는 다음 사항들을 고려하자.

1. 프로젝트의 규모가 큰가?
   • Yes: 리덕스
   • No: Context API
2. 비동기 작업을 자주 하게 되는가?
   • Yes: 리덕스
   • No: Context API
3. 리덕스를 배워보니까 사용하는게 편한가?
   • Yes: 리덕스
   • No: Context API 또는 MobX

여기서 3번, 매우 중요하다. 아무리 리덕스가 좋은 라이브러리라 해도 취향에 맞지 않고 어렵게만 느껴지고 맘에 들지 않는다면 사용하지 않는 것이 좋다.