<div id="readability-page-1" class="page"><article>올해 첫 책을 읽었습니다. 원래 작년에 읽으려 했지만 미뤄둔 책이라, 이번 설 연휴를 계기로 완독하고 후기를 남겨보려고 합니다.

 <a href="/static/8a5a8b11c139085ee6310e0bd44cec2b/e2d85/1.jpg" target="_blank" rel="noopener">
 
 <img alt="리액트 훅을 활용한 마이크로 상태 관리" title="리액트 훅을 활용한 마이크로 상태 관리" src="https://wormwlrm.github.io/static/8a5a8b11c139085ee6310e0bd44cec2b/6aca1/1.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
설에 할머니 집까지 와서 블로그 쓰는 중… 유난이다 유난이야!
사실 이 책을 읽게 된 이유는 회사에서 스터디 목적으로 구매한 책이었는데, 정작 바쁘다는 이유로 스터디를 하지는 못했기 때문입니다. 사놓은 책만 덩그러니 남겨져 있어서, 개인적으로 공부하기 위해 읽게 되었습니다.
이 책을 보고 흥미를 느낀 부분은 크게 두 가지였는데요. 첫 번째는 책 제목에서 이야기하는 마이크로 상태 관리 라는 개념이 저에게는 생소하게 느껴져서 그 의미가 궁금했고, 두 번째로는 Zustand와 Jotai처럼 유명한 상태 관리 라이브러리를 깊이 다루는 내용이 포함되어 있다는 점이었습니다. 사실 저는 아직까지 두 라이브러리를 들어보기만 했지 직접 사용해본 경험은 없어서 그 둘의 차이점을 알고 싶었기 때문입니다.
저와 비슷한 고민을 하시는 분들도 계실 것 같아, 이번 포스트에서 이 책의 주요 내용을 소개하고 인상 깊었던 부분을 공유하려고 합니다. 이번 포스트를 통해 마이크로 상태 관리의 정의와 전역 상태 관리 라이브러리의 차이점을 비교해보고 싶은 분 들에게 도움이 되었으면 좋겠습니다.
<h2 id="책-소개"><a href="#%EC%B1%85-%EC%86%8C%EA%B0%9C" aria-label="책 소개 permalink"></a>책 소개</h2>
이 책은 일본의 개발자 다이시 카토가 작성한 책으로, React 환경에서의 다양한 상태 관리 방법과 유명 상태 관리 라이브러리의 사용법을 소개하고 있습니다. 총 3부로 구성되어 있으며, 다음과 같은 내용을 다루고 있습니다.
<blockquote>
<ul>
<li>리액트 훅과 마이크로 상태 관리
<ul>
<li>리액트 훅을 이용한 마이크로 상태 관리</li>
</ul>
</li>
<li>전역 상태에 대한 기초적인 접근법
<ul>
<li>지역 상태와 전역 상태 관리 사용하기</li>
<li>리액트 컨텍스트를 이용한 컴포넌트 상태 공유</li>
<li>구독을 이용한 모듈 상태 공유</li>
<li>리액트 컨텍스트와 구독을 이용한 컴포넌트 상태 공유</li>
</ul>
</li>
<li>라이브러리 구현 및 용도
<ul>
<li>전역 상태 관리 라이브러리 소개</li>
<li>사용 사례 시나리오: Zustand, Jotai, Valtio, React Tracked</li>
<li>세 가지 전역 상태 라이브러리의 유사점과 차이점</li>
</ul>
</li>
</ul>
</blockquote>
책의 분량은 242쪽으로 적당한 편이고, 전역 상태 관리 라이브러리를 사용한 경험이 있는 개발자라면 원활하게 읽을 수 있습니다. 다만 저처럼 Zustand와 Jotai를 직접 사용해 본 적이 없는 경우, 개념을 정리하며 읽는 데 다소 시간이 걸릴 수 있어요. 저는 여유롭게 2일 정도에 걸쳐 읽었고, 이해가 잘 안가는 부분은 ChatGPT 에게 질문을 하면서 읽었습니다.
예제 코드는 React와 TypeScript 환경을 기준으로 작성되어 있고, 코드도 반복 작성된 부분이 많아서 그렇게 어렵지는 않았습니다. 다만, 성능 최적화를 고려한 상태 관리 기법이 포함되어 있어, React의 동작 원리에 대한 이해가 있다면 더욱 깊이 있는 학습이 가능합니다.
그럼 지금부터 각 장에서 인상 깊었던 내용을 정리해보겠습니다.
<h2 id="리액트-훅을-이용한-마이크로-상태-관리"><a href="#%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC" aria-label="리액트 훅을 이용한 마이크로 상태 관리 permalink"></a>리액트 훅을 이용한 마이크로 상태 관리</h2>

 <a href="/static/9cd04a737a16e21658e3766e8c6efaf2/d2602/2.jpg" target="_blank" rel="noopener">
 
 <img alt="마이크로 상태 관리의 정의" title="마이크로 상태 관리의 정의" src="https://wormwlrm.github.io/static/9cd04a737a16e21658e3766e8c6efaf2/6aca1/2.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
마이크로 상태 관리의 정의
책에서는 마이크로 상태 관리 에 대한 공식적인 정의를 내리지는 않지만, 내용을 요약하면 다음과 같습니다.
<blockquote>
상태 읽기, 상태 갱신, 상태 기반 렌더링을 제공하는 범용적인 상태 관리 기법
</blockquote>
정의가 생각보다 간단한데요. 조금 더 쉽게 말하면, 핵심적인 상태 관리 기능만 제공하며, 특정 목적과 환경에 의존하지 않는 상태 관리 기법을 의미합니다.
그렇다면 목적 지향적인 상태 관리는 무엇인가? 라고 생각하는 분이 계실 수도 있을 것 같은데요. 그 예시를 들어보면 다음과 같습니다.
<blockquote>
<ul>
<li><a href="https://www.react-hook-form.com/">react-hook-form</a>: 특정 목적(폼 처리)을 위해 만들어진 도구</li>
<li><a href="https://tanstack.com/query/latest">tanstack-query</a>: 외부 상태(서버 캐시)에 의존적인 기능이 포함</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">로컬 스토리지</a>: 브라우저 환경에 종속된 특수한 요건</li>
</ul>
</blockquote>
위와 같은 상태 관리 기법은 특정 목적과 환경에서 사용하는 것을 가정하고 만들어진 도구이기 때문에, 다른 목적에 사용하기 어렵다는 단점이 있습니다. 반면 이 책에서 다루는 마이크로 상태 관리는 상태 관리의 핵심 기능만을 제공하기 때문에, React 환경이기만 하면 다양한 목적으로 활용할 수 있죠.
<h2 id="지역-상태와-전역-상태-사용하기"><a href="#%EC%A7%80%EC%97%AD-%EC%83%81%ED%83%9C%EC%99%80-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0" aria-label="지역 상태와 전역 상태 사용하기 permalink"></a>지역 상태와 전역 상태 사용하기</h2>

 <a href="/static/7ebef5bdaea8fa0e8a3c76dc6805222f/d2602/3.jpg" target="_blank" rel="noopener">
 
 <img alt="지역 상태와 전역 상태" title="지역 상태와 전역 상태" src="https://wormwlrm.github.io/static/7ebef5bdaea8fa0e8a3c76dc6805222f/6aca1/3.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
React에서는 데이터를 상태로 저장하죠. 일반적으로 상위 컴포넌트의 상태를 하위 컴포넌트로 넘겨주기도 하지만, 멀리 떨어진 구조의 컴포넌트에서 공통적인 상태가 필요한 경우가 생기기도 합니다. 그래서 지역 상태와 전역 상태를 잘 구분하여 사용하는 것이 중요하다고 이 책은 강조하고 있습니다.
반복 가능한 요소를 컴포넌트로 분리하여 재사용성을 높일 수 있고, 연관 있는 코드를 근처에 두는 방식으로 지역성을 높일 수 있고, 상위 컴포넌트의 데이터는 하위 컴포넌트로 전달 가능한 특성을 이용할 수 있다면 지역 상태를, 그렇지 않은 경우 전역 상태를 사용하는 것이 좋죠.
지역 상태를 효과적으로 사용하기 위해서는 상위 컴포넌트에서 하위 컴포넌트로 Props를 전달하거나 children을 이용하여 컴포넌트를 렌더링하는 방식을 사용할 수 있습니다. 반면 전역 상태를 사용하기 위해서는 React Context API를 이용하거나, 전역 상태 관리 라이브러리를 사용하는 방법이 있습니다.
여기서 이야기하는 전역 상태의 특징은 전역 의 스코프를 별도로 지정 가능하며, 스코프 내에서는 해당 상태가 싱글톤으로 관리되어야 한다는 점을 설명합니다.
<h2 id="리액트-컨텍스트를-이용한-컴포넌트-상태-공유"><a href="#%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%81%ED%83%9C-%EA%B3%B5%EC%9C%A0" aria-label="리액트 컨텍스트를 이용한 컴포넌트 상태 공유 permalink"></a>리액트 컨텍스트를 이용한 컴포넌트 상태 공유</h2>

 <a href="/static/2de436ea2cf23d8bd540d12325cfd0d3/d2602/4.jpg" target="_blank" rel="noopener">
 
 <img alt="리액트 컨텍스트를 이용한 컴포넌트 상태 공유" title="리액트 컨텍스트를 이용한 컴포넌트 상태 공유" src="https://wormwlrm.github.io/static/2de436ea2cf23d8bd540d12325cfd0d3/6aca1/4.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
React 16 버전부터 제공되는 Context API를 활용하면 컴포넌트 트리의 Provider 하위 노드에 공통 상태를 제공할 수 있게 됩니다. 이를 통해 상태를 전역적으로 관리할 수 있게 되었지만, Context API는 사용 시 불필요한 리렌더가 일어날 수 있다는 단점이 있습니다. 편리하지만 단순히 useContext를 사용하는 것만으로는 성능 최적화가 어렵다는 점을 설명하죠.
<h2 id="구독을-이용한-모듈-상태-공유"><a href="#%EA%B5%AC%EB%8F%85%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%AA%A8%EB%93%88-%EC%83%81%ED%83%9C-%EA%B3%B5%EC%9C%A0" aria-label="구독을 이용한 모듈 상태 공유 permalink"></a>구독을 이용한 모듈 상태 공유</h2>

 <a href="/static/68d2bc1dd0b76ddb0a77dd9b6b8b343f/d2602/5.jpg" target="_blank" rel="noopener">
 
 <img alt="구독을 이용한 모듈 상태 공유" title="구독을 이용한 모듈 상태 공유" src="https://wormwlrm.github.io/static/68d2bc1dd0b76ddb0a77dd9b6b8b343f/6aca1/5.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
이 파트는 상당히 흥미롭게 읽었는데요, React 코드 외부에 있는 모듈 레벨에서의 JavaScript 변수를 전역 상태로 사용하는 과정이 포함되어 있기 때문입니다.
이렇게 모듈 변수를 전역 상태로 사용하는 경우 React와 연동하는 과정이 필수적인데요. 이를 위해서는 모듈 상태가 변경될 때 React 에서 리렌더가 다시 일어날 수 있도록 구독 모델을 구현해야 하고, 그 원리를 소개하고 있습니다.
직접 사용해본 적은 없지만 어디서 들어본 적은 있는 훅인 React 18의 <code>useSyncExternalStore</code> 이 이런 목적으로 제공되는 것을 알고 나서 더욱 흥미롭게 읽었습니다.
<h2 id="리액트-컨텍스트와-구독을-이용한-상태-공유"><a href="#%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EC%99%80-%EA%B5%AC%EB%8F%85%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%83%81%ED%83%9C-%EA%B3%B5%EC%9C%A0" aria-label="리액트 컨텍스트와 구독을 이용한 상태 공유 permalink"></a>리액트 컨텍스트와 구독을 이용한 상태 공유</h2>

 <a href="/static/db53a6aa6696b3b05674f64c1729f24e/d2602/6.jpg" target="_blank" rel="noopener">
 
 <img alt="리액트 컨텍스트와 구독을 이용한 상태 공유" title="리액트 컨텍스트와 구독을 이용한 상태 공유" src="https://wormwlrm.github.io/static/db53a6aa6696b3b05674f64c1729f24e/6aca1/6.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
이 파트는 앞에서 다룬 내용을 조합하여, 리액트 컨텍스트와 구독을 이용한 상태 공유 방법을 소개하고 있습니다. Context API는 전역 변수가 영향을 미치는 범위인 스코프를 지정할 수 있는 반면, 상태 변경 시 불필요한 리렌더가 일어나는 단점이 있는데 이를 구독 모델과 결합하여 해결할 수 있다는 점을 설명합니다.
<h2 id="전역-상태-관리-라이브러리-소개"><a href="#%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%86%8C%EA%B0%9C" aria-label="전역 상태 관리 라이브러리 소개 permalink"></a>전역 상태 관리 라이브러리 소개</h2>

 <a href="/static/f19eb68c2324e17cf9bfb417579b6edb/d2602/7.jpg" target="_blank" rel="noopener">
 
 <img alt="7" title="7" src="https://wormwlrm.github.io/static/f19eb68c2324e17cf9bfb417579b6edb/6aca1/7.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
앞서 언급한 패턴을 이용해, 실제 전역 상태 라이브러리가 어떤 문제를 해결하고자 하는지를 소개합니다.
전역 상태 라이브러리는 크게 읽기와 쓰기 두 가지 관점에서 문제를 해결해야 하는데요. 전역 상태를 읽을 때에는 상태를 효율적으로 읽어오는 방법이 필요하고, 상태를 쓸 때에는 상태를 변경할 때마다 리렌더링이 일어나지 않도록 하는 방법이 필요합니다.
리렌더링 최적화의 핵심은 크게 3가지인데요. 각 방법을 간단히 설명합니다.
<blockquote>
<ul>
<li>선택자 함수 사용: 상태를 받아 상태의 일부를 반환하는 함수를 정의, 어떤 부분을 사용할지 직접 명시하는 방법이므로 수동 최적화</li>
<li>속성 접근 감지: 어떤 속성에 접근했는지를 프로그래밍 언어 수준에서 감지하여 리렌더링 최적화, 이를 위해 프록시(Proxy)를 사용</li>
<li>아톰 사용: 전역 상태를 한 덩어리의 큰 객체로 만들어 구독하는 대신, 더 작은 단위로 세분화하고 이를 구독하는 아톰을 사용</li>
</ul>
</blockquote>
<h2 id="사용-사례-시나리오와-전역-상태-라이브러리의-비교"><a href="#%EC%82%AC%EC%9A%A9-%EC%82%AC%EB%A1%80-%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%EC%99%80-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%9D%98-%EB%B9%84%EA%B5%90" aria-label="사용 사례 시나리오와 전역 상태 라이브러리의 비교 permalink"></a>사용 사례 시나리오와 전역 상태 라이브러리의 비교</h2>

 <a href="/static/046f5e7ff6c5b538da25ec8013ece259/d2602/8.jpg" target="_blank" rel="noopener">
 
 <img alt="8" title="8" src="https://wormwlrm.github.io/static/046f5e7ff6c5b538da25ec8013ece259/6aca1/8.jpg" sizes="(max-width: 650px) 100vw, 650px" loading="lazy" decoding="async">
 </a>
 
이 파트에서는 전역 상태 관리 라이브러리의 다양한 접근 방식을 소개하며, 대표적으로 Zustand, Jotai, Valtio, React Tracked 4가지를 다룹니다. 각 라이브러리의 특징은 다음과 같습니다.
Zustand는 React에서 모듈 상태를 사용하는 라이브러리이며, 그 사용법과 스토어 모델이 Redux와 유사합니다.
Jotai는 아톰 모델과 컨텍스트를 이용한 라이브러리입니다. API 측면에서 Recoil과 비슷하지만 선택자 기반이 아니라 렌더링 최적화를 위한 최소한의 API만을 제공합니다.
Valtio는 프록시를 이용한 상태 관리 라이브러리이며, MobX와 유사합니다. 마치 JavaScript 객체를 다루듯 변경 가능한 갱신 모델을 구현하는 점이 자연스럽게 느껴지지만 React의 불변 모델과 충돌할 수 있다는 단점이 있습니다.
React Tracked는 Context API 사용 시 발생할 수 있는 리렌더를 최적화한 라이브러리입니다.
<h2 id="후기"><a href="#%ED%9B%84%EA%B8%B0" aria-label="후기 permalink"></a>후기</h2>

 <img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXVmMW43bGNhanFubHpycWhmYzB0YTVqOGFoeTFlbHhhbHZ3cms0YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Nm8ZPAGOwZUQM/giphy.gif" alt="이런 거였군" loading="lazy">
 
오오… 이런 거였군…
이 책을 한 마디로 요약하자면, 전역 상태 관리라는 주제를 이렇게 깊이 있게 탐구할 수 있다는 점이 인상적이었습니다. 사실 책을 읽기 전에는 ‘그냥 로컬 스토리지나 React Context API를 쓰면 되는 거 아닌가? (후비적)’ 정도로 생각했지만, 실제로는 훨씬 더 많은 고려 사항이 존재한다는 걸 깨달았거든요.
책의 초반부는 다소 기초적인 내용을 포함하고 있지만, 중반부의 모듈 상태 공유 파트에 들어서면서 앞에서 배운 개념들이 자연스럽게 연결되는 구조를 가지고 있어 완성도가 높다고 느꼈습니다.
다음으로는 React의 리렌더링을 최소화하는 성능 최적화 기법을 매우 심도 깊게 다루고 있다는 점이 좋았습니다. 실무에서는 성능 저하가 눈에 띄게 발생하지 않는 한 리렌더링을 크게 신경 쓰지 않는 경우가 많지만, 상태 관리 라이브러리를 설계하는 관점에서는 필수적으로 고려해야 한다는 점을 배울 수 있었거든요.
그렇다고 해서 예제 코드가 어렵거나 복잡한 것도 아니었습니다. 오히려 간단한 투두 리스트 예제를 통해 설명하기 때문에, 개념을 이해하는 데 큰 어려움이 없었습니다.
마지막으로 전역 상태에 접근할 때 선택자를 기반으로 한다거나, 속성 접근을 직접 감지하거나, 전역 상태에서 파생된 값을 사용하는 것처럼 다양한 사용 사례를 소개하고 있어서 유용하게 느껴졌습니다. 사실 예전에 Vue를 쓸 때는 데이터를 직접 수정하거나 <code>computed</code> 라는 파생값을 쉽게 사용할 수 있었는데 React에서는 이게 매우 복잡하게 느껴졌거든요. 여기에 대해 불평을 하곤 했는데 이 책을 읽고 나니 보다 React스러운 접근 방법에 대해 더 잘 이해할 수 있었습니다.
결과적으로 기존에 단순하게 생각했던 개념을 깊이 탐구할 수 있었으며, 초반의 설명이 후반부와 잘 연결되면서 책의 완성도를 높여주었다는 점이 인상적으로 느껴져서 이 책을 추천하고 싶네요.</article></div>

재그지그의 개발 블로그

올해 첫 책을 읽었습니다. 원래 작년에 읽으려 했지만 미뤄둔 책이라, 이번 설 연휴를 계기로 완독하고 후기를 남겨보려고 합니다.
      
    
  
  
    
설에 할머니 집까지 와서 블로그 쓰는 중… 유난이다 유난이야!
사실 이 책을 읽게 된 이유는 회사에서 스터디 목적으로 구매한 책이었는데, 정작 바쁘다는 이유로 스터디를 하지는 못했기 때문입니다. 사놓은 책만 덩그러니 남겨져 있어서, 개인적으로 공부하기 위해 읽게 되었습니다.
이 책을 보고 흥미를 느낀 부분은 크게 두 가지였는데요. 첫 번째는 책 제목에서 이야기하는 마이크로 상태 관리 라는 개념이 저에게는 생소하게 느껴져서 그 의미가 궁금했고, 두 번째로는 Zustand와 Jotai처럼 유명한 상태 관리 라이브러리를 깊이 다루는 내용이 포함되어 있다는 점이었습니다. 사실 저는 아직까지 두 라이브러리를 들어보기만 했지 직접 사용해본 경험은 없어서 그 둘의 차이점을 알고 싶었기 때문입니다.
저와 비슷한 고민을 하시는 분들도 계실 것 같아, 이번 포스트에서 이 책의 주요 내용을 소개하고 인상 깊었던 부분을 공유하려고 합니다. 이번 포스트를 통해 마이크로 상태 관리의 정의와 전역 상태 관리 라이브러리의 차이점을 비교해보고 싶은 분 들에게 도움이 되었으면 좋겠습니다.
책 소개
이 책은 일본의 개발자 다이시 카토가 작성한 책으로, React 환경에서의 다양한 상태 관리 방법과 유명 상태 관리 라이브러리의 사용법을 소개하고 있습니다. 총 3부로 구성되어 있으며, 다음과 같은 내용을 다루고 있습니다.
리액트 훅과 마이크로 상태 관리
리액트 훅을 이용한 마이크로 상태 관리
전역 상태에 대한 기초적인 접근법
지역 상태와 전역 상태 관리 사용하기
리액트 컨텍스트를 이용한 컴포넌트 상태 공유
구독을 이용한 모듈 상태 공유
리액트 컨텍스트와 구독을 이용한 컴포넌트 상태 공유
라이브러리 구현 및 용도
전역 상태 관리 라이브러리 소개
사용 사례 시나리오: Zustand, Jotai, Valtio, React Tracked
세 가지 전역 상태 라이브러리의 유사점과 차이점
책의 분량은 242쪽으로 적당한 편이고, 전역 상태 관리 라이브러리를 사용한 경험이 있는 개발자라면 원활하게 읽을 수 있습니다. 다만 저처럼 Zustand와 Jotai를 직접 사용해 본 적이 없는 경우, 개념을 정리하며 읽는 데 다소 시간이 걸릴 수 있어요. 저는 여유롭게 2일 정도에 걸쳐 읽었고, 이해가 잘 안가는 부분은 ChatGPT 에게 질문을 하면서 읽었습니다.
예제 코드는 React와 TypeScript 환경을 기준으로 작성되어 있고, 코드도 반복 작성된 부분이 많아서 그렇게 어렵지는 않았습니다. 다만, 성능 최적화를 고려한 상태 관리 기법이 포함되어 있어, React의 동작 원리에 대한 이해가 있다면 더욱 깊이 있는 학습이 가능합니다.
그럼 지금부터 각 장에서 인상 깊었던 내용을 정리해보겠습니다.
리액트 훅을 이용한 마이크로 상태 관리
      
    
  
  
    
마이크로 상태 관리의 정의
책에서는 마이크로 상태 관리 에 대한 공식적인 정의를 내리지는 않지만, 내용을 요약하면 다음과 같습니다.
상태 읽기, 상태 갱신, 상태 기반 렌더링을 제공하는 범용적인 상태 관리 기법
정의가 생각보다 간단한데요. 조금 더 쉽게 말하면, 핵심적인 상태 관리 기능만 제공하며, 특정 목적과 환경에 의존하지 않는 상태 관리 기법을 의미합니다.
그렇다면 목적 지향적인 상태 관리는 무엇인가? 라고 생각하는 분이 계실 수도 있을 것 같은데요. 그 예시를 들어보면 다음과 같습니다.
react-hook-form: 특정 목적(폼 처리)을 위해 만들어진 도구
tanstack-query: 외부 상태(서버 캐시)에 의존적인 기능이 포함
로컬 스토리지: 브라우저 환경에 종속된 특수한 요건
위와 같은 상태 관리 기법은 특정 목적과 환경에서 사용하는 것을 가정하고 만들어진 도구이기 때문에, 다른 목적에 사용하기 어렵다는 단점이 있습니다. 반면 이 책에서 다루는 마이크로 상태 관리는 상태 관리의 핵심 기능만을 제공하기 때문에, React 환경이기만 하면 다양한 목적으로 활용할 수 있죠.
지역 상태와 전역 상태 사용하기
      
    
  
  
    
React에서는 데이터를 상태로 저장하죠. 일반적으로 상위 컴포넌트의 상태를 하위 컴포넌트로 넘겨주기도 하지만, 멀리 떨어진 구조의 컴포넌트에서 공통적인 상태가 필요한 경우가 생기기도 합니다. 그래서 지역 상태와 전역 상태를 잘 구분하여 사용하는 것이 중요하다고 이 책은 강조하고 있습니다.
반복 가능한 요소를 컴포넌트로 분리하여 재사용성을 높일 수 있고, 연관 있는 코드를 근처에 두는 방식으로 지역성을 높일 수 있고, 상위 컴포넌트의 데이터는 하위 컴포넌트로 전달 가능한 특성을 이용할 수 있다면 지역 상태를, 그렇지 않은 경우 전역 상태를 사용하는 것이 좋죠.
지역 상태를 효과적으로 사용하기 위해서는 상위 컴포넌트에서 하위 컴포넌트로 Props를 전달하거나 children을 이용하여 컴포넌트를 렌더링하는 방식을 사용할 수 있습니다. 반면 전역 상태를 사용하기 위해서는 React Context API를 이용하거나, 전역 상태 관리 라이브러리를 사용하는 방법이 있습니다.
여기서 이야기하는 전역 상태의 특징은 전역 의 스코프를 별도로 지정 가능하며, 스코프 내에서는 해당 상태가 싱글톤으로 관리되어야 한다는 점을 설명합니다.
리액트 컨텍스트를 이용한 컴포넌트 상태 공유
      
    
  
  
    
React 16 버전부터 제공되는 Context API를 활용하면 컴포넌트 트리의 Provider 하위 노드에 공통 상태를 제공할 수 있게 됩니다. 이를 통해 상태를 전역적으로 관리할 수 있게 되었지만, Context API는 사용 시 불필요한 리렌더가 일어날 수 있다는 단점이 있습니다. 편리하지만 단순히 useContext를 사용하는 것만으로는 성능 최적화가 어렵다는 점을 설명하죠.
구독을 이용한 모듈 상태 공유
      
    
  
  
    
이 파트는 상당히 흥미롭게 읽었는데요, React 코드 외부에 있는 모듈 레벨에서의 JavaScript 변수를 전역 상태로 사용하는 과정이 포함되어 있기 때문입니다.
이렇게 모듈 변수를 전역 상태로 사용하는 경우 React와 연동하는 과정이 필수적인데요. 이를 위해서는 모듈 상태가 변경될 때 React 에서 리렌더가 다시 일어날 수 있도록 구독 모델을 구현해야 하고, 그 원리를 소개하고 있습니다.
직접 사용해본 적은 없지만 어디서 들어본 적은 있는 훅인 React 18의 useSyncExternalStore 이 이런 목적으로 제공되는 것을 알고 나서 더욱 흥미롭게 읽었습니다.
리액트 컨텍스트와 구독을 이용한 상태 공유
      
    
  
  
    
이 파트는 앞에서 다룬 내용을 조합하여, 리액트 컨텍스트와 구독을 이용한 상태 공유 방법을 소개하고 있습니다. Context API는 전역 변수가 영향을 미치는 범위인 스코프를 지정할 수 있는 반면, 상태 변경 시 불필요한 리렌더가 일어나는 단점이 있는데 이를 구독 모델과 결합하여 해결할 수 있다는 점을 설명합니다.
전역 상태 관리 라이브러리 소개
      
    
  
  
    
앞서 언급한 패턴을 이용해, 실제 전역 상태 라이브러리가 어떤 문제를 해결하고자 하는지를 소개합니다.
전역 상태 라이브러리는 크게 읽기와 쓰기 두 가지 관점에서 문제를 해결해야 하는데요. 전역 상태를 읽을 때에는 상태를 효율적으로 읽어오는 방법이 필요하고, 상태를 쓸 때에는 상태를 변경할 때마다 리렌더링이 일어나지 않도록 하는 방법이 필요합니다.
리렌더링 최적화의 핵심은 크게 3가지인데요. 각 방법을 간단히 설명합니다.
선택자 함수 사용: 상태를 받아 상태의 일부를 반환하는 함수를 정의, 어떤 부분을 사용할지 직접 명시하는 방법이므로 수동 최적화
속성 접근 감지: 어떤 속성에 접근했는지를 프로그래밍 언어 수준에서 감지하여 리렌더링 최적화, 이를 위해 프록시(Proxy)를 사용
아톰 사용: 전역 상태를 한 덩어리의 큰 객체로 만들어 구독하는 대신, 더 작은 단위로 세분화하고 이를 구독하는 아톰을 사용
사용 사례 시나리오와 전역 상태 라이브러리의 비교
      
    
  
  
    
이 파트에서는 전역 상태 관리 라이브러리의 다양한 접근 방식을 소개하며, 대표적으로 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스러운 접근 방법에 대해 더 잘 이해할 수 있었습니다.
결과적으로 기존에 단순하게 생각했던 개념을 깊이 탐구할 수 있었으며, 초반의 설명이 후반부와 잘 연결되면서 책의 완성도를 높여주었다는 점이 인상적으로 느껴져서 이 책을 추천하고 싶네요.

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

댓글