[TIL] React 관련

오늘 배운 것

React 관련

상태 관리 Library 비교

• 상태 관리 Library란?
  여러개의 부모 컴포넌트와 자식 컴포넌트로 이루어진 React에서는 각 컴포넌트 안에서 useState Hook으로 로컬적인 상태를 관리할 수 있고, 이를 자식 컴포넌트에서 사용하고 싶으면 props로 넘겨주는 방식으로 사용한다.
  하지만, 규모가 점점 커지고, 중간에 쓰지 않는 컴포넌트에서는 값을 전달만 해주는 비효율이 발생할 수 있다.
  따라서, 전역으로 상태를 관리해주는 도구를 이용하여 같이 사용된다.

상태관리 라이브러리들의 종류
1. Redux
2. MobX
3. Context API
4. Recoil
등등

1. Redux
   Redux는 Javascript 앱의 데이터들을 전역으로 관리하도록 해주는 라이브러리이다.
   때문에, React안에 종속된 라이브러리가 아니며, React-Redux라는 라이브러리를 추가해서 React와 Redux 이 두 라이브러리를 사용할 수 있도록 한다.(useDispatch, useSelector ..)

물론 안하고도 할 수 있지?(mapDispatchToProps...)

• 특징
  store라는 전역 상태를 담아두는 곳이 있는데, 때문에 아무나 이를 건드려서는 안된다.
  컴포넌트가 직접 store에 접근해서는 안되며, state를 변경하고 싶을 때는 action을 dispatch 하여 reducer가 store에서 state를 변경해주어서 그 변경된 state를 컴포넌트가 구독하는 식으로 해야한다. (읽기 전용)

또한, 오직 순수함수에 의해서만 state를 변경해야 한다.
reducer에서 새로운 상태값을 return할 때 랜덤을 쓴다든지, Date 객체를 쓴다든지, 비동기 작업 등의 순수함수가 아닌 로직을 작성하면 안된다.

• 미들웨어
  reducer가 action을 처리해서 state를 변경하기 전에 실행되게 하는 함수
  방금처럼 비동기 작업 또한, reducer에서 직접하면 안된다.!! 그러면,, 서버에서 데이터를 받아오거나 저장할 때 또한 reducer에서 직접하면 안된다는 것이다.
  그렇다면 어느 서버에다가 데이터를 저장하나유..?

미들웨어를 이용해서 비동기 작업을 실행하고 그 다음에 action dispatching을 해주어 reducer가 state를 변경할 수 있도록 해주어야한다.

대표적인 미들웨어로서 redux-logger, redux-thunk, redux-saga가 있다.

페이스북에서 고안한 디자인 패턴인 flux로 부터 컨셉이 시작되었다.

• 장점
  react에 종속된 라이브러리가 아니므로 다른 js 라이브러리/프레임워크 환경에서도 사용할 수 있다
  미들웨어를 추가해서 구성하여 비동기 처리를 할 수 있다.
  redux devtool extension(브라우저 익스텐션)이 있어 디버깅이 용이하다.
  전역 상태 관리 외에도 로컬 스토리지 상태저장, 버그 리포트 첨부 기능 등을 제공한다.
  단일 store에 state를 수정가능한 객체가 reducer뿐이기 때문에 디버깅이 용이하다.

• 단점
  일단 라이브러리를 추가하는 것이므로 사용하는 dependency가 하나 늘은 것이다. (라이브러리 의존성 증가)
  미들웨어 사용 개념을 따로 익혀야함(reducer에서 그냥 처리하면 안되므로)
  context api에 비해 작성하는 코드가 많고 상대적으로 복잡하다.

2. mobX
   redux와 함께 자주 사용되는 상태 관리 라이브러리
   기본적으로 mobX는 클래스형 컴포넌트를 기준으로 맞추어져 있다.
   Hook을 함께 사용하려면(함수형으로 사용하려면) mobx-react v6, mobx-react-lite를 사용해야한다.

State
Observable State로 관찰 받고 있는 데이터이다. Mobx에서는 해당 State가 관찰하고 있다가 변화가 일어나면 Reactions과 Derivations를 발생시킨다.

Derivations(Computed values)
기존의 상태가 변화에 따라 계산된(파생된) 값을 의미한다.

Reactions
Observable State의 변화에 따른 부가적인 변화를 의미하고 값이 바뀜에 따라 해야할 일을 정하는 것이다. Derivation과는 달리 값을 생성하지는 않고, 대체로 I/O와 관련된 작업을 하고, DOM업데이트와 네트워크 요청 등에 관여한다.

Action
상태를 변경시키는 모든 것을 의미한다. Mobx에서는 모든 사용자의 액션으로 발생하는 상태 변화들이 전부 Derivations와 Reactions로 처리되도록 한다.

• 특징
  store를 여러 개 가지고 있다.
  데코레이터로 간략하게 코드 작성가능
  객체지향적
  상대적으로 쉬운 설계
  redux와는 달리 observer를 통해 변경사항을 자동으로 추적한다.
  단일 store 이기 때문에 state 객체의 depth가 깊어질수록 번거롭고 관리하기 어려워진다.(=>immutable.js 라이브러리 등을 사용할 수 있지만 그래도 번거로움)

• 장점
  설계가 쉽고 간단하다.
  예제)

• mobX store

import {observable} from 'mobx';
 
class CounterStore {
  @observable counter = 0;
 
  increment() { this.counter++; }
 
  decrement() { this.counter--; }
}
 
export default new CounterStore();

• 컴포넌트에서 mobX Store 사용

import React from 'react';
import {observer} from 'mobx-react';
import store from './store.js';
 
const Counter = () => (
  <div>
    <button onClick={() => store.increment()}>+1</button>
    <span>{store.counter}</span>
    <button onClick={() => store.decrement()}>-1</button>
  </div>
);
 
export default observer(Counter);

redux에서 처럼 컴포넌트와 state를 연결하는 일련의 작업(mapDispatchToProps, mapStateToProps / react-redux의 hook을 이용한 작업 등)을 해주지 않고 이렇게 간단하게 구현할 수 있다.
redux에서 처럼 State의 불변성 유지를 위해 노력하지 않아도 된다.

• 단점
  redux와는 달리 상태 변경이 가능하므로 위험할 수 있다.
  (Mobx State tree)를 사용하면 정확한 데이터 관리와 state 불변성을 더해 줄 수 있다.

3. Context API
   react 에 내장되어 있는 hook이므로 react에서만 사용할 수 있다.
   전역 상태 관리 기능으로만 사용할 수 있다. (redux에서처럼 미들웨어, 다른 기능들은 없음)
   저장소가 여러개 존재할 수 있다.

상태 저장소인 context, 전역 상태를 제공하는 Provider, 전역 상태를 받아 사용하는 Consumer로 구성되어 있다.

사실 redux가 context api를 가지고 만든 라이브러리이다.

• 장점
  추가 dependency 없이 전역 상태를 관리할 수 있다.

• 단점
  상태가 여러 개이면 Provider를 중첩해서 내려줘야 한다.
  state와 dispatch가 변할 때 마다, Provider를 구독하고 있는 모든 컴포넌트들이 리렌더링된다.
  대부분의 대규모 서비스에서는 redux 혹은 mobx 전역 상태 라이브러리를 사용한다.

[참고 및 출처]

https://velog.io/@mementomori/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Tool-%EC%82%AC%EC%9A%A9-%EB%B9%84%EA%B5%90-Redux-VS-MobX-VS-Context-API
https://velopert.com/3528
https://egg-programmer.tistory.com/281
https://velog.io/@cada/React-Redux-vs-Context-API#context
https://lannex.github.io/blog/2020/redux-mobx/
https://boxfoxs.tistory.com/383
https://ykss.netlify.app/react/redux_mobx_recoil/