오늘 한 일을 기록하자/TIL

210223_TIL... Redux

히굳히긋 2021. 2. 22. 15:04

오늘 한 일

  • Redux 란?
  • Redux 가 필요한 이유
  • action, reducer, store 개념과 사용법

 

Redux(리덕스) 란?

 

Redux 는 Javascript app 을 예측가능한 state container 이다.

다시말해, Redux 는 애플리케이션에서 정교한 상태 관리를 구현하는 데 도움이되는 라이브러리 중 하나이다.

 

 

 

Redux 가 필요한 이유

 

 

React 로 프로젝트를 진행하면 각각의 Component 는 local state 를 가지게 되고, 어플리케이션은 global state 를 가지게 된다.

 

1) local state 의 전달이 어렵다

React 의 경우 props 를 이용해 전달하기 방식이기 때문에 프로젝트의 규모가 커지고, Component 의 수가 늘어나게 된다면 state 를 관리하기가 어렵다. 재일 밑에 있는 자식 Component 가 어떤 state 를 받는 과정에서, 중간에 props 로 data 를 전달하기 위해 필요없는 data 의 흐름이 생기게 된다. 또한, 해당 Component 에서 버그나 문제가 생길 경우, 중간에 끼인 모든 Component 에 가서 일일이 문제점을 찾아봐야 한다(디버깅과 유지보수가 어렵다).

 

2) global state 유지가 어렵다

대부분의 어플리케이션에서는 유저의 로그인 기능이 구현되어야 한다. 유저의 인증정보를 모든 Component 에 props 로 계속 전달해야 하는데, 훨씬 복잡한 절차를 거치게 될 것이다. 이렇게 React 만으로 프로젝트를 진행하면 global state 를 모든 Component 에 유지하기 어렵다.

 

 

 

3) 하지만 Redux 는 이런 React 의 상태관리 단점을 보완하는데 최적화 됐다

하나의 store 를 통해 모든 state 를 저장, 유지할 수 있게 되며, 원하는 Component 에서 직접 data 를 조회하고 업데이트를 할 수 있다.

 

 

 

Redux 의 기본 개념과 사용법

 

1) Action

어플리케이션의 store, 즉 저장소로 data 를 보내는 방법이다. view 에서 정의되어 있는 액션을 호출하면 action creators(액션 생성자)는 어플리케이션의 state(상태)를 변경해 준다.

 

consta ADD_TODO = 'ADD_TODO'  // action 의 type 을 정의

 

action 의 type 은 문자열 상수로 정의된다. 정의된 action type 은 action creators(액션 생성자)를 통해 사용된다.

 

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

 

 

2) Reducer

action 을 통해 어떤 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다.

 

function todoApp(state = initialState, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return Object.assign({}, state, {
      visibilityFilter: action.filter
    });
    default:
      return state
  }
}

 

reducer 함수에서는 action 의 type 에 따라 변화된 state 를 반환하게 된다.

 

 

3) Store

'무엇이 일어날지' 를 나타내는 action 과 action 에 따라 상태를 수정하는 reducer 를 저장하는 어플리케이션에 있는 단 하나의 객체이다.

 

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

 

이처럼 store 을 생성하고 reducer 을 연결하여 어플리케이션에 연결하게 된다.

 

 

 

Reference