리액트 훅을 활용한 마이크로 상태 관리 (리액트 상태 관리의 기본 개념부터 동작 원리와 문제 해결, 렌더링 최적화 기법까지)

다이시카토

저자:다이시카토(DaishiKato)

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



역자:이선협

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



역자:김지은

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

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

01장:리액트훅을이용한마이크로상태관리
기술요구사항
마이크로상태관리이해하기
리액트훅사용하기
__데이터불러오기를위한서스펜스와동시성렌더링
전역상태탐구하기
useState사용하기
__값으로상태갱신하기
__함수로상태갱신하기
__지연초기화
useReducer사용하기
__기본사용법
__베일아웃
__원시값
__지연초기화(init)
useState와useReducer의유사점과차이점
__useReducer를이용한useState구현
__useState를이용한useReducer구현
__초기화함수사용하기
__인라인리듀서사용하기
정리26

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

02장:지역상태와전역상태사용하기
기술요구사항
언제지역상태를사용할까?
__함수와인수
__리액트컴포넌트와props
__지역상태에대한useState이해하기
__지역상태의한계
지역상태를효과적으로사용하는방법
__상태끌어올리기(LiftingStateUp)
__내용끌어올리기(LiftingContentUp)
전역상태사용하기
__전역상태란?
__언제전역상태를사용할까?
정리

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:ReactTracked
기술요구사항
ReactTracked이해하기
useState,useReducer와함께ReactTracked사용하기
__useState와함께ReactTracked사용하기
__useReducer와함께ReactTracked사용하기
ReactRedux와함께ReactTracked사용하기
향후전망
정리

11장:세가지전역상태라이브러리의유사점과차이점
기술요구사항
Zustand와Redux의차이점
__Redux와Zustand를사용한예제
__Redux와Zustand예제비교
Jotai와Recoil을사용하는시점
__Recoil과Jotai예제
__Recoil과Jotai예제비교
Valtio와MobX사용하기
__MobX,Valtio관련예제
__MobX와Valtio예제비교
Zustand,Jotai,Valtio비교하기
정리

★이책에서다루는내용★

마이크로상태관리의개념과구현
지역상태와전역상태의개념과구현
리액트컨텍스트를통한전역상태관리
모듈상태를통한전역상태관리
리렌더링최적화
Zustand,Jotai,Valtio,ReactTracked의사용법과동작원리
여러상태관리라이브러리의장단점비교
요구사항에적합한라이브러리선택방법