전역 상태 관리 Redux

Redux의 사용법을 알아보기 이전에 Redux를 사용하는 이유를 알아봅니다.

Data Binding

데이터 바인딩은 뷰(화면)과 모델(데이터)를 연결하는 것을 말합니다.

바닐라 JS는 데이터 바인딩이 될까요? 간단한 카운터를 구현해봅시다.

const counter = document.querySelector('#counter'); // view
const plus = document.querySelector('#plus');
const minus = document.querySelector('#minus');

let count = 0;

const increase = () => {
  count++;
}

const decrease = () => {
  count--;
}

plus.addEventListener('click', increase);
minus.addEventListener('click', decrease);

버튼 클릭에 따라 데이터 count는 변화하지만, 이는 데이터만 변화할 뿐 화면에 적용되지 않습니다.

화면에 적용되도록 별도의 update 함수가 필요합니다.
이처럼 자바스크립트는 데이터 바인딩이 되지 않았습니다.

React는 어떨까요?

function Component(props) {
  const [count, setCount] = setState(0);
  
  return (
    <div>{count}</div>
  )
}

상태를 변경하면, 변경된 JSX가 렌더링됩니다.

데이터가 화면과 바인딩되어 있습니다.

단방향, 양방향

데이터 바인딩이라고 모두 같지는 않습니다.

React의 데이터 바인딩은 단방향입니다. 흐름은 오로지 데이터에서 뷰로 갑니다.

const [input,setInput] = useState('');

return (
  <input value={input} onChange={e => setInput(e.target.value)}/>
)

input을 쓸 때도, 입력에 따라 데이터가 변경되는게 아니라,
입력 값으로 데이터를 변경시키고, 변경된 데이터가 뷰로 보여지게 하는 이유입니다.

vue나 angular같은 프레임워크는 양방향 바인딩을 지원합니다.
뷰에서 변경하면 데이터가 변경되는 흐름도 가집니다.

Flux 패턴

MVC 패턴은 이전부터 많이 사용되어 왔습니다.
동작(Action)에 대해 Controller에서 처리하여 변경한 Model을 View에게 보냅니다.

하지만, 한 모델을 여러 데이터에서 사용하거나, 한 뷰에서 여러 모델을 사용하는 일이
개발 규모가 커질수록 많이 발생합니다.

모델과 뷰를 연결하는 복잡성이 증가하고, 복잡한 데이터 흐름을 만들어 결과를 예측하기 힘들어집니다.

Flux패턴은 Facebook에서 소개한 아키텍쳐입니다.
MVC 패턴 대신 개발이 오래되고, 커져도 유지 보수가 쉽도록 하는 패턴을 제시했습니다.

Flux패턴은 단방향 데이터 흐름이 핵심입니다.

사용자에 의해 Action이 발행되면, Action에 영향이 있는 모든 View가 갱신됩니다.
때문에, 어떤 일이 일어나는지 예상 가능합니다. (복잡해지지 않는다)

두 패턴에 대한 경험이 적어, 차이나 장점을 알기 힘들지만
단방향이며, Model이 변경되면 Model을 사용하는 view가 갱신된다는 점이 중요한 것 같습니다.

리덕스는 Flux 패턴을 근본으로한 라이브러리입니다.

Redux

왜 리덕스를 사용하는가?

리덕스는 상태를 관리하기 위한 라이브러리입니다.

위에서 알아보았듯 Vanilla JS는 데이터 바인딩이 되어있지 않습니다.

리덕스를 사용하면, 직접 업데이트 하지 않아도
변경을 구독하여 모든 View가 변경되도록 할 수 있습니다.

---

어떤 앱이라도 전역적으로 사용할 데이터가 필요합니다.

React는 단순 UI라이브러리이기 때문에 데이터 관리를 고려하지 않습니다.

하나의 데이터가 여러 컴포넌트에서 필요하거나,
멀리있는 자식의 컴포넌트에 데이터를 전달하려면, props를 통해 여러번 전달해야합니다.

리덕스를 사용하면, 그림처럼 전역에서 사용하는 데이터에 대한 관리를 효율적으로 할 수 있습니다.

리덕스를 사용하기 전에 React의 state를 여러 곳에서 사용한다면, props를 옮기기 위해
다음과 같은 코드를 많이 봤을 것 입니다.

Redux Intro

• Store : state가 관리되는 컨테이너(저장소)입니다.
• Action : state의 변화를 일으키는 행동 정보입니다. Pure Object입니다.
• Dispatcher : Action을 보냅니다. 이를 통해 state를 업데이트 시킵니다.
• View : state 변경에 따라 화면에 반영됩니다.

원칙

• 하나의 앱에는 store가 하나여야합니다.
  즉, 모든 상태값이 하나의 객체로 표현되어야 합니다.

• state값은 읽기전용입니다.
  React의 state처럼 직접 값을 수정할 수 없습니다.
  위에 흐름대로 state를 변경해야 View에 원하는 대로 반영됩니다.

• state는 순수 함수의 의해서만 변경되어야 합니다.
  순수 함수란 같은 input일 때는 항상 같은 output을 반환하는 함수를 말합니다.
  이 state를 변경시키는 함수를 reducer라고 하며, reducer만 state를 변경시켜야 합니다. (읽기 전용)