redux에 대하여...

<회고록>

오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다.

오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다.

구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명하겠다.

 

이 구조가 redux가 돌아가는 구조다.

나는 이 구조에서 각각의 역할 들을 간단하게 설명하고 각각이 어떻게 연결되는지에 대해서 설명하겠다.

 

예를 들어서 버튼을 누르면 숫자가 올라가고 내려가는 프로그램이 있다고 하자

이때 view는 버튼과 숫자를 보여주는 페이지를 의미한다.

import React from "react";

const Counter = ({ number, onIncrease, onDecrease }) => {
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
};

export default Counter;

그리고 버튼을 눌렀을 때 store에게 보내는 명령이 action인 거다.

const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

그리고 이 명령을 store에게 전달하는 역할이 dispatcher다

  const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);

그리고 store에서 받은 명령을 처리하는 로직이 reducer 이다.

const initialState = {
  number: 0,
};

const counter = handleActions(
  {
    [INCREASE]: (state, action) => ({ number: state.number + 1 }),
    [DECREASE]: (state, action) => ({ number: state.number - 1 }),
  },
  initialState
);

생각보다 엄청 간단하다. 그럼 이제 큰 틀 즉 폴더구조를 살펴보도록하겠다.

위 폴더 구조를 보면 components와 containers,modules를 나뉘는 것을 확인핤 수 있다.

이때 components를 프레젠테이션 컴포넌트, containers를 컨테이너 컴포넌트,modules를 store라고 부른다.

이렇게 폴더구조를 세세하게 나눈 이유는 각 역할을 명확하게 함으로써 유지보수와 코드의 가독성을 높이기 위해서다.

그럼 각각의 역할은 어떻게 될까?

   1. 프레젠테이션 컴포넌트의 역할은 view을 담당한다. 

   2. 컨테이너 컴포넌트의 역할은 store로 부터 데이터를 받거나 보내는 역할을 한다.

   3. moduless는 store로 상태를 관리하거나 저장하는 역할을 한다.

이처럼 FLUX와 MVVM패턴은 리덕스 ,context api를 하는데 굉장히 많이 이용되는 패턴이다.