TIL 42: [React] 상태 관리

 오늘은 상태 관리 라이브러리 중 하나인 Redux를 사용해서 Sprint를 공부했습니다. 앞서 말했던 것처럼 상태 관리 라이브러리는 전역 데이터를 관리해주어 props drilling의 문제를 해결할 수 있게 해 주는데요! 어떻게 관리하고 그 문제를 해결할 수 있는지에 대해 알아볼 수 있었습니다!

 

 

Flux

아래 영상과 공식문서를 통해 Flux에 대해 공부할 수 있었습니다.

https://facebook.github.io/flux/docs/in-depth-overview/

In-Depth Overview | Flux

 

 

 

 

Flux는 페이스북에서 MVC의 단점을 보완하기 위해 개발한 아키텍처입니다.

MVC의 양방향 데이터 흐름으로 인해 발생하는 예측하기 어려운 버그들일 나타납니다. 그중 대표적인 예로 채팅 알림 버그인데요. 페이스북에 로그인했을 때, 아래 사진처럼 메시지 아이콘에 알림이 떠 있지만 아이콘을 클릭하면 아무런 메시지가 없는 버그가 생길 때가 있었습니다. 이 버그를 표면적으로 수정해서 얼마간은 괜찮았지만, 애플리케이션은 업데이트하면 알림 버그가 다시 나타났습니다. 페이스북에서는 이러한 문제를 해결하기 위해 단방향 데이터 흐름으로 Flux라는 근본적인 해결책을 냈습니다.

Flux의 장점으로는 아래와 같습니다.

• Improved data consistency
• Easier to pintpoint root of a bug
• More meaningful unit tests

 

 

 

 

 

 

Flux의 단방향 데이터 흐름은 아래 사진과 같이 진행됩니다. Action은 Dispatcher를 통해 Store로, Store에서 View로, View는 Action을 통해 다시 Dispatcher로 데이터가 흐르게 됩니다. 이러한 단방향 데이터 흐름은 데이터 변화를 훨씬 예측할 수 있게 되어 앞서 말한 문제를 해결할 수 있었습니다. 

 

 

 

Dispatcher

Flux에서 모든 데이터의 흐름을 관리하는 곳입니다. Action을 전달하는 메소드입니다. Action에서 새로운 action을 보내면 Store는 dispatcher를 통해 action을 받게 됩니다. 애플리케이션이 복잡해질수록 Dispatcher의 중요성은 커집니다. 데이터들 간의 의존성을 콜백 함수를 이용하여 MVC보다 예측 가능하게 관리할 수 있기 때문입니다.

Redux에서는 Reducer를 호출해 state 값을 바꾸는 역할을 합니다.

const state = useSelector(state => state.itemReducer);
// useSelector는 컴포넌트와 state를 연결하는 역할을 합니다. 
// 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있습니다.

const { items, cartItems } = state;
const dispatch = useDispatch();
// useDispatch()는 Action 객체를 Reducer로 전달해주는 메소드입니다. 
// Action이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트입니다.

 

Store

Dispatcher에 콜백 함수를 등록하면 Dispatcher로부터 메세지를 수신받을 수 있습니다. Store가 변경되면 변경된 사실을 View에 알리고, View는 새 상태로 업데이트하게 됩니다.

 

 

View

View는 화면에 새 상태로 업데이트해서 나타내고, View Controller의 역할도 수행합니다. Conroller-View는 자식 View로 데이터를 보내는 역할을 수행합니다.

 

 

Action

콜백 함수를 실행할 때 데이터가 담겨있는 객체가 인수로 전달되어야 합니다. 이 때 전달되는 객체를 Action이라고 합니다. 

즉, 어떤 액션을 취할 것인지 정의해놓은 객체입니다. 코드는 아래와 같이 이름이 적힌 type과 요청 기능인 payload로 구성하여 작성할 수 있습니다.

export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}