[React] 전역 상태 관리 맛보기

상태(state)란 UI에 반영하기 위해 유지해야할 값이다. 리액트에서는 컴포넌트에 저장한 데이터(상태)가 변경되면 그에 따라 UI가 자동으로 갱신된다. 따라서 리액트를 사용하면서 상태값을 효율적으로 관리하고 상태값에 따라 화면이 불필요하게 업데이트되지 않도록 주의해야 한다.

 

 

상태는 두가지로 구분할 수 있는데 지역상태와 전역상태이다. 지역상태의 경우 useState같이 컴포넌트 내에서 훅을 사용하는 것이다. 위 그림처럼 리액트는 단방향의 특성을 지니기 때문에 상위 컴포넌트로 상태를 전달할 수 없고, props로 하위 컴포넌트로 전달할 수 있다. 전역상태는 어떤 흐름에 얽메이지 않고 전역에서 사용가능한 상태를 말한다.

 

하나의 상태를 여러 곳에서 사용하기 위해서 어떻게든 상위의 컴포넌트에서 props로 전달해서 사용할 수 있지만 props의 전달이 많아질수록 코드를 읽을 때 해당 prop을 추적하기 힘들어지고 그에 따라 유지보수도 더욱 어려워지기 때문에 전역 상태 관리를 할 필요가 있다.

 

 

 

🌏 전역 상태 관리 도구

📘 Context API

전역 상태를 공유할 수 있도록 리액트에서 만들었다. 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 값을 공유하도록 할 수 있다.

 

Context API를 사용하기 위해서는 Context, Provider, Consumer 세 가지를 숙지해야 한다.

Context
전역 상태를 저장하는 역할
Context 내부에 Provider와 Consumer가 정의되어있고, Consumer는 Context를 통해서 상태에 접근이 가능하다. 

Provider
전역 상태를 제공하는 역할
Context에 상태를 제공해서 다른 컴포넌트가 상태에 접근할 수 있도록 도와준다. 제공된 상태에 접근하기 위해서는 Provider 하위에 컴포넌트가 포함되어있어야한다. 보통 모든 컴포넌트에 접근해야하는 상태를 제공하기 위해서는 루트 컴포넌트에서 Provider를 정의한다.

Consumer
제공받은 전역 상태를 받아서 사용하는 역할
Context는 Consumer 사이에 있는 첫 객체를 Context에 인자로 전달하기 때문에, 바로 JSX를 작성하면 안되고, 빈 객체를 작성하고나서 JSX를 작성해야한다.

 

 

const MyContext = React.createContext(defaultValue);
// defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값

const [value, setValue] = useState(초기값)

return (
  <MyContext.Provider value={{value, setValue}}>
  	<하위 컴포넌트 />
    ...
  </MyContext>
)

return(
  <ThemeContext.Consumer>
    {value => <span>{value}</span>}
  </ThemeContext.Consumer>
)

 

useContext hook을 사용하면 다음과 같이 사용할 수 있다.

const {value, setValue} = useContext(MyContext);

return (
  <div>
    <span>{value}</span>
  </div>
);

 

😀 장점

• React에서 기본적으로 제공하기 때문에 별도 설치 필요하지 않다.

🥲 단점

• 컨텍스트가 둘러싼 모든 컴포넌트가 리랜더링된다. (memo 사용으로 방지 가능)

 

📕 Redux

Flux 패턴을 적용한 상태 관리 라이브러리

 

Store 에 상태들을 저장하고, 해당 어떠한 변화가 필요할 때 Action 을 Dispatch 하여 Reducer 에서 이를 받아 정해놓은 흐름으로 상태를 변화시키는 방식

Redux의 3원칙

1. 애플리케이션의 모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장됩니다.
2. 상태는 불변(읽기 전용) 데이터 이며, 오직 액션 만이 상태 교체를 요청 할 수 있습니다.
3. 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 순수 리듀서를 작성해야 합니다.

 

Store
전역상태를 저장한다.
자바스크립트 객체 형태로 저장되어 있으며, 오직 Reducer를 통해서만 접근할 수 있다. Store는 1개만 존재할 수 있다. 
 
Action
Reducer에게 보내는 Store에 대한 행동을 정의한다.
Action을 Reducer에게 전달하기 위해서는 dispatch 메소드를 사용해야한다. dispatch는 Store의 내장 함수 중 하나로 액션 객체를 넘겨줘서 상태를 업데이트한다. 이벤트를 일어나게하는 이벤트 트리거의 역할을 한다. 
 
Reducer
이전 상태와 액션을 받아, 다음 상태를 반환하는 역할
Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있다. 어떤 액션이 들어오는지 그 유형에 따라 이벤트를 처리하는 이벤트 리스너라고 볼 수 있다. 이전 상태를 변경한다는 점이 아니라 새로운 상태 객체를 생성해서 반환해야 한다.

dispatch 
action을 발생시키는 것
상태를 업데이트하는 유일한 방법은 store.dispatch() 메서드를 부르고 action 객체를 넘겨주는 것이다.

 

redux 공식 문서의 그림

 

😀 장점

• 외부에서 관리 Context API처럼 리랜더링 x

🥲 단점

• 리덕스 스토어 환경 설정의 복잡성
• 리덕스를 제대로 사용하기 위해 붙는 여러개의 미들웨어
• 보일러플레이트, 즉 어떤 일을 하기 위해 꼭 작성해야 하는 (상용구)코드가 많이 요구된다.
• 설계 철학에 요구되는 코딩 방식을 꼭 추구해야해서 오히려 코드가 복잡해질수 있다.

 

📗 Recoil

Context API 기반으로 페이스북에서 만든 함수형 컴포넌트에서만 사용 가능한 전역 상태관리 라이브러리이다.

 

Recoil 을 사용하려면 상위 컴포넌트(App 또는 Router)를 RecilRoot 를 통해서 감싸줘야 한다.

function App() {
  return (
    <RecoilRoot>
      <Router />
    </RecoilRoot>
  );
}

 

Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다.

고유값인 key를 설정해주고 default에 기본값을 할당해준다.

 

export const userState = atom<userProps>({
  key: `userState/${v1()}`,
  default: {
    id: '',
    nickname: '',
    hair: '',
  },
});

const [user, setUser] = useRecoilState(userState);

 

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다.

상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.(https://recoiljs.org/ko/docs/introduction/core-concepts/)

 

const showUserState = selector({
  key: 'showUserState',
  get: ({get}) => {
    const {id, nickname, hair} = get(userState);
    return `
      id: ${id}
      nickname: ${nickname}
      hair: ${hair}
    `;
  },
});

 

장점

• 러닝커브가 작다.
• 비동기 처리가 내장되어 있다.

단점

• 함수형 컴포넌트에서만 사용이 가능

 

 

📙 Zustand

flux패턴을 기반으로 한 개의 중앙에 집중된 형식의 스토어 구조를 활용한다.

// store.js
import create from 'zustand' // create로 zustand를 불러옵니다.

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 })
}))

export default useStore

import useStore from '../store.js'

const { count, increase, resetCount } = useStore(state => state)

 

장점

• Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
• 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
• 러닝커브가 작다.

단점

• 단점을 잘 모르겠다..

 

📒 jotai

atomic 패턴으로 한 상태관리 라이브러리이다.

import { atom } from 'jotai'

const countAtom = atom(0);
const mangaAtom = atom({ 'label': '', 'content': '' });

const [count, setCount] = useAtom(countAtom)

3가지의 atom 형태

• 읽기 전용 atom
• 쓰기 전용 atom
• 읽기-쓰기 atom

const readOnlyAtom = atom((get) => get(priceAtom) * 2);

const writeOnlyAtom = atom(
  null, //  첫 번째 인수에 'null'을 전달하는 규칙입니다.
  (get, set, update) => {
    // update는 atom을 업데이트하기 위해 받아오는 값입니다.
    set(priceAtom, get(priceAtom) - update.discount)
  }
);

const readWriteAtom = atom(
  (get) => get(priceAtom) * 2,
  (get, set, newPrice) => {
    set(priceAtom, newPrice / 2)
    // 동시에 원하는 만큼 atom을 설정할 수 있습니다.
  }
);

 

추가적으로 다음과 같은 장점을 가지고 있어 일부 개발자들 사이에서 Recoil보다 선호되는 경향이 있다고 한다.

• 경랑화된 API (Minimalistic API)
• String key의 미사용
• 타입스크립트 기반
• utils 함수들의 제공

 

 

 

jotai는 아직 사용해보지 않았는데 다음 프로젝트에서 한 번 사용해보려고 한다. Redux를 처음 사용해보았을 때 생각보다 복잡해서 어려움이 있었는데 Recoil, Zustand를 사용할 때 개인적으로 너무 신세계였다. 점점 많은 전역 상태 관리 라이브러리들이 나오는데 점점 간소화되고 사용방법이 편해지는 것 같다. Recoil을 사용했던 프로젝트에서 곤란한 점이 있었는데 클래스 내에서 전역상태를 받아보려고 했을 때였다. 프로젝트 후반부라 바꾸지 못하고 emitter를 통해 우회하는 방법을 사용했었는데, 다양한 상태 관리 라이브러리를 사용해보고 상황에 맞는 기술 스택 선정을 해야겠다!

 

📚 참고

https://naon.me/posts/til104

리액트 상태값(state)이란? - out.log

https://abangpa1ace.tistory.com/241?category=905014 

[Jotai] React 전역 상태 라이브러리

https://ui.toast.com/posts/ko_20210812

React 상태 관리 라이브러리 Zustand의 코드를 파헤쳐보자

https://recoiljs.org/ko/docs/introduction/core-concepts/

주요 개념 | Recoil

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

https://devbksheen.tistory.com/entry/Context-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=1028639?category=1028639 

Context API란? 소개 및 사용법