리액트훅 인 액션

[1부] 리액트 훅과 동시성 모드 완전 정리

1장 리액트는 진화 중이다
1.1 리액트란 무엇인가
__1.1.1 컴포넌트에서 UI 만들기
__1.1.2 상태와 UI의 동기화
__1.1.3 컴포넌트 유형 이해하기
1.2 리액트의 새 기능
1.3 리액트 훅은 함수 컴포넌트에 상태를 추가할 수 있다
__1.3.1 상태가 있는 함수 컴포넌트: 코드를 더 적게 작성하고, 더 잘 조직화하자
__1.3.2 커스텀 훅: 더 쉬운 코드 재사용
__1.3.3 이미 만들어진, 잘 테스트된 기능을 제공하는 서드파티 훅들
1.4 동시 렌더링과 Suspense를 통한 더 나은 UX
__1.4.1 동시 렌더링
__1.4.2 Suspense
1.5 리액트의 새 코드 공개 채널
1.6 이 책의 대상 독자
1.7 시작하며
1.8 요약

2장 useState 훅으로 컴포넌트 상태 관리하기
2.1 예약 관리 앱 설정하기
__2.1.1 create-react-app으로 앱 뼈대 생성하기
__2.1.2 네 가지 핵심 파일 수정하기
__2.1.3 애플리케이션에 필요한 데이터베이스 파일 추가하기
__2.1.4 페이지 컴포넌트와 UserPicker.js 파일 생성하기
2.2 useState를 사용해 값을 저장하고 사용하며 설정하기
__2.2.1 변수에 새로운 값을 대입해도 UI가 바뀌지 않는다
__2.2.2 useState를 호출하면 값과 갱신 함수를 돌려받는다
__2.2.3 갱신 함수를 호출하면 이전 값이 치환된다
__2.2.4 초깃값으로 함수를 useState에 전달하기
__2.2.5 새 상태를 설정할 때 이전 상태 참조하기
2.3 여러 값을 다루기 위해 useState를 여러 번 호출하기
__2.3.1 드롭다운 리스트를 사용해 상태 설정하기
__2.3.2 체크박스를 사용해 상태 설정하기
2.4 함수 컴포넌트 개념 다시 살펴보기
2.5 요약

3장 useReducer 훅을 사용해 컴포넌트 상태 관리하기
3.1 단일 이벤트에 대한 응답으로 여러 상태 값 갱신하기
__3.1.1 예측할 수 없는 상태 변경으로 사용자 방해하기
__3.1.2 예측 가능한 상태 변경으로 사용자의 집중력 유지하기
3.2 useReducer로 더 복잡한 상태 관리하기
__3.2.1 미리 정의된 액션과 리듀서를 사용해 상태 갱신하기
__3.2.2 BookablesList 컴포넌트를 위한 리듀서 만들기
__3.2.3 useReducer를 사용해 컴포넌트 상태에 접근하고 액션 디스패치하기
3.3 함수를 사용해 초기 상태 생성하기
__3.3.1 WeekPicker 컴포넌트 소개
__3.3.2 날짜와 주를 처리하는 유틸리티 함수 만들기
__3.3.3 컴포넌트의 날짜를 관리하는 리듀서 만들기
__3.3.4 useReducer 훅에게 초기화 함수 전달하기
__3.3.5 WeekPicker를 사용하도록 BookingsPage 변경하기
3.4 useReducer 개념 다시 살펴보기
3.5 요약

4장 부수 효과 활용하기
4.1 간단한 예제를 통해 useEffect API 탐색하기
__4.1.1 매번 렌더링이 일어난 다음에 부수 효과 실행하기
__4.1.2 컴포넌트가 마운트될 때만 효과 실행하기
__4.1.3 함수를 반환해서 부수 효과 정리하기
__4.1.4 의존 관계를 지정해서 효과 실행 시기 제어하기
__4.1.5 useEffect 훅을 호출하는 방법 요약
__4.1.6 useLayoutEffect를 호출해 브라우저가 화면을 다시 그리기 전에 효과를 실행하기
4.2 데이터 읽어오기
__4.2.1 새 db.json 파일 만들기
__4.2.2 JSON 서버 설정하기
__4.2.3 useEffect 훅 안에서 데이터를 읽어오기
__4.2.4 async와 await 사용하기
4.3 BookablesList 컴포넌트가 사용할 데이터 읽어오기
__4.3.1 데이터 적재 과정 살펴보기
__4.3.2 적재 및 오류 상태를 관리하도록 리듀서 변경하기
__4.3.3 데이터를 적재하기 위한 도우미 함수 만들기
__4.3.4 예약 가능 자원 적재하기
4.4 요약

5장 useRef 훅으로 컴포넌트 상태 관리하기
5.1 재렌더링을 촉발하지 않고 상태를 갱신하는 방법
__5.1.1 상태 값을 갱신할 때 useState와 useRef 비교
__5.1.2 useRef 호출하기
5.2 참조객체를 사용해 타이머 ID 저장하기
5.3 DOM 엘리먼트에 대한 참조 유지하기
__5.3.1 이벤트에 응답해 엘리먼트에 포커스 설정하기
__5.3.2 참조객체를 사용해 텍스트 박스 관리하기
5.4 요약

6장 애플리케이션 상태 관리하기
6.1 자식 컴포넌트에게 공유 상태 전달하기
__6.1.1 부모가 자식의 프롭을 설정함으로써 상태를 자식에게 전달하는 방법
__6.1.2 부모 컴포넌트로부터 프롭을 통해 상태 받기
__6.1.3 부모로부터 갱신 함수를 프롭으로 받기
6.2 컴포넌트를 더 작은 조각으로 분리하기
__6.2.1 컴포넌트를 더 큰 앱의 일부분으로 바라보기
__6.2.2 페이지의 UI 안에서 여러 컴포넌트를 조직화하기
__6.2.3 BookableDetails 컴포넌트 만들기
6.3 useReducer로 상태와 디스패치 공유하기
__6.3.1 BookablesView 컴포넌트에서 상태를 관리하기
__6.3.2 리듀서에서 액션 제거하기
__6.3.3 BookablesList 컴포넌트에서 상태와 디스패치 받기
6.4 useState에서 얻은 상태 값과 갱신 함수 공유
__6.4.1 BookablesView 컴포넌트에서 선택된 예약 가능 자원을 관리하기
__6.4.2 BookablesList 컴포넌트에서 예약 가능 자원과 갱신 함수 전달받기
6.5 콜백 함수 재정의를 방지하기 위해 useCallback에게 함수 전달하기
__6.5.1 우리가 프롭들을 통해 전달하는 함수에 의존하기
__6.5.2 useCallback 훅을 사용해 함수의 정체성 유지하기
6.6 요약

7장 useMemo로 상태 관리하기
7.1 “O, shortcake!”라고 외쳐서 요리사의 마음을 아프게 하기
__7.1.1 비용이 많이 드는 알고리즘으로 아나그램 생성하기
__7.1.2 중복 함수 호출을 피하는 방법
7.2 useMemo를 사용해 비용이 많이 드는 함수 호출 메모화하기
7.3 Bookings 페이지의 컴포넌트 구성하기
__7.3.1 useState를 사용해 선택한 예약 가능 자원을 관리하기
__7.3.2 useReducer와 useState를 사용해 선택된 주와 예약 관리하기
7.4 useMemo를 사용해 효율적으로 예약 격자 만들기
__7.4.1 세션과 날짜의 격자 생성
__7.4.2 기존 예약에 대한 조회 생성
__7.4.3 getBookings 데이터 적재 함수 제공하기
__7.4.4 BookingsGrid 컴포넌트를 생성하고 useMemo 호출하기
__7.4.5 useEffect를 사용해 데이터를 읽어올 때 응답의 경합 처리하기
7.5 요약

8장 컨텍스트 API로 상태 관리하기
8.1 컴포넌트 트리의 아주 위쪽에 저장된 상태가 필요한 경우
__8.1.1 페이지가 처음 적재될 때 안내 메시지 표시하기
__8.1.2 방문자가 예약을 선택하면 예약 정보 표시하기
__8.1.3 사용자가 만든 예약에 대해 편집 버튼 표시하기: 문제점
__8.1.4 사용자가 만든 예약에 대해 편집 버튼 표시하기: 해법
8.2 커스텀 프로바이더와 여러 컨텍스트 사용하기
__8.2.1 객체를 컨텍스트 프로바이더의 값으로 설
__8.2.2 커스텀 프로바이더로 상태 옮기기
__8.2.3 여러 컨텍스트 사용하기
__8.2.4 컨텍스트의 디폴트 값 지정하기
8.3 요약

9장 커스텀 훅 만들기
9.1 기능을 커스텀 훅으로 추출하기
__9.1.1 공유할 수 있는 기능 인식하기
__9.1.2 컴포넌트 밖에서 커스텀 훅 정의하기
__9.1.3 커스텀 훅에서 커스텀 훅 호출하기
9.2 훅 규칙 따르기
__9.2.1 최상위 수준에서만 훅을 호출하기
__9.2.2 리액트 함수 안에서만 훅을 호출하기
__9.2.3 훅 규칙을 적용하기 위해 ESLint 플러그인 사용하기
9.3 그 밖의 커스텀 훅 추출 예제
__9.3.1 useWindowSize 훅을 사용해 창 크기 얻기
__9.3.2 useLocalStorage 훅을 사용해 값을 설정하고 읽기
9.4 커스텀 훅을 사용해 컨텍스트 값 소비하기
9.5 커스텀 훅으로 데이터 읽어오기를 캡슐화하기
__9.5.1 useFetch 훅 만들기
__9.5.2 useFetch가 반환하는 데이터, 상태, 오류 값 사용하기
__9.5.3 데이터를 읽어오는 더 특화된 훅 useBookings 만들기
9.6 요약

10장 서드파티 훅 사용하기
10.1 리액트 라우터를 사용해 URL의 상태에 접근하기
__10.1.1 내포시킬 수 있게 경로 설정하기
__10.1.2 Bookables 페이지에 중첩된 경로 추가하기
__10.1.3 useParams 훅을 사용해 URL 파라미터에 접근하기
__10.1.4 useNavigate 훅을 사용해 내비게이션하기
10.2 쿼리 문자열 검색 파라미터를 가져오고 설정하기
__10.2.1 쿼리 문자열에서 검색 파라미터 가져오기
__10.2.2 쿼리 문자열 설정하기
10.3 리액트 쿼리를 사용해 데이터 읽기 스트림라인화하기
__10.3.1 리액트 쿼리 소개
__10.3.2 컴포넌트가 리액트 쿼리 클라이언트에 접근할 수 있게 하기
__10.3.3 useQuery를 사용해 데이터 읽어오기
__10.3.4 쿼리 캐시의 데이터에 접근하는 방법
__10.3.5 useMutation을 사용해 서버 상태 갱신하기
10.4 요약

[2부] Suspense와 오류 경계를 활용해 비동기적으로 컴포넌트와 데이터 적재하기

11장 Suspense로 코드 분할하기
11.1 import 함수를 사용해 코드를 동적으로 임포트하기
__11.1.1 버튼 클릭 시 자바스크립트를 적재하는 웹 페이지 설정하기
__11.1.2 디폴트와 이름 붙인 익스포트 사용하기
__11.1.3 정적 임포트를 사용해 자바스크립트 적재하기
__11.1.4 import 함수를 호출해 자바스크립트를 동적으로 적재하기
11.2 lazy와 Suspense를 사용해 컴포넌트를 동적으로 임포트하기
__11.2.1 lazy 함수를 사용해 컴포넌트를 지연 컴포넌트로 변환하기
__11.2.2 Suspense 컴포넌트를 사용해 폴백 콘텐츠 지정하기
__11.2.3 지연 적재와 Suspense가 어떻게 함께 작동하는지 이해하기
__11.2.4 경로에 따라 앱을 분할하기
11.3 오류 경계를 사용해 오류 잡아내기
__11.3.1 리액트 문서가 제공하는 오류 경계 예제 살펴보기
__11.3.2 우리 자신의 오류 경계 만들기
__11.3.3 오류 복구하기
11.4 요약

12장 데이터 읽어오기와 Suspense 통합하기
12.1 데이터 읽어오기와 Suspense
__12.1.1 프로미스가 상태를 포함하도록 업그레이드하기
__12.1.2 프로미스 상태를 사용해 Suspense 통합하기
__12.1.3 최대한 빨리 데이터 읽어오기
__12.1.4 새 데이터 읽어오기
__12.1.5 오류 복구하기
__12.1.6 리액트 문서 확인하기
12.2 리액트 쿼리와 Suspense, 오류 경계를 함께 사용하는 방법
12.3 Suspense와 함께 이미지 적재하기
__12.3.1 리액트 쿼리와 Suspense를 사용해 이미지 적재 중 폴백 제공하기
__12.3.2 리액트 쿼리를 사용해 이미지나 데이터를 미리 적재하는 방법
12.4 요약

13장 useTransition, useDeferredValue, SuspenseList 연습과 실험
13.1 상태 전환을 더 부드럽게 하기
__13.1.1 useTransition을 사용해 후퇴 상태 피하기
__13.1.2 isPending을 사용해 사용자에게 피드백 제공하기
__13.1.3 공통 컴포넌트와 전환 통합하기
__13.1.4 useDeferredValue로 이전 값 유지하기
13.2 여러 개의 폴백을 관리하기 위해 SuspenseList 사용하기
__13.2.1 여러 소스에서 데이터 얻어서 보여주기
__13.2.2 SuspenseList로 다수의 폴백 제어하기
13.3 리액트 18과 동시성 모드
13.4 요약

한국어판 특별부록 | 예제 앱에 리액트 18 적용을 위한 변경 방법
A.1 package.json 변경
A.2 json 임포트 부분 변경
A.3 애플리케이션 시작 부분 수정
A.4 unstable_ 제거
A.5 라우팅 관련 변경
A.6 SuspenseList 문제 해결(임시변통)
__A.6.1 원서 코드를 그대로 실행하는 방법