모던 리액트 Deep Dive - 상태관리

⚡5.1 상태관리의 필요성

상태란 흔히 웹 애플리케이션을 개발할때 이야기하는 상태는 어떠한 의미를 지닌 값이며, 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미함 (UI, URL, form, 서버에서 가져온 값)

5.1.1 리액트 상태관리의 역사

🌕Flux 패턴 

• 단방향으로 데이터 흐름을 변경하는 것 (양방향 데이터 바인딩 / 코드의 양이 많아지고 변경시나리오가 복잡

💡 Flux패턴의 용어

• action : 어떠한 작업을 처리할 액션과 그 액션이 발생시 함께 포함시킬 데이터를 의미
• dispatcher : 액션을 스토어로 보내는 역할
• store : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가짐
• view :  리액트의 컴포넌트에 해당하는 부분

양방향 데이터 바인딩은 데이터 흐름은 모두 액션이라는 한 방향으로 줄어드므로 데이터의 흐름을 추적하기 쉽고 코드를 이해하기가 수월해짐

🌕리덕스의 등장

• 리덕스는 대표적인 Flux 패턴을 사용하는 상태관리 라이브러리이고 Elm 아키텍처를 도입
• 리덕스는 하나의 상태 객체를 스토어에 저장해 두고, 이 객체를 업데이트하는 작업을 디스패치해 업데이트를 수행함

🌕Context API와 useContext

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

• 두 라이브러리 모두 외부에서 데이터를 불러오는 fetch를 관리하는 데 특화된 라이브러리지만, API 호출에 대한 상태를 관리하기 때문에 HTTP 요청에 특화된 상태 관리 라이브러리임

🌕 Recoil, Zustand, Jotai, Vlatio에 이르기까지

• 16.8 이상의 버전을 요구하고 있고 작은 크기의 상태를 효율적으로 관리하기 좋은 라이브러리

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

• useState의 등장으로 리액트에서는 여러 컴포넌트에 걸쳐 손쉽게 동일한 인터페이스의상태를 생성하고 관리할 수 있게 됨
• useCounter라는 훅을 만들어서 함수형 컴포넌트 어디서든 사용할 수 있게 구현가능

function useCounter(init: number = 0) {
	const[counter, setCounter] = useState(init)
    
    function inc() {
    	setCounter((prev) => prev + 1)
    }
    
    return {counter, inc}
}

 

• 리액트의 훅을 기반으로 만든 사용자 정의 훅은 함수 컴포넌트에서 재사용 가능하다는 장점
• 실제 useReducer를 타입스트립트로 작성하려면 다양한 오버로딩이 필요함
• useState나 useReducer 모두 약간의 구현 상의 차이만 있을 뿐, 두 훅 모두 지역 상태 관리를 위해 만들어짐

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

• useState의 한계는 리액트가 만든 클로저 내부에서 관리되어 지역 상태로 생성되기 때문에 해당 컴포넌트에서만 사용할 수 있다는 것
• useState로 컴포넌트의 리렌더링을 실행하여 최신값을 가져오는 방법은 해당 컴포넌트에서만 유효한 전략임 즉, 반대쪽의 다른 컴포넌트에서는 상태 변화에 따른 리렌더링을 일으킬 무언가가 없기 때문에 렌더링되지 않기 때문

💡함수외부에서 상태를 참조하고 렌더링까지 자연스럽게 일어나려면 다음과 같은 조건을 만족해야 함

1. 컴포넌트 외부 어딘가에 상태를 두고 여러 컴포넌트가 같이 쓸 수 있어야 함

2. 외부에 있는 상태를 사용하는 컴포넌트는 상태의 변화를 알아챌 수 있어야 하고, 상태가 변할 때마다 리렌더링이 일어나서 컴포넌트를 최신 상태값 기준으로 렌더링해야 함. 상태 감지는 상태를 변경시키는 컴포넌트뿐 아니라 상태를 참조하는 모든 컴포넌트에서 동일하게 작동해야 함

3. 상태가 윈시 값이 아닌 객체인 경우, 객체에 내가 감지하지 않는 값이 변한다 하더라도 리렌더링이 발생해서는 안됨

이 3가지를 만족시킬 수 있는 것이 store임