오전의 밝은 미래

저자(글) 다이시 카토

​

인물정보

소프트웨어공학자

(Daishi Kato)

다이시 카토는 수십 년 동안 P2P 네트워크와 웹 기술에 대해 연구했으며 오픈소스 소프트웨어에 열정을 가진 소프트웨어 엔지니어다. 엔지니어링에 관심이 많으며, 지난 5년 동안은 스타트업에서 일해 왔다. 90년대부터 오픈소스 소프트웨어에 적극적으로 참여해 왔으며, 최근에는 자바스크립트와 리액트를 이용한 다양한 라이브러리 개발에 주력하고 있다.

​

번역 이선협

​

인물정보

프로그래머

프로그래밍을 사랑하는 개발자. 분야를 가리지 않고 코딩하는 것을 즐기며 요즘은 지식을 글로 정리하는 것을 취미로 삼고 있다. 현재 주식회사 코발트에서 CTO로 재직 중이다.

​

번역 김지은

​

인물정보

프로그래머

무언가를 만드는 것을 좋아하고, 호기심이 많은 프런트엔드 개발자. “오늘보다 내일이 더 나은 프로그래머”를 모토로 삼고 있으며, 현재는 웹 프런트엔드와 관련된 일을 하고 있다.

​

목차

[1부] 리액트 훅과 마이크로 상태 관리

​

▣ 01장: 리액트 훅을 이용한 마이크로 상태 관리

기술 요구사항

마이크로 상태 관리 이해하기

리액트 훅 사용하기

__데이터 불러오기를 위한 서스펜스와 동시성 렌더링

전역 상태 탐구하기

useState 사용하기

__값으로 상태 갱신하기

__함수로 상태 갱신하기

__지연 초기화

useReducer 사용하기

__기본 사용법

__베일아웃

__원시 값

__지연 초기화(init)

useState와 useReducer의 유사점과 차이점

__useReducer를 이용한 useState 구현

__useState를 이용한 useReducer 구현

__초기화 함수 사용하기

__인라인 리듀서 사용하기

정리 26

​

[02부] 전역 상태에 대한 기초적인 접근법

​

▣ 02장: 지역 상태와 전역 상태 사용하기

기술 요구사항

언제 지역 상태를 사용할까?

__함수와 인수

__리액트 컴포넌트와 props

__지역 상태에 대한 useState 이해하기

__지역 상태의 한계

지역 상태를 효과적으로 사용하는 방법

__상태 끌어올리기(Lifting State Up)

__내용 끌어올리기(Lifting Content Up)

전역 상태 사용하기

__전역 상태란?

__언제 전역 상태를 사용할까?

정리

​

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

기술 요구사항

useState와 useContext 탐구하기

__useContext 없이 useState 사용하기

__정적 값을 이용해 useContext 사용하기

__useContext와 함께 useState 사용하기

컨텍스트 이해하기

__컨텍스트 전파의 작동 방식

__컨텍스트에 객체를 사용할 때의 한계점

전역 상태를 위한 컨텍스트 만들기

__작은 상태 조각 만들기

useReducer로 하나의 상태를 만들고 여러 개의 컨텍스트로 전파하기

컨텍스트 사용을 위한 모범 사례

__사용자 정의 훅과 공급자 컴포넌트 만들기

__사용자 정의 훅이 있는 팩토리 패턴

reduceRight를 이용한 공급자 중첩 방지

정리

​

▣ 04장: 구독을 이용한 모듈 상태 공유

기술 요구사항

모듈 상태 살펴보기

리액트에서 전역 상태를 다루기 위한 모듈 상태 사용법

기초적인 구독 추가하기

선택자와 useSubscription 사용하기

정리

​

▣ 05장: 리액트 컨텍스트와 구독을 이용한 컴포넌트 상태 공유

기술 요구사항

모듈 상태의 한계

컨텍스트 사용이 필요한 시점

컨텍스트와 구독 패턴 사용하기

정리

​

[03부] 라이브러리 구현 및 용도

​

▣ 06장: 전역 상태 관리 라이브러리 소개

기술 요구사항

전역 상태 관리 문제 해결하기

데이터 중심 접근 방식과 컴포넌트 중심 접근 방식 사용하기

__데이터 중심 접근 방식 이해하기

__컴포넌트 중심 접근 방식 이해하기

두 접근 방식의 예외

리렌더링 최적화

__선택자 함수 사용

__속성 접근 감지

__아톰 사용

정리

​

▣ 07장: 사용 사례 시나리오 1: Zustand

기술 요구사항

모듈 상태와 불변 상태 이해하기

리액트 훅을 이용한 리렌더링 최적화

읽기 상태와 갱신 상태 사용하기

구조화된 데이터 처리하기

이 접근 방식과 라이브러리의 장단점

정리

​

▣ 08장: 사용 사례 시나리오 2: Jotai

기술 요구사항

Jotai 이해하기

__구문 단순성

__동적 아톰 생성

렌더링 최적화

Jotai가 아톰 값을 저장하는 방식 이해하기

배열 구조 추가하기

Jotai의 다양한 기능 사용하기

__아톰의 write 함수 정의하기

__액션 아톰 사용하기

__아톰의 onMount 옵션 이해하기

__jotai/utils 번들 소개하기

__라이브러리 사용법 이해하기

__고급 기능 소개

정리

​

▣ 09장: 사용 사례 시나리오 3: Valtio

기술 요구사항

또 다른 모듈 상태 라이브러리인 Valtio 살펴보기

프락시를 활용한 변경 감지 및 불변 상태 생성하기

프락시를 활용한 리렌더링 최적화

작은 애플리케이션 만들어 보기

이 접근 방식의 장단점

정리

​

▣ 10장: 사용 사례 시나리오 4: React Tracked

기술 요구사항

React Tracked 이해하기

useState, useReducer와 함께 React Tracked 사용하기

__useState와 함께 React Tracked 사용하기

__useReducer와 함께 React Tracked 사용하기

React Redux와 함께 React Tracked 사용하기

향후 전망

정리

​

▣ 11장: 세 가지 전역 상태 라이브러리의 유사점과 차이점

기술 요구사항

Zustand와 Redux의 차이점

__Redux와 Zustand를 사용한 예제

__Redux와 Zustand 예제 비교

Jotai와 Recoil 을 사용하는 시점

__Recoil과 Jotai 예제

__Recoil과 Jotai 예제 비교

Valtio와 MobX 사용하기

__MobX, Valtio 관련 예제

__MobX와 Valtio 예제 비교

Zustand, Jotai, Valtio 비교하기

정리

​

그럼 이상으로 리액트 훅을 활용한 마이크로 상태 관리 책 포스팅을 마치겠습니다.

리액트 훅을 활용한 마이크로 상태 관리 책 포스팅은 제휴마케팅이 포함되어있습니다.