Zustand, Jotai, Valtio의 개발자 다이시 카토가 쓴 ‘리액트 훅을 활용한 마이크로 상태 관리’ 후기
목차 펼치기
![출처 : 교보문고](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fcdcaa3df-6008-4ecb-a15d-f84112c6e0c5%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123052Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D4c725d09eb2a6a2307d280c50dcf0b4e9fdea0b4e6c489013411e274466939ad%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=91706c22-bea0-47c4-9c20-606f71a919e4&cache=v2)
출처 : 교보문고
머리말
머리말
리액트 상태 관리 라이브러리 중 가볍고 쉬운 사용성을 가지고 있는 Zustand, Jotai, Valtio를 개발한 다이시 카토가 쓴 책을 한글로 번역한 책이다. 처음 이 세 개의 라이브러리를 모두 동일한 사람이 만들었다는 이야기를 들었을 때 놀랐던 기억이 아직 생생하다. 다이시 카토가 쓴 글에 대한 궁금증과 개발자가 들려주는 상태 관리 라이브러리에 대한 이야기가 궁금해서 이 책을 읽게 되었다.
후기
후기
상태를 관리하기 위한 리액트 훅인 useState, useReducer에 대해서 설명하며 이를 통해 지역 상태와 전역 상태를 다루는 방법에 대해 소개한다.
이후 컨텍스트를 이용해서 컴포넌트 간 상태 공유를 구현하기 위한 여러 패턴에 대해 설명해주는데, 이 부분에서 다소 힘들었다. 너무나 당연한 것을 설명하는 듯한 느낌인데 읽는 나는 그렇지 않았다. 컴포넌트 간 상태를 어떻게 정의하고 분리하고 공유해서 사용할 지에 대해서만 고민해봤지 내부 원리에 대해 궁금해하지 않았었기 때문에 더욱 어렵게 느껴졌던 것 같다. 읽어내려가긴 했지만 얼마나 이해하며 읽었는지는 잘 모르겠다. 조금 더 많은 생각을 하게 만든다.
이 패턴들을 기초로 만들어진 Zustand, Jotai, Valito 그리고 React Tracked에 대한 사용 시나리오를 To-Do 리스트를 예시로하여 간단히 보여주고, 각 라이브러리들의 특징을 간단히 비교하는 것으로 책은 마무리 되는데, 이 부분만 읽어도 책의 가치는 충분하다고 생각된다. 여러 상태 관리 라이브러리 중 어떤 것을 사용할 지에 대해 고민한다면 좋은 근거가 되어줄 수 있을 것이다.
책을 읽으며 인상깊었던 내용을 일부 정리해 본다.
기존의 모놀리식 상태 관리에서 리액트 훅이 등장해 UI 컴포넌트에서 로직을 추출하고, 마이크로 상태 관리가 가능해지게 되었다.
전역 상태를 싱글턴과 유사하게 만들 때는 모듈 상태를 사용하며, 컴포넌트 리렌더링을 위해 구독 기능을 사용한다.
전역 상태 설계 시에는 리렌더링 최적화를 고려해야한다.
Zustand
모듈 상태를 생성하는 전역 상태 관리 라이브러리
불변 모델
Store 기반 (하향식 접근법)
선택자를 사용한 수동 렌더링 최적화
Jotai
아톰을 모델로 삼는 전역 상태 관리 라이브러리
불변 모델
컨텍스트 및 구독 패턴 기반
원자 기반 (상향식 접근법)
리액트 지향적 전역 상태를 가지며 자동 리렌더링 최적화
Valtio
변경 가능 갱신 모델 기반 전역 상태 관리 라이브러리
Proxy 기반
상태 사용 추적 기법 기반 자동 렌더링 최적화
내부 동작을 디버깅 하기 어렵고 예측 가능성이 떨어진다.
리액트 상태 관리에 대해 개괄적으로 설명하며 저자가 고민해서 도출해 낸 결과물들이 잘 드러나 있어 좋았다.