[React] 11. Redux (소개)

Redux란?

전에 useReducer를 사용해서 예제를 만들었던게 기억나시나요?
그때 useReducer는 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 해줄 수 있다고 했습니다.
그 예제를 이해하셨다면 이번 Redux도 쉽게 이해 하실 수 있습니다.

리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.

추가적으로, 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줍니다. 이 미들웨어에 대해서는 나중에 다뤄보게 됩니다!
리덕스에서 사용하는 것들을 알아보도록하겠습니다.

액션 (Action)

useReducer를 사용 할때 컴포넌트에서 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트를 해줄 수 있다고 했습니다.
이 다양한 상황을 만들어 줄 수 있는데 액션입니다.
액션은 객체로써 type필드를 작성하여, 해당 type필드로 다양한 상황에 따라 다양한 상태를 줄 수 있는겁니다.
액션 객체는 다양한 상황을 주고 싶으면 type필드는 필수로 가져야하며, 그외의 값들은 추가로 넣어줘도 됩니다.
전에 만들었던 Count.js 예제를 살펴보도록하겠습니다.

import React, { useEffect, useReducer } from "react";
function eventReducer(state, action) {  // state : 기존 state값, action : dispatch 인자값
    // action.type 에 따라 다른 작업 수행
    switch (action.type) {
      case 'ADD':
        return { count: state.count + 1 };
      case 'MINUS':
        return { count: state.count - 1 };
      default:
        // 아무것도 해당되지 않을 때 기존 상태 반환
        return state;
    }
  }
export const Count = () => {
  //useReducer를 사용
  const [state, dispatch] = useReducer(eventReducer, { count: 0 });
  const add = () => {dispatch({type : 'ADD'})}
  const min = () => {dispatch({type : 'MINUS'})}
  useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  });
  return (
    <div>
      <p>Current COUNT : {state.count}</p>
  	  <button onClick={add}>+</button>
      <button onClick={min}>-</button>
    </div>
  )
}
export default Count;

Count.js 파일을 보시면

const add = () => {dispatch({type : 'ADD'})}
const min = () => {dispatch({type : 'MINUS'})}

이부분이 있습니다.
add, min이라는 함수에서 dispatch()함수를 호출을 했는데 파라미터 값인 {type : 'ADD'}가 Action입니다.
add()함수를 좀더 편하게 바꾸도록하겠습니다.

  const add = () => {
  	let action = {type : 'ADD'} // action
  	dispatch(action);
  }

스토어 (Store)

리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다. 스토어 안에는, state와, reducer 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.
Redux를 사용하여 store를 만들 때는
var store = Redux.createStore(reducer);를 사용하여 만듭니다.
Count.js파일에서 const [state, dispatch] = useReducer(eventReducer, { count: 0 });하고 같은 역할을 한다고 생각 하시면 됩니다.

디스패치 (Dispatch)

디스패치는 스토어의 내장함수 중 하나로 액션을 발생시키는 것이라고 이해하시면 됩니다.
액션을 발생시킨다는 말은 액션을 인자로 넘겨 Reducer() 함수를 실행하여 액션 값을 받아 다양한 상태를 변경을 해줍니다.
아래 코드를 보기 바랍니다.

  //add()함수가 액션 생성함수입니다.
  const add = () => {
  	let action = {type : 'ADD'} // action
  	dispatch(action); // dispatch 액션발생시킴
  }

리듀서 (Reducer)

리듀서는 2개의 인자값을 받아와 state값에 변화를 일으키는 함수입니다.
리듀서는 현재의 state와 전달받은 action을 참고하여 새로운 state를 return해줍니다.
Counter.js파일을 보시면 eventReducer입니다.

  function eventReducer(state, action) {  // state : 기존 state값, action : dispatch 인자값
    // action.type 에 따라 다른 작업 수행
    switch (action.type) {
      case 'ADD':
        return { count: state.count + 1 };
      case 'MINUS':
        return { count: state.count - 1 };
      default:
        // 아무것도 해당되지 않을 때 기존 상태 반환
        return state;
    }
  }

구독 (subscribe)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.
즉 dispatch되어 state가 변경되었을 때 리랜더링 해준다는 의미입니다.

다음 시간에는 Redux를 사용하지 않은 예제와 사용한 예제를 보도록하겠습니다.