Redux 알아보기

Redux는 리액트 상태 관리 라이브러리로, 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리해 효율적으로 관리할 수 있게 해준다. 컴포넌트의 상태를 따로 한군데서 관리하기 때문에 코드의 유지보수도 용이해지고, 작업효율도 높아진다는 장점이 있다.

특히 React와 Redux를 함께 사용하면, Redux의 상태관리 전용 장소(store)에서 상태를 따로 관리하고, React에서는 UI 요소만 관리가 가능해진다. 우선은 이러한 Redux와 관련된 중요 개념들부터 알아보자.

출처 : https://medium.com/the-web-tub/managing-your-react-state-with-redux-affab72de4b1

Store

모든 상태들을 관리하는 중앙관리소 같은 곳이다. 형태는 그냥 아래처럼 JSON같이 생겼다. 스토어 안에는 현재 상태, 리듀서 등이 포함된다. 프로젝트에 리덕스를 적용하기 위해 스토어를 생성해야 하며, 한 프로젝트당 하나의 스토어만 가질 수 있다.

{
  items: [
      {id: 1, text: "iphone"},
      {id: 2, text: "macbook"},
  ],
  notification: [],
}

Action, Action Creator

컴포넌트는 (감히) 스토어의 state에 직접 접근할 수 없다. 반드시 Action을 통해 접근해야 한다.

Action이 발행되고 쓰이는 과정은 다음과 같다.

1) Action은 Store에 뭔가를 변화를 주고싶을 때 발행한다.

2) Store의 문지기(Reducer)이 Action의 발생을 감지하고 state를 업데이트한다.

Action 객체의 기본형태는 아래처럼 생겼는데 보통은 type에 들어가는 Action명을 따로 변수로 빼둔다. 하나의 객체로 표현되며, type필드는 필수로 가지고있어야한다. 이외의 값들은 자유롭게 지정해도 된다. Action creator은 이러한 액션객체를 만들어주는 함수이다.

// Action 객체
{
    type: "액션 종류",
    payload: "액션 실행에 필요한 데이터",
}

// Action Creator
function addValue(value) {
  return {
   type: 'ADD_VALUE',
   value
  }
}

Reducer

이전상태 + Action을 합쳐 ⇒ 새로운 상태를 만드는 역할을 한다. (합성곱) Store에 접근하기 위해 거쳐야하는, Store의 문지기 역할을 바로 이 리듀서가 한다. 정리하자면, 액션 발생시 → 리듀서가 1) 이전상태, 2) 액션객체를 파라미터로 받아온다. 그리고 이 두 값을 참고해 새로운 상태를 만들어 리턴해준다. 그림과 코드를 같이 살펴보자. 참고로 default는 초기상태를 정의해둔 것이다.

const reducer (state = initialState, action) => {
  switch(action.type) {
    case INCREASE:
      return {...state, value:state.value + 1};
    case DECREASE:
      return {...state, value:state.value - 1};
    default:
      return state;
  }
}

위의 코드를 그림으로 표현해본것 (old state가 action.type에 따라 다른 new state로 리턴되는 상황)

combineReducers

reducer가 많이질 경우 사용하는 함수인데, 말 그대로 여러개의 리듀서를 합쳐주는 역할을 한다.

import { combineReducers } from 'redux';
// (생략) 각 리듀서 정의
export default combineReducers({
  reducer1, reducer2
})

dispatch 함수

스토어 내장함수 중 하나로 액션을 실제로 발생시키는 역할을 한다. dispatch(action) 형태로 액션객체를 인자로 넣어 호출하면 되는데, 이 함수가 호출되면 → 스토어는 리듀서 함수를 실행시키고, 새로운 상태를 만들어준다.

connect 함수

React 컴포넌트는 바로 Redux와 연결되지 않기 때문에 react-redux가 제공하는 connect 함수를 사용해야 한다.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addValue } from './actions';

const Counter = ({ value, dispatchAddValue }) => (
    <div>
        Value: {value}
        <a href="#" onClick={e => dispatchAddValue(1)}>+1</a>
        <a href="#" onClick={e => dispatchAddValue(2)}>+2</a>
    </div>
);

export default connect(
    state => ({ value: state.value }),
    dispatch => ({ dispatchAddValue: amount => dispatch(addValue(amount)) })
)(Counter)


// 간단히 표현
//export default connect(
//    state => ({ value: state.value }),
//    {addValue}
//)(Counter)

Container

여러 컴포넌트가 모여있을 때 각 요소의 Component들을 각각 연결하면 복잡해지기 때문에 Container이라고 하는 부모 Component를 만들어 한번에 connect를 시켜주기도 한다.

요약

joooing