모던 리액트 Deep Dive - 5장

상태 관리는 왜 필요한가?

웹 애플리케이션에서의 상태 분류

• UI: 상호 작용이 가능한 모든 요소의 현재 값
• URL: 브라우저에서 관리되고 있는 상태값
• 폼: loading, submit, disabled, validation 등
• 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값

리액트 상태 관리의 역사

• Flux 패턴이 나오게 된 배경
  • 상태의 변화를 추적하기 어렵게 하는 것은 양방향 데이터 바인딩
  • 뷰가 모델을, 모델이 뷰를 변경하는 방식
  • 페이스북은 이러한 문제를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 제안했다.
• Flux 패턴
  • 액션
    • 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킨 데이터
    • 액션 타입과 데이터를 디스패처로 보낸다.
  • 디스패쳐
    • 액션을 스토어로 보내는 역할
    • 콜백 함수 형태로 앞서 액션에 정의한 타입과 데이터를 모두 스토어에 보낸다.
  • 스토어
    • 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드로 구성
  • 뷰
    • 리액트 컴포넌트에 해당하는 부분
    • 스토어에서 만들어진 데이터를 가져와 화면 렌더링
• 단방향 데이터 흐름의 장단점
  • 장점
    • 데이터의 흐림이 모두 액션이라는 한 방향으로 줄어들기 때문에 데이터의 흐름을 추적하기 쉽고 코드를 이해하기 수월해진다.
  • 단점
    • 사용자의 입력에 따라 데이터 갱신, 업데이트하는 로직을 모두 구현해야해 개발 비용 증가

 

시장 지배자 리덕스의 등장

import Html exposing (..)

-- MODEL

type alias Model = { ... }

-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...

-- VIEW

view : Model -> Html Msg
view model =
  ...

• Elm 아키텍처 구조
  • 모델: 애플리케이션의 상태
  • 뷰: 모델을 표현하는 HTML
  • 업데이트: 모델을 수정하는 방식
• 리덕스
  • 하나의 상태 객체를 스토어에 저장
  • 이 객체를 업데이트하는 작업을 디스패치해 업데이트 수행 (reducer 함수)
  • 애플리케이션 상태에 대한 새로운 복사본을 반환한 다음, 새로운 상태를 전파

Context API와 useContext

• 리덕스는 구현을 위한 보일러플레이트가 너무 많다.
• 이에 리액트 16.3에서 전역 상태를 하위 컴포넌트에 주입할 수 있는 새로운 Context API를 출시했다.
• 리액트 16.3 이전에는 getChildContext()로 비슷하게 적용 가능했다.

// ParentComponent

getChildContext() {
	return (
		name: 'foo',
	)
}

render() {
	return <ChildComponent />
}

// ChildComponent

function ChildComponent(props, context) {
	return (
		<p>Name: {context.name}</p>
	)
}

• getChildContext의 단점
  • 상위 컴포넌트가 렌더링되면 getChildContext 호출과 동시에 shouldComponentUpdate가 항상 true를 반환 → 불필요한 렌더링 발생
  • context 인수로 컴포넌트와의 결합도 상승
• Context API
  • <Provider> 를 활용해 하위 컴포넌트에 상태 제공
  • 상태 관리가 아닌 주입을 도와주는 역할
  • 렌더링을 막아주는 기능 또한 존재하지 않으니 사용할 때 주의 필요

훅의 탄생, 그리고 React Query와 SWR

• 훅 API
  • state를 재사용 가능하게 했다.

• const useToggle = (initialValue) => {
    const [value, setValue] = useState(initialValue);
    const toggle = () => {
      setValue(!value);
    };
    return [value, toggle];
  };
  

• SWR, React Query
  • HTTP 요청에 특화된 상태 관리 라이브러리
  • 키를 기준으로 캐시

  // SWR
  
  import useSWR from "swr";
  const fetcher = (url) => fetch(url).then((res) => res.json());
  const MyComponent = () => {
    const { data, error } = useSWR("<https://api.example.com/data>", fetcher);
    if (!data) return

Loading...

• ;
    if (error) return

Error: {error.message}

• ;
    return

Data: {data}

• ;
  };
  

• Recoil, Zustand, Jotai, Valtio에 이르기까지
• 예제
• // Recoil (React State Management Library) import { atom, useRecoilState } from "recoil"; const recoilState = atom({ key: "recoilState", default: 0, }); function RecoilComponent() { const [state, setState] = useRecoilState(recoilState); return ( <div> <p>Recoil State: {state}</p> <button onClick={() => setState(state + 1)}>Increment</button> </div> ); } // Jotai (React State Management Library) import { atom, useAtom } from "jotai"; const jotaiAtom = atom(0); function JotaiComponent() { const [state, setState] = useAtom(jotaiAtom); return ( <div> <p>Jotai State: {state}</p> <button onClick={() => setState((prev) => prev + 1)}>Increment</button> </div> ); } // Zustand (React State Management Library) import create from "zustand"; const useZustand = create((set) => ({ zustandState: 0, increment: () => set((state) => ({ zustandState: state.zustandState + 1 })), })); function ZustandComponent() { const { zustandState, increment } = useZustand(); return ( <div> <p>Zustand State: {zustandState}</p> <button onClick={increment}>Increment</button> </div> ); } // Valtio (React State Management Library) import { proxy, useProxy } from "valtio"; const valtioState = proxy({ valtioState: 0 }); function ValtioComponent() { const state = useProxy(valtioState); return ( <div> <p>Valtio State: {state.valtioState}</p> <button onClick={() => (valtioState.valtioState += 1)}> Increment </button> </div> ); }

리액트 훅으로 시작하는 상태 관리

가장 기본적인 방법: useState와 useReducer

• 훅을 사용할 때마다 컴포넌트별로 초기화되므로 컴포넌트별로 다른 상태를 가짐 → 지역상태 (localState)
• 여러 컴포넌트에 걸쳐 공유하려면 지역 상태를 부모 컴포넌트로 한 단계 끌어올려 하위 컴포넌트에서 재사용

지역 상태의 한계를 벗어나보자: useState의 상태를 바깥으로 분리하기

• useState는 클로저 내부에서 관리되어 지역 상태로 생성되기 때문에 해당 컴포넌트에서만 사용할 수 있다는 단점이 있다
• getter, setter 적용법
  • 업데이트는 되지만 리렌더링이 되지 않는다.
  • 새로운 상태의 UI를 보여주기 위해서는 함수형 컴포넌트의 재실행, useState 두 번째 인수 호출 등의 방법이 있다.
• 하위 컴포넌트 이벤트로 상위 컴포넌트 업데이트
  • 상위 컴포넌트의 state를 전달하고 이벤트 발생 시 setState 호출
  • 이벤트가 발생한 컴포넌트는 리렌더링되지만 같은 값을 공유하고 있는 다른 하위 컴포넌트는 렌더링 x
    • 다른 컴포넌트에서는 리렌더링을 일으킬 이벤트가 없었기 때문
• 함수 외부에서 상태를 참조하고 렌더링까지 발생시키는 조건
  • 컴포넌트 외부 어딘가에 상태를 두고 여러 컴포넌트가 같이 쓸 수 있어야 한다.
  • 외부 상태의 변경을 사용하는 컴포넌트에서 알아챌 수 있도록 해야 한다.
  • 상태가 객체인 경우 감지하지 않는 내부 값이 변했을 때 리렌더링이 발생하면 안 된다.

type Initializer<T> = T extends any ? T | ((prev:T)=>T : never
type Store<State> = {
get: () => State
set: ( action :Initializer<State>) =>State
subscribe: ( callback : ()=> void ) => () => void}
export const createStore = <State extends unknown>(initialState: Initializer<State>,):Store<State> =>{

let state = typeof initialState !== 'function'? initialState : initialState()

const callbacks = new Set<()=>void>()

const get = () => state

const set = (nextState:State | ( prev:State)=> State ) => {
	state = typeof nextState = "function" ?(nextState as 	(prev: State) => State)(state) : nextState
	callbacks.forEach((callback)=> callback())
	return state
}

const subscribe = ( callback : () => void ) => {
	callbacks.add(callback)

	return ()=> {
		callbacks.delete(callback)
		}
	}
}

export const useStoreSelector = <State extends unknown, Value extends unknown>(store:Store<State>,selector:(state:State) => Value ) => {
	const [state, setState] = useState(()=>selector(store.get()))
	
	useEffect(()=>{
		const unsubscribe = store.subscribe(() => {
			const value = selector(store.get())
			setState(value)
		})

		return unsubscribe
	},[store, selector])

	return state
	}
}

• 예제 요약
  • useStore
    • createStore: 관리해야 하는 상태를 내부 변수로 관리
    • get: 변수의 최신값 제공
    • set: 내부 변수 최신화
    • subscribe: Set에 콜백 등록 (+ 클린업) - add, delete 메소드
  • useStoreSelector
    • 스토어 값으로 state 초기화
    • useEffect에 setState를 수행하는 함수를 subscribe로 등록
    • selector에 store.get()을 등록해 해당 값이 변경되지 않으면 리렌더링이 발생하지 않도록 제어 (객체 일부 값 변경에 따른 의도치 않은 렌더링 방지)
    • useEffect 클린업 함수에 unsubscribe 추가
  • 리액트 18에서는 변경 상태를 구독 방식으로 활용하는 useSubscription을 useSyncExternalStore로 구현해놓았다.

  const state = useSyncExternalStore(store.subscribe, store.getSnapshot);

useState와 Context를 동시에 사용해 보기

• 위 방식은 반드시 하나의 스토어만 가지게 된다는 단점이 있다.
• 하나의 스토어를 가지면 각 스토어는 마치 전역 변수처럼 작동해 동일한 형태의 여러 개의 스토어를 가질 수 없게 된다.
• Context로 컴포넌트 트리 내 상태 격리가 필요한 부분에 Provider 생성 → 각기 다른 초기값 설정 후 개별 관리

상태 관리 라이브러리 Recoil, Jotai, Zustand 살펴보기

• Recoil, Jotai: Context, Provider, 훅을 기반으로 가능한 작은 상태를 효율적으로 관리
• Zustand: 리덕스와 비슷하게 하나의 큰 스토어를 기반으로 상태 관리 (클로저 기반)
• Recoil
  • 애플리케이션 최상단에 RecoilRoot 생성
    • RecoilRoot로 생성된 Context 스토어에 상태값 저장
    • 스토어의 상태값에 접근할 수 있는 함수들이 있으며, 이 함수를 활용해 상태값에 접근, 변경 가능
    • 값의 변경이 발생하면 참조하고 있는 하위 컴포넌트에 알림 (notifyComponents)
  • atom
    • 상태를 나타내는 Recoil의 최소 상태 단위
    • key 값 필수
    • default: 초깃값
  • useRecoilValue
    • atom 값을 읽어오는 훅
    • 내부 useEffect를 통해 recoilValue 변경 시 forceUpdate를 통해 렌더링 강제 수행
  • useRecoilState
    • 값을 가져오거나 변경할 수 있는 훅
    • 가져오는 값은 useRecoilValue로 사용
    • 업데이트는 useSetRecoilState로 수행
      • 내부에 있는 setRecoilValue는 queueOrPerformStateUpdate 함수를 호출해 상태를 업데이트하거나 업데이트가 필요한 내용 등록
  • 그 외
    • useRecoilStateLoadable, waitForAll, waitForAny, waitForAllSettled와 같은 비동기 작업 지원 api 제공
    • selector로 한 개 이상의 atom 값을 바탕으로 새로운 값 조합 가능
  • 정리
    • 컴포넌트는 Recoil에서 제공하는 훅을 통해 atom의 상태 변화를 구독하고, 값이 변경되면 forceUpdate와 같은 기법을 통해 리렌더링을 실행해 최신 atom 값 리턴
• Jotai
  • 상향식(bottom-up) 접근법
  • 작은 단위의 상태를 위로 전파할 수 있는 구조
  • Context의 문제점인 불필요한 리렌더링 문제를 해결하도록 설계
  • 구조
    • atom
      • Recoil과 같은 최소 단위의 상태
      • 다른 점은 atom 하나로 파생된 상태까지 생성 가능 (write, read)
      • 별도의 key 필요 x
      • 상태는 useAtomValue에 저장
    • useAtomValue
      • version: 스토어의 버전
      • valueFromReducer: atom에서 get 수행 시 반환값
      • atomFromReducer: atom . 그자체
      • atom 값은 훅 내 store에 WeakMap 방식으로 별도 키 없이 값 저장
      • rerenderIfChanged: 넘겨받은 atom이 Reducer를 통해 스토어 atom과 달라지는 경우, subscribe를 수행하는 값이 변경된 경우 리렌더링 유발
    • useAtom
      • useState와 동일한 형태
        • 첫번째 값: useAtomValue 훅 결과 반환
        • 두번째 값: useSetAtom 훅 반환 (atom 수정 기능)
        • setAtom에서 사용하는 write 함수에서는 스토어에서 해당 atom을 찾아 직접 값을 업데이트
  • 특징
    • Recoil과 다르게 별도의 키 관리 필요 x → 객체의 참조를 통해 값을 관리 (WeakMap)
    • selector 없이 atom만으로 파생된 값 생성 가능
• Zustand
  • 하나의 스토어를 중앙 집중형으로 활용해 스토어 내부에서 상태 관리
  • 내부의 partial, replace로 state의 일부분 또는 전체 변경
  • useStore에서는 useSyncExternalStoreWithSelector 사용
    • useSyncExternalStore와 다른 점은 원하는 값을 가져올 수 있는 selector와 동등 비교를 할 수 있는 equalityFn 함수를 받는다는 것이다.
  • create 내 반환 값, getter, setter 함수 작성