배경
🎤
서평 •  • 읽는데 9분 소요

리액트 훅을 활용한 마이크로 상태 관리

책 『리액트 훅을 활용한 마이크로 상태 관리』 를 읽고 작성한 서평입니다.

#Book


올해 첫 책을 읽었습니다. 원래 작년에 읽으려 했지만 미뤄둔 책이라, 이번 설 연휴를 계기로 완독하고 후기를 남겨보려고 합니다.

리액트 훅을 활용한 마이크로 상태 관리 설에 할머니 집까지 와서 블로그 쓰는 중… 유난이다 유난이야!

사실 이 책을 읽게 된 이유는 회사에서 스터디 목적으로 구매한 책이었는데, 정작 바쁘다는 이유로 스터디를 하지는 못했기 때문입니다. 사놓은 책만 덩그러니 남겨져 있어서, 개인적으로 공부하기 위해 읽게 되었습니다.

이 책을 보고 흥미를 느낀 부분은 크게 두 가지였는데요. 첫 번째는 책 제목에서 이야기하는 마이크로 상태 관리 라는 개념이 저에게는 생소하게 느껴져서 그 의미가 궁금했고, 두 번째로는 Zustand와 Jotai처럼 유명한 상태 관리 라이브러리를 깊이 다루는 내용이 포함되어 있다는 점이었습니다. 사실 저는 아직까지 두 라이브러리를 들어보기만 했지 직접 사용해 본 경험은 없어서 그 둘의 차이점을 알고 싶었기 때문입니다.

저와 비슷한 고민을 하시는 분들도 계실 것 같아, 이번 포스트에서 이 책의 주요 내용을 소개하고 인상 깊었던 부분을 공유하려고 합니다. 이번 포스트를 통해 마이크로 상태 관리의 정의와 전역 상태 관리 라이브러리의 차이점을 비교해보고 싶은 분 들에게 도움이 되었으면 좋겠습니다.

책 소개

이 책은 일본의 개발자 다이시 카토가 작성한 책으로, React 환경에서의 다양한 상태 관리 방법과 유명 상태 관리 라이브러리의 사용법을 소개하고 있습니다. 총 3부로 구성되어 있으며, 다음과 같은 내용을 다루고 있습니다.

  • 리액트 훅과 마이크로 상태 관리
    • 리액트 훅을 이용한 마이크로 상태 관리
  • 전역 상태에 대한 기초적인 접근법
    • 지역 상태와 전역 상태 관리 사용하기
    • 리액트 컨텍스트를 이용한 컴포넌트 상태 공유
    • 구독을 이용한 모듈 상태 공유
    • 리액트 컨텍스트와 구독을 이용한 컴포넌트 상태 공유
  • 라이브러리 구현 및 용도
    • 전역 상태 관리 라이브러리 소개
    • 사용 사례 시나리오: Zustand, Jotai, Valtio, React Tracked
    • 세 가지 전역 상태 라이브러리의 유사점과 차이점

책의 분량은 242쪽으로 적당하며, 전역 상태 관리 라이브러리를 사용한 경험이 있는 개발자라면 비교적 수월하게 읽을 수 있습니다. 반면, 저처럼 관련 라이브러리를 처음 접하는 경우에는 개념을 정리하며 읽어야 해서 다소 시간이 걸릴 수도 있습니다. 저는 이틀 정도에 걸쳐 천천히 읽었으며, 이해가 어려운 부분은 ChatGPT를 활용해 보완했습니다.

예제 코드는 React와 TypeScript 환경을 기준으로 작성되어 있고, 코드도 반복 작성된 부분이 많아서 그렇게 어렵지는 않았습니다. 다만, 성능 최적화를 고려한 상태 관리 기법이 포함되어 있어 React의 동작 원리에 대한 이해가 있다면 더욱 깊이 있는 학습이 가능합니다.

그럼 지금부터 각 장에서 인상 깊었던 내용을 정리해 보겠습니다.

리액트 훅을 이용한 마이크로 상태 관리

마이크로 상태 관리의 정의 마이크로 상태 관리의 정의

1장에서는 마이크로 상태 관리를 정의합니다. 책에서는 마이크로 상태 관리 에 대한 공식적인 정의가 있다고 설명하지는 않지만, 일반적으로 다음과 같은 기능을 포함해야 한다고 설명합니다.

상태 읽기, 상태 갱신, 상태 기반 렌더링을 제공하는 범용적인 상태 관리 기법

정의가 생각보다 간단한데요. 조금 더 쉽게 말하면, 핵심적인 상태 관리 기능만 제공하며, 특정 목적과 환경에 의존하지 않는 상태 관리 기법을 의미합니다.

그렇다면 목적 지향적인 상태 관리는 무엇인가? 라고 생각하는 분이 계실 수도 있을 것 같은데요. 그 예시를 들어보면 다음과 같습니다.

위와 같은 상태 관리 기법은 특정 목적과 환경에서 사용하는 것을 가정하고 만들어진 도구이기 때문에, 다른 목적에 사용하기 어렵다는 단점이 있습니다. 반면 이 책에서 다루는 마이크로 상태 관리는 상태 관리의 핵심 기능만을 제공하기 때문에, React 환경이기만 하면 다양한 목적으로 활용할 수 있죠.

지역 상태와 전역 상태 사용하기

지역 상태와 전역 상태 지역 상태와 전역 상태

2장에서는 지역 상태와 전역 상태에 관해 살펴봅니다.

React에서는 데이터를 상태로 관리하며, 일반적으로 상위 컴포넌트의 상태를 하위 컴포넌트로 전달(props) 하지만, 멀리 떨어진 컴포넌트 간에 공통 상태가 필요할 때는 전역 상태 관리가 필요합니다. 책에서도 지역 상태와 전역 상태를 적절히 구별하여 사용하는 것이 중요하다고 강조합니다.

지역 상태는 반복되는 요소를 컴포넌트로 분리하여 재사용성을 높이고, 관련된 코드를 가까이 배치해 가독성을 유지하는 데 유용한 반면, 전역 상태는 여러 컴포넌트에서 공통적으로 사용되는 데이터를 관리할 때 필요합니다. 여기서 말하는 전역 상태의 특징으로는 특정 컨텍스트 내에서는 싱글톤으로 동작하며, 이 값이 여러 컴포넌트에서 공유되는 상태라는 측면을 고려해야 합니다.

지역 상태는 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하거나, children을 활용해 렌더링 하는 방식으로 관리할 수 있습니다. 반면, 전역 상태는 props 전달이 적절하지 않거나, React 외부에 이미 존재하는 상태를 관리할 때 사용하는 것이 적절합니다.

리액트 컨텍스트를 이용한 컴포넌트 상태 공유

리액트 컨텍스트를 이용한 컴포넌트 상태 공유 리액트 컨텍스트에 대한 탐구

3장에서는 리액트 컨텍스트를 이용해 전역 상태를 만드는 법에 대해 알아봅니다.

React 16 버전부터 제공되는 Context API를 활용하면 컴포넌트 트리의 Provider 하위 컴포넌트에 공통 상태를 제공할 수 있게 됩니다. 이를 통해 상태를 전역적으로 관리할 수 있게 되었지만, Context API는 사용 시 불필요한 리렌더가 일어날 수 있다는 단점이 있습니다. 편리하지만 단순히 useContext를 사용하는 것만으로는 성능 최적화가 어려우므로 추가적인 방법이 필요하다는 것을 설명합니다.

구독을 이용한 모듈 상태 공유

구독을 이용한 모듈 상태 공유 React에서 모듈 상태를 사용하려면 직접 리렌더링 최적화를 구현해야 한다

4장에서는 모듈 상태를 만들고 이를 리액트에서 사용하는 방법에 대해 알아봅니다. 개인적으로 이 파트는 상당히 흥미롭게 읽었는데요, React 코드 외부에 있는 모듈 레벨에서의 JavaScript 변수를 전역 상태로 사용하는 과정이 포함되어 있기 때문입니다.

이렇게 모듈 변수를 전역 상태로 사용하는 경우 React와 연동하는 과정이 필수적인데요. 이를 위해서는 모듈 상태가 변경될 때 React에서 리렌더가 다시 일어날 수 있도록 구독 모델을 구현해야 하고, 그 원리를 소개하고 있습니다. React 팀에서도 모듈 상태를 지원하기 위한 공식 라이브러리와 API를 제공하고 있다는 점도 소개하죠.

직접 사용해 본 적은 없지만 어디서 들어본 적은 있는 훅인 React 18의 useSyncExternalStore 이 이런 목적으로 제공되는 것을 알고 나서 더욱 흥미롭게 읽었습니다.

리액트 컨텍스트와 구독을 이용한 상태 공유

리액트 컨텍스트와 구독을 이용한 상태 공유 컨텍스트와 구독의 퓨전

5장에서는 앞에서 다룬 내용을 조합하여, 리액트 컨텍스트와 구독을 이용한 상태 공유 방법을 소개하고 있습니다.

Context API는 전역 변수가 영향을 미치는 범위인 스코프를 지정할 수 있는 반면, 상태 변경 시 불필요한 리렌더가 일어나는 단점이 있는데 이를 구독 모델과 결합하여 해결할 수 있다는 점을 설명합니다.

  • 컨텍스트의 특성인 하위 트리에 전역 상태를 제공할 수 있고, 컨텍스트의 Provider를 중첩하는 것이 가능해짐
  • 구독 모델을 이용해 리렌더링 최적화가 가능해짐

이러한 특징은 규모가 큰 애플리케이션일수록 유용하게 사용할 수 있으며, 이후에 소개할 전역 상태 관리 라이브러리의 기반을 이루는 개념이기도 합니다.

전역 상태 관리 라이브러리 소개

전역 상태 관리 라이브러리 소개 전역 상태 관리는 어떤 문제를 해결하고자 하는가?

6장에서는 앞서 언급한 패턴을 이용해, 실제 전역 상태 라이브러리가 어떤 문제를 해결하고자 하는지를 소개합니다.

전역 상태 라이브러리는 크게 읽기와 쓰기 두 가지 관점에서 문제를 해결해야 하는데요. 전역 상태를 읽을 때에는 상태를 효율적으로 읽어오는 방법이 필요하고, 상태를 쓸 때에는 상태를 변경할 때마다 리렌더링이 일어나지 않도록 하는 방법이 필요합니다.

리렌더링 최적화의 핵심은 크게 3가지인데요. 각 방법을 간단히 설명합니다.

  • 선택자 함수 사용: 상태를 받아 상태의 일부를 반환하는 함수를 정의, 어떤 부분을 사용할지 직접 명시하는 방법이므로 수동 최적화
  • 속성 접근 감지: 어떤 속성에 접근했는지를 프로그래밍 언어 수준에서 감지하여 리렌더링 최적화, 이를 위해 프록시(Proxy)를 사용
  • 아톰 사용: 전역 상태를 한 덩어리의 큰 객체로 만들어 구독하는 대신, 더 작은 단위로 세분화하고 이를 구독하는 아톰을 사용

사용 사례 시나리오와 전역 상태 라이브러리의 비교

사용 사례 시나리오와 전역 상태 라이브러리의 비교 전역 상태 관리 라이브러리의 비교

7장부터 11장까지는 이 파트에서는 전역 상태 관리 라이브러리의 다양한 접근 방식을 소개하며, 대표적으로 Zustand, Jotai, Valtio, React Tracked 4가지를 다루고 이를 비교합니다.

  • Zustand: React에서 모듈 상태를 사용하는 라이브러리로, 그 사용법과 스토어 모델이 Redux와 유사하지만 더 간단하게 사용할 수 있다는 장점이 있음
  • Jotai: 아톰 모델과 컨텍스트를 이용한 라이브러리로. API 측면에서 Recoil과 비슷하지만 선택자 기반이 아니라 렌더링 최적화를 위한 최소한의 API만을 제공함
  • Valtio: 프록시를 이용한 상태 관리 라이브러리이며, MobX와 유사함. 마치 JavaScript 객체를 다루듯 변경 가능한 갱신 모델을 구현하는 점이 자연스럽게 느껴지지만 React의 기본 개념인 불변 갱신 과 멘탈 모델이 충돌된다는 단점이 있음
  • React Tracked: Context API 사용 시 발생할 수 있는 리렌더를 최적화한 라이브러리입니다.

후기

이런 거였군 오오… 이런 거였군…

이 책을 한 마디로 요약하자면, 전역 상태 관리라는 주제를 이렇게 깊이 있게 탐구할 수 있다는 점이 인상적이었습니다. 사실 책을 읽기 전에는 ‘그냥 로컬 스토리지나 React Context API를 쓰면 되는 거 아닌가? (후비적)’ 정도로 생각했지만, 실제로는 훨씬 더 많은 고려 사항이 존재한다는 걸 깨달았거든요.

책의 초반부는 다소 기초적인 내용을 포함하고 있지만, 중반부의 모듈 상태 공유 파트에 들어서면서 앞에서 배운 개념들이 자연스럽게 연결되는 구조를 가지고 있어 완성도가 높다고 느꼈습니다.

다음으로는 React의 리렌더링을 최소화하는 성능 최적화 기법을 매우 심도 깊게 다루고 있다는 점이 좋았습니다. 실무에서는 성능 저하가 눈에 띄게 발생하지 않는 한 리렌더링을 크게 신경 쓰지 않는 경우가 많지만, 상태 관리 라이브러리를 설계하는 관점에서는 필수적으로 고려해야 한다는 점을 배울 수 있었거든요.

그렇다고 해서 예제 코드가 어렵거나 복잡한 것도 아니었습니다. 오히려 간단한 투두 리스트 예제를 통해 설명하기 때문에, 개념을 이해하는 데 큰 어려움이 없었습니다.

마지막으로 전역 상태에 접근할 때 선택자를 기반으로 한다거나, 속성 접근을 직접 감지하거나, 전역 상태에서 파생된 값을 사용하는 것처럼 다양한 사용 사례를 소개하고 있어서 유용하게 느껴졌습니다. 사실 예전에 Vue를 쓸 때는 데이터를 직접 수정하거나 computed 라는 파생값을 쉽게 사용할 수 있었는데 React에서는 이게 매우 복잡하게 느껴졌거든요. 여기에 대해 불평을 하곤 했는데 이 책을 읽고 나니 보다 React 스러운 접근 방법에 대해 더 잘 이해할 수 있었습니다.

결과적으로 기존에 단순하게 생각했던 개념을 깊이 탐구할 수 있었으며, 초반의 설명이 후반부와 잘 연결되면서 책의 완성도를 높여주었다는 점이 인상적으로 느껴져서 이 책을 추천하고 싶네요.

이 포스트가 유익하셨다면?




프로필 사진

👨‍💻 정종윤

글 쓰는 것을 좋아하는 프론트엔드 개발자입니다. 온라인에서는 재그지그라는 닉네임으로 활동하고 있습니다.


Copyright © 2025, All right reserved.

Built with Gatsby