context api, redux, mobx, swr

wony·2022년 4월 11일

context api

우리가 여러 페이지를 만들수록 각각의 페이지에서 state의 갯수가 늘어 헷갈리는 경우가 종종 발생한다
context api 방식을 사용하면 가장 상위의 부모폴더에서 선언한 state를 props를 사용하지않고 어떤 폴더에서도 사용이 가능하다

전에는 useContext를 사용했는데 문제점이 발생해서 라이브러리가 등장했다
그 라이브러리 역시 context-api로 만들어졌는데
그것이 바로 recoil이다
recoil을 이용한 식

index 폴더
import { useEffect } from "react";
import GlobalStateContainer from "../../src/components/units/board/21-global-state/BoardWrite.container";
import { useRecoilState } from "recoil";

import { isEditState } from "../../src/commons/store/index";
export default function GlobalStatePage() {
  const [isEdit, setIsEdit] = useRecoilState(isEditState);

  useEffect(() => {
    setIsEdit(true);
  }, []);
  return <GlobalStateContainer />;
}

컨테이너 폴더
import GlobalStatePresenter from "./BoardWrite.presenter";

export default function GlobalStateContainer() {
  return <GlobalStatePresenter />;
}

프레젠터 폴더

import { useRecoilState } from "recoil";
import { isEditState } from "../../../../commons/store/index";

export default function GlobalStatePresenter() {
  const [isEdit, setIsEdit] = useRecoilState(isEditState);

  return <div>{isEdit ? "수정하기" : "등록하기"}</div>;
}

index 폴더에서 선언한 것을 props 없이 globalstate를 이용해 사용한다

redux

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. State is read-only

리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

변경은 순수함수로만 가능하다.
리듀서와 연관되는 개념이다.
Store(스토어) – Action(액션) – Reducer(리듀서)

Store (스토어)

tore(스토어)는 상태가 관리되는 오직 하나의 공간이다.

Action (액션)

Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다.
Action(액션)은 자바스크립트 객체 형식으로 되어있다.

Reducer (리듀서)

Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니다.
Action(액션)을 Reducer(리듀서)에 전달해야한다.
Reducer(리듀서)가 주문을 보고 Store(스토어)의 상태를 업데이트하는 것이다.
Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.

mobx

reduce와는 비슷하지만 다른 상태 라이브러리입니다.
모든 상태변화가 일어나는 부분을 자동으로 추적해주는 역할을 합니다

React에 종속적인 라이브러리가 아님
아키텍처나 상태 컨테이너가 아닌 라이브러리
redux와 다르게 store에 제한이 없음
또한 redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체
observable을 기본적으로 사용하고 있음
Mobx는 절대적으로 필요한 경우에만 state 변경
Typescript를 기반으로 만들어짐