모던 리액트 프로그래밍

1장 리액트 들어가기
- 리액트란?
- 단일 페이지 애플리케이션
- 사용자 인터페이스 라이브러리
- 함수형 컴포넌트
- 자바스크립트 함수형 프로그래밍
- 가상 DOM과 동시성 렌더링
- 리액트 프로젝트 생성

2장 JSX 컴포넌트
- JSX 컴포넌트 개요
- JSX 구문
- 속성
- 클래스 컴포넌트
- 실습 1: 컴포넌트 식별 및 분할
- 실습 2: 주문 관리 시스템 메인 컴포넌트 생성

3장 스타일
- CSS 셀렉터
- 인라인 스타일
- CSS 모듈
- 이모션
- 스타일 컴포넌트
- 실습 3: 할 일 관리 프로그램 스타일링
- 실습 4: 주문 관리 시스템 스타일링

4장 상태와 이벤트, 라우터
- 클래스 컴포넌트 상태와 이벤트
- 함수 컴포넌트 상태와 useState() 훅
- 입력 폼과 useRef() 훅
- 목록 및 조건부 컨텐츠 렌더링
- 실습 5: 할 일 추가, 변경, 삭제
- 리액트 라우터
- 실습 6: 고객 관리 컴포넌트 구현과 라우팅

5장 이펙트, 컨텍스트, 리듀서
- useEffect() 훅
- 실습7: 할 일 관리 REST API 사용
- 실습 8: 고객 관리 REST API 사용
- useContext() 훅
- 실습 9: 할 일 관리 컨텍스트 사용
- 실습 10: 고객 컴포넌트 컨텍스트 사용
- useReducer() 훅
- 실습 11: 할 일 관리 리듀서 사용
- 실습 12: 고객 컴포넌트 리듀서 사용

6장 커스텀 훅과 최신 리액트
- 커스텀 훅
- 실습 13: 할 일 관리 커스텀 훅 구현
- 실습 14: 고객 컴포넌트 커스텀 훅 사용
- 리액트 포털
- 새로운 리액트 기능

7장 타입스크립트 마이그레이션
- 타입스크립트 개요
- 리액트 타입스크립트
- 기존 프로젝트 마이그레이션
- 실습 15: 주문 관리 예제 시스템 마이그레이션

8장 리액트 리덕스
- 리덕스
- 리액트 리덕스
- 액션 생성
- 리듀서 생성
- 비동기 미들웨어
- 리덕스 슬라이스
- 실습 16: 할 일 관리 애플리케이션 리액트 리덕스 적용
- 실습 17: 비동기 처리
- RTK 질의
- 실습 18: 할 일 관리 애플리케이션 RTK 질의 적용
- 실습 19: 고객 컴포넌트 RTK 질의 적용
- 리액트 질의와 SWR

9장 GraphQL 클라이언트
- GraphQL 개요
- GraphQL 질의 구문
- GraphQL 질의 구현
- 아폴로 클라이언트 질의
- 실습 20: 고객 컴포넌트 GraphQL 질의

10장 넥스트 들어가기
- 페이지 라우터와 앱 라우터
- 라우팅
- 렌더링
- 데이터 가져오기
- API 라우트와 라우트 핸들러
- 넥스트 프로젝트 생성

11장 페이지 라우터
- 파일 시스템 기반 라우팅
- 서버 측 렌더링
- 정적 사이트 생성
- 클라이언트 측 렌더링
- API 라우트
- 데이터베이스 액세스
- 실습 21: 고객 관리 구현
- 실습 22: 제품 및 재고 관리 구현
- 실습 23: 주문 관리 구현

12장 앱 라우터
- 앱 라우팅
- 리액트 서버 컴포넌트
- 클라이언트 컴포넌트
- 라우트 핸들러
- 실습 24: 고객 관리 구현
- 실습 25: 제품 및 재고 관리 구현
- 실습 26: 주문 관리 구현

13장 Tailwind CSS
- Tailwind CSS 개요
- 텍스트
- 사각형
- 레이아웃
- 실습 27: Tailwind CSS 적용

14장 인증과 세션
- 웹 애플리케이션 인증
- JWT 인증
- OAuth2 인증
- 실습 28: 주문 관리 예제 시스템 JWT 인증 구현

리액트 프로그래밍에 자바스크립트와 타입스크립트 등 두 개의 프로그래밍 언어를 사용할 수 있다. 원래 리액트 라이브러리는 자바스크립트 언어를 주로 지원하였지만, 최근에 리액트가 리액트 프레임워크로서 넥스트와 함께 사용되도록 변경되면서 타입스크립트 언어 사용이 더욱 확산되고 있다. 넥스트는 1차 언어로 타입스트립트를 사용하고 2차 언어로 자바스크립트를 지원한다. 자바스크립트는 이미 보편적으로 많이 사용되고 있기 때문에 처음 리액트를 시작할 때 타입스크립트보다는 접근하기 용이하다는 이점을 갖는다.
또한 넥스트가 리액트 프레임워크로서 함께 사용되도록 변경되었기 때문에 넥스트 프레임워크가 제공하는 기능도 함께 알아야 한다. 하지만 처음에 시작할 때 리액트와 넥스트 프레임워크를 함께 학습하는 것보다는 리액트를 먼저 학습하여 리액트에 대한 지식을 기반으로 넥스트 프레임워크를 학습하는 것이 이해하기 훨씬 더 쉽다.
따라서 이 책에서는 먼저 주로 자바스크립트 언어로 리액트 프로그래밍을 학습하고, 그 다음에 자바스크립트 언어로 작성된 리액트 프로그램을 타입스크립트 언어를 사용하도록 마이그레이션한 후에 타입스크립트 언어로 넥스트 프레임워크를 학습하는 투 트랙 접근 방식을 취하였다.
이 책은 리액트와 넥스트 프로그래밍 기술과 기법에 집중한다. 특별히 넥스트는 프레임워크로 막후에서 빌드와 컴파일 등과 같은 리액트에 필요한 도구를 자동적으로 설정함으로써 개발자들이 설정에 시간을 들이지 않고 애플리케이션을 개발하는데 집중할 수 있게 한다. 따라서 컴파일러나 번들링 도구를 설정하는데 관심을 기울이기 보다는, 이러한 설정은 넥스트 프레임워크에 맡겨두고 우리는 넥스트 프레임워크와 함께 리액트 애플리케이션을 개발하는 기법에 대해 집중하는 것이 바람직하다.
이 책에서 설명하는 리액트와 넥스트 프로그래밍 기술 요소는 실제로 실무에서 사용되는 것으로 선택하였다. 무조건 이해하기 쉽도록 가벼운 내용만 설명하는 것이 아니라, 조금은 이해하기 어렵더라도 실무에서 활용할 수 있는 것은 최선을 다해 이해하기 쉽도록 코드와 함께 설명하였다.
또한 이 책은 개념적으로만 리액트 프로그래밍을 설명하지 않는다. 실제로 동작하는 프로그램을 작은 것에서부터 실제로 만들어가면서 작동하는 코드로 리액트 프로그래밍에 사용되는 기술과 기법을 설명한다. 그리고 온라인 주문 관리 예제 시스템을 구축하는 과정이 포함된 28개의 실습을 통해서 여러분들이 리액트를 사용하여 실무 수준의 애플리케이션을 구현하는 경험을 가질 수 있도록 하였다.