상태 관리 라이브러리 - Redux (3. 기본 기능)

적용하기 전에...

앞서 제작한 redux 세팅을 component에 적용하기 전에, 복습 및 숙지해야할 몇가지 중요한 개념이 있다.

• redux의 state은 Immutable 하다
  state를 변경할 때, react에서 하는 작업은 직접적으로 값을 '변경'하는 것이 아닌, 값을 '대체' 한다는 표현이 옳다. 이는 컴포넌트가 순수 함수 원칙을 유지할 수 있도록 도와준다. 다만, 외부 데이터를 가져와 사용하는 컴포넌트와 브라우저 이벤트에 의존하는 컴포넌트는 제외이다.
  
  

• react의 state는 단방향 데이터 흐름의 특징을 갖고 있다.

  1. 상태는 특정 시점의 앱 상태를 설명하고,
  2. UI는 해당 상태를 기반으로 렌더링되고,
  3. 사용자의 이벤트가 발생하면 상황에 따라 상태가 업데이트 되고,
  4. 새로운 상태에 따라 UI가 다시 랜더링되고, 이것이 반복된다.

• redux를 사용한다고 해서 모든 state를 꼭 redux에 위임할 필요는 없다
  특정 컴포넌트 내부에서만 사용하는 state가 있다면 굳이 해당 state를 redux store로 끌어올 필요는 없는 것이다. 각 state의 역할을 고려하고 컴포넌트 자체에서 사용할지 전역 state 사용할지를 결정하면 적절하게 state 관리를 할 수 있어야 한다.

• Redux DevTools와 같은 크롬 확장도구를 제공한다
  시간 경과에 따른 Redux 스토어의 상태 변경 기록을 보여주는 확장도구이다. 이를 사용하면 앱의 상태 변화를 쉽게 추적할 수 있다. 이 효과로, 전역적으로 state를 관리하는 store를 중앙에서 관리하기 때문에 디버깅을 배로 쉽게 할 수 있다.
  

• Redux Toolkit (RTK)
  redux 로직을 작성하는 데 권장되는 추가적인 접근 방식이 있다. redux에서 자체적으로 제공하는 추가적인 라이브러리인 immer / saga / thunk / reselect 등이 있다. 하지만 이들을 각각 사용하기에는 복잡성이 있다. 그래서 이들을 통합시켜주는 추가적인 라이브러리인 redux toolkit이라는 편의 기능이 등장했다. 여기에는 redux 앱을 빌드하는 데 필수적인 패키지와 기능이 포함되어 있다. Redux Toolkit을 통해 대부분의 redux작업을 단순화하고, 일반적인 실수를 방지하고, redux 애플리케이션을 더 쉽게 작성할 수 있도록 한다.

주요 hook

이제 힘들게 만든 redux store을 react 컴포넌트에서 활용할 차례이다. react에서 사용하는 법은 다음의 2가지 주요 hook을 통해 할 수 있다.

• useDispatch
  action을 dispatch하는 데 사용된다. dispatch는 action의 state와 payload를 변경하는 유일한 방법이다.

   const dispatch = useDispatch();
  
    const onClick = () => {
        dispatch(increment());			// increment() 는 숫자의 상태를 증가시키는 action이다.
    };

  
  

• useSelector
  Redux 상태를 가져와 값을 사용한다. 다른 component에서 redux의 state가 필요할 때 사용한다. Redux 상태 스토어에서 원하는 데이터를 선택하여 컴포넌트에 주입한다. 예를 들어, 도서 구매 사이트에서 장바구니 페이지에 로그인한 user의 id와 이름 정보가 필요하다면 아래와 같이 사용할 수 있다.

   const { userId, userName } = useSelector((state) => state.user);

적용 및 제작

숫자를 증가시키거나 감소시키는 counter 예제를 다음과 같이 간단하게 작성해 보았다.

import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const CounterComponent = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);

  return (
    <div>     
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
	  <br />
      <p> current number : {counter} </p>
    </div>
  );
};

즉, react와 redux의 state관리를 정리하면 다음과 같다.

유저 이벤트 발생 -> dispatch action -> store가 이전 state와 최신 action을 조합하여 new state 도출 -> 컴포넌트가 update된 state를 인지 -> 결과에 맞게 re-render