Zustand, Jotai, Valtio의 개발자 다이시 카토가 쓴 ‘리액트 훅을 활용한 마이크로 상태 관리’ 후기

작성 : 2024-06-22수정 : 2024-06-22

목차 펼치기

 출처 : 교보문고

출처 : 교보문고

머리말

리액트 상태 관리 라이브러리 중 가볍고 쉬운 사용성을 가지고 있는 Zustand, Jotai, Valtio를 개발한 다이시 카토가 쓴 책을 한글로 번역한 책이다. 처음 이 세 개의 라이브러리를 모두 동일한 사람이 만들었다는 이야기를 들었을 때 놀랐던 기억이 아직 생생하다. 다이시 카토가 쓴 글에 대한 궁금증과 개발자가 들려주는 상태 관리 라이브러리에 대한 이야기가 궁금해서 이 책을 읽게 되었다.


후기

상태를 관리하기 위한 리액트 훅인 useState, useReducer에 대해서 설명하며 이를 통해 지역 상태와 전역 상태를 다루는 방법에 대해 소개한다.

이후 컨텍스트를 이용해서 컴포넌트 간 상태 공유를 구현하기 위한 여러 패턴에 대해 설명해주는데, 이 부분에서 다소 힘들었다. 너무나 당연한 것을 설명하는 듯한 느낌인데 읽는 나는 그렇지 않았다. 컴포넌트 간 상태를 어떻게 정의하고 분리하고 공유해서 사용할 지에 대해서만 고민해봤지 내부 원리에 대해 궁금해하지 않았었기 때문에 더욱 어렵게 느껴졌던 것 같다. 읽어내려가긴 했지만 얼마나 이해하며 읽었는지는 잘 모르겠다. 조금 더 많은 생각을 하게 만든다.

이 패턴들을 기초로 만들어진 Zustand, Jotai, Valito 그리고 React Tracked에 대한 사용 시나리오를 To-Do 리스트를 예시로하여 간단히 보여주고, 각 라이브러리들의 특징을 간단히 비교하는 것으로 책은 마무리 되는데, 이 부분만 읽어도 책의 가치는 충분하다고 생각된다. 여러 상태 관리 라이브러리 중 어떤 것을 사용할 지에 대해 고민한다면 좋은 근거가 되어줄 수 있을 것이다.


책을 읽으며 인상깊었던 내용을 일부 정리해 본다.

  • 기존의 모놀리식 상태 관리에서 리액트 훅이 등장해 UI 컴포넌트에서 로직을 추출하고, 마이크로 상태 관리가 가능해지게 되었다.

  • 전역 상태를 싱글턴과 유사하게 만들 때는 모듈 상태를 사용하며, 컴포넌트 리렌더링을 위해 구독 기능을 사용한다.

  • 전역 상태 설계 시에는 리렌더링 최적화를 고려해야한다.

  • Zustand

    • 모듈 상태를 생성하는 전역 상태 관리 라이브러리

    • 불변 모델

    • Store 기반 (하향식 접근법)

    • 선택자를 사용한 수동 렌더링 최적화

  • Jotai

    • 아톰을 모델로 삼는 전역 상태 관리 라이브러리

    • 불변 모델

    • 컨텍스트 및 구독 패턴 기반

    • 원자 기반 (상향식 접근법)

    • 리액트 지향적 전역 상태를 가지며 자동 리렌더링 최적화

  • Valtio

    • 변경 가능 갱신 모델 기반 전역 상태 관리 라이브러리

    • Proxy 기반

    • 상태 사용 추적 기법 기반 자동 렌더링 최적화

    • 내부 동작을 디버깅 하기 어렵고 예측 가능성이 떨어진다.


리액트 상태 관리에 대해 개괄적으로 설명하며 저자가 고민해서 도출해 낸 결과물들이 잘 드러나 있어 좋았다.

Wanna get in touch?

All Icons byiconiFy