원쌤의 리액트 퀵스타트 with 타입스크립트

이 책의 구성
- 1~2장 개발 환경 설정과 선수 지식 학습
리액트란 무엇인지 소개하고 리액트의 특징과 장점들을 살펴봅니다. 본격적으로 리액트를 학습하기에 앞서 개발 환경을 설정하고 선수 지식인 ES6, 타입스크립트 언어의 기초를 학습합니다.
- 3~4장 리액트 기초
리액트의 JSX, 속성(props), 상태(state)와 같은 기초 지식과 더불어 리액트 컴포넌트를 작성하는 방법과 컴포넌트 사이의 데이터를 전달하는 방법, 이벤트 처리 등과 같은 리액트의 핵심을 학습합니다.
- 5장 리액트 클래스 컴포넌트
이 책은 리액트를 함수 컴포넌트를 중심으로 사용하지만 5장에서는 클래스 컴포넌트를 다룹니다. 클래스 컴포넌트의 생명주기 메서드 활용 방법과 렌더링 최적화에 대해 알아봅니다.
- 6~7장 리액트 훅과 고차 함수
함수 컴포넌트에서 상태와 생명주기 메서드 기능을 사용할 수 있도록 하는 리액트 훅을 학습합니다. 또한 고차 함수의 개념과 사용자 정의 고차 함수를 작성하는 방법, React.memo라는 고차 함수를 이용해 렌더링 성능을 최적화하는 방법을 학습합니다.
- 8장 Context API
Context API를 이용해 속성을 이용하지 않고 필요한 데이터를 자식 컴포넌트에 전달하는 방법을 학습합니다.
- 9~10장 리액트 라우터
리액트 라우터를 이용해 SPA(Single Page Application)를 개발하는 방법을 알아봅니다. 리액트 라우터가 제공하는 다양한 리액트 훅도 함께 다룹니다. 9장을 학습한 후 10장에서는 리액트 라우터가 적용된 SPA 실전 예제를 작성해봅니다.
- 11장 axios를 이용한 HTTP 통신
axios 라이브러리를 이용해 백엔드 API와 통신하는 방법을 학습합니다. 크로스 오리진 문제 해결을 위해 프록시를 설정하는 방법도 함께 다룹니다.
- 12장 리덕스를 이용한 상태 관리
리덕스(redux) 라이브러리를 이용해 애플리케이션 수준의 상태 관리 기법을 리액트 애플리케이션에 적용해봅니다. 특히 redux-thunk, redux-saga와 같은 리덕스 미들웨어를 이용해 비동기 작업을 처리하는 방법을 그림과 함께 자세히 살펴봅니다.
- 13장 리액트 18 더 알아보기
리액트 18에서 추가된 새로운 기능과 훅들을 살펴봅니다.

저자 직강과 함께 하세요.
SSAMZ.com에 이 책을 교재로 하는 유료 동영상 강의가 있습니다.

01장 리액트 소개
_1.1 리액트란?
__1.1.1 전통적인 웹 애플리케이션
__1.1.2 멀티 페이지 애플리케이션
__1.1.3 단일 페이지 애플리케이션
_1.2 리액트의 실행 방식과 특징
__1.2.1 상태 관리와 단방향 데이터 바인딩
__1.2.2 JSX
__1.2.3 컴포넌트 기반의 개발
__1.2.4 가상 DOM의 성능
_1.3 리액트 애플리케이션 작성
_1.4 개발 환경 설정
__1.4.1 Node.js 설치
__1.4.2 Visual Studio Code 설치
__1.4.3 React Developer Tools 설치

02장 ES6와 타입스크립트 기초
_2.1 ES6와 타입스크립트 개요
_2.2 ES6
__2.2.1 ES6를 사용하기 위한 프로젝트 설정
__2.2.2 let과 const
__2.2.3 기본 파라미터와 가변 파라미터
__2.2.4 구조 분해 할당
__2.2.5 화살표 함수
__2.2.6 객체 리터럴
__2.2.7 템플릿 리터럴
__2.2.8 모듈
__2.2.9 프로미스
__2.2.10 전개 연산자
__2.2.11 클래스
_2.3 타입스크립트
__2.3.1 타입스크립트 환경 설정
__2.3.2 타입 지정 방법
__2.3.3 제네릭
__2.3.4 타입 별칭
__2.3.5 유니온 타입
__2.3.6 인터섹션 타입
__2.3.7 열거형
__2.3.8 인터페이스
__2.3.9 타입 추론

03장 리액트 시작하기
_3.1 개발 환경 설정 도구
__3.1.1 CRA 도구
__3.1.2 Vite 도구
_3.2 Hello 애플리케이션 작성
_3.3 CSS 스타일 적용 방법
_3.4 JSX
__3.4.1 JSX 주의 사항 1
__3.4.2 JSX 주의 사항 2
__3.4.3 JSX 주의 사항 3
__3.4.4 JSX 주의 사항 4
__3.4.5 JSX 주의 사항 5
__3.4.6 JSX 적용 예제
_3.5 속성
__3.5.1 속성 정의
__3.5.2 속성 적용 예제
__3.5.3 컴포넌트의 세분화
_3.6 상태
__3.6.1 상태의 초기화

04장 리액트 컴포넌트
_4.1 컴포넌트 스타일 지정
__4.1.1 HTML에서의 스타일 지정
__4.1.2 리액트에서의 스타일 지정
__4.1.3 리액트 인라인 스타일 지정
__4.1.4 CSS 모듈
__4.1.5 styled-components
_4.2 속성의 유효성 검증
__4.2.1 속성의 유효성 검증 방법
__4.2.2 PropTypes를 이용한 유효성 검증
__4.2.3 지정 가능한 유효성 검증 타입
__4.2.4 속성의 기본값 지정
_4.3 리액트 이벤트
__4.3.1 이벤트 적용 방법
__4.3.2 이벤트 아규먼트의 정적 타입
__4.3.3 이벤트 적용 예제 작성
__4.3.4 리액트의 단방향 데이터 바인딩
_4.4 이벤트 핸들러와 상태 변경
_4.5 제어 컴포넌트와 비제어 컴포넌트
__4.5.1 제어 컴포넌트
__4.5.2 비제어 컴포넌트
_4.6 상태 심화
__4.6.1 렌더링 최적화와 불변성
__4.6.2 불변성 라이브러리 immer
_4.7 컨테이너 컴포넌트와 표현 컴포넌트
_4.8 화면 단위 개발 단계
__4.8.1 화면 시안 작성
__4.8.2 상태와 액션 도출
__4.8.3 컴포넌트 분할과 목록 도출
__4.8.4 컴포넌트 정의
__4.8.5 컴포넌트 구현
_4.9 애플리케이션 실습
__4.9.1 화면 시안과 컴포넌트 분할
__4.9.2 컴포넌트 목록 작성
__4.9.3 프로젝트 생성
__4.9.4 컴포넌트 작성
__4.9.5 애플리케이션 실행

05장 리액트 클래스 컴포넌트
_5.1 함수 컴포넌트와 클래스 컴포넌트
_5.2 클래스 컴포넌트 작성 방법
_5.3 간단한 디지털 시계 만들기 예제
_5.4 생명주기 메서드
__5.4.1 컴포넌트가 마운트될 때
__5.4.2 컴포넌트가 업데이트될 때
__5.4.3 컴포넌트가 언마운트될 때
__5.4.4 생명주기 메서드 예제 1
__5.4.5 생명주기 메서드 예제 2
__5.4.6 생명주기 메서드 예제 3
_5.5 가상 DOM과 조정
__5.5.1 가상 DOM과 브라우저 DOM
__5.5.2 key 특성
__5.5.3 생명주기 메서드를 이용한 렌더링 최적화
_5.6 렌더링 최적화 적용
__5.6.1 shouldComponentUpdate 생명주기 메서드 적용
__5.6.2 PureComponent 적용

06장 리액트 훅
_6.1 함수 컴포넌트와 리액트 훅
_6.2 useState 훅
_6.3 useEffect 훅
__6.3.1 컴포넌트가 마운트 및 업데이트될 때
__6.3.2 depsList 지정
__6.3.3 클린업 함수
__6.3.4 useEffect의 장점
__6.3.5 리액트 훅의 생명주기
_6.4 useReducer 훅
__6.4.1 리듀서의 개념
__6.4.2 리듀서 함수
__6.4.3 useReducer 훅 사용하기
_6.5 useRef 훅
__6.5.1 상태가 아닌 데이터 관리
__6.5.2 useRef 훅을 이용해 브라우저 DOM에 접근하기
_6.6 메모이제이션 훅
__6.6.1 테스트 예제 준비
__6.6.2 useMemo 훅 적용
__6.6.3 useCallback 훅 적용
_6.7 사용자 정의 훅

07장 고차 함수와 렌더링 최적화
_7.1 고차 함수란?
_7.2 간단한 고차 함수 예제
_7.3 React.memo 고차 함수
_7.4 React.memo를 이용한 렌더링 성능 최적화
__7.4.1 최적화 이전의 todolist-app
__7.4.2 React.memo 고차 함수 적용
__7.4.3 속성으로 함수를 전달하는 경우
__7.4.4 useCallback 훅 적용
__7.4.5 React.memo의 두 번째 인자 적용
__7.4.6 추가적인 컴포넌트의 분할

08장 Context API
_8.1 Context API란?
_8.2 todolist-app에 Context API 적용하기

09장 리액트 라우터
_9.1 리액트 라우터란?
_9.2 리액트 라우터의 기본 사용법
__9.2.1 예제 프로젝트 생성 및 라우팅 컴포넌트 기초
__9.2.2 기초 예제 작성
_9.3 라우팅된 컴포넌트로 속성 전달하기
__9.3.1 속성을 전달하는 방법
__9.3.2 복잡한 객체를 속성으로 전달하기
_9.4 URI 파라미터 이용
__9.4.1 URI 파라미터란?
__9.4.2 URI 파라미터 적용하기
__9.4.3 클래스 컴포넌트에 URI 파라미터 적용하기
_9.5 중첩 라우트
__9.5.1 중첩 라우트란?
__9.5.2 중첩 라우트 적용하기
__9.5.3 index 라우트 설정
_9.6 리액트 라우터가 제공하는 훅
__9.6.1 useMatch
__9.6.2 useSearchParams
__9.6.3 useNavigate와 useLocation
__9.6.4 useOutletContext
_9.7 라우터 관련 컴포넌트
__9.7.1 Router 컴포넌트
__9.7.2 fallback UI가 없는 웹 서버에서의 에러 확인
__9.7.3 404 라우트와 리디렉션 구성
__9.7.4 NavLink 컴포넌트
_9.8 리액트 라우터와 레이지 로딩 기법
__9.8.1 레이지 로딩이란?
__9.8.2 레이지 로딩 적용 방법
__9.8.3 Suspense 컴포넌트
__9.8.4 레이징 로딩 적용하기

10장 라우팅을 적용한 예제 실습
_10.1 예제 개요
_10.2 프로젝트 생성과 초기화
_10.3 AppContainer 컴포넌트 작성
_10.4 App 컴포넌트 작성
_10.5 Header, Layout, Home, About, NotFound 컴포넌트 작성
_10.6 TodoList, TodoItem 컴포넌트 작성
_10.7 AddTodo 컴포넌트 작성
_10.8 EditTodo 컴포넌트 작성
_10.9 실행 결과 확인

11장 axios를 이용한 HTTP 통신
_11.1 axios란?
_11.2 테스트용 백엔드 API 소개
_11.3 프로젝트 생성과 크로스 오리진 에러 발생
_11.4 크로스 오리진 문제란?
_11.5 크로스 오리진 문제 해결 방법
__11.5.1 CORS
__11.5.2 프록시를 이용한 우회
_11.6 axios 라이브러리 사용법
__11.6.1 Promise와 async/await
__11.6.2 axios 라이브러리 사용 방법
__11.6.3 에러 처리
_11.7 axios 적용하기
__11.7.1 todolist-app-router 프로젝트에 axios 적용하기
__11.7.2 지연 시간에 대한 처리
_11.8 Suspense 적용하기

12장 리덕스를 이용한 상태 관리
_12.1 리액트의 상태 관리 리뷰
_12.2 플럭스 아키텍처와 리덕스
__12.2.1 플럭스
__12.2.2 리덕스 특징
__12.2.3 리덕스 상세 보기
_12.3 리덕스 적용하기
__12.3.1 예제 아키텍처
__12.3.2 프로젝트 설정과 설계
__12.3.3 리덕스 구성 요소 작성
__12.3.4 리덕스 구성 요소를 사용하는 컴포넌트로 변경
__12.3.5 리덕스 툴킷 이용하기
_12.4 다중 리듀서
__12.4.1 다중 리듀서란?
__12.4.2 다중 리듀서 적용
_12.5 리덕스 미들웨어
__12.5.1 리덕스 미들웨어란?
__12.5.2 테스트용 미들웨어 적용하기
__12.5.3 간단한 콘솔 로거 미들웨어
_12.6 redux-thunk 미들웨어
__12.6.1 리덕스와 비동기 처리
__12.6.2 redux-thunk란?
__12.6.3 redux-thunk 적용하기
__12.6.4 redux-thunk와 @reduxjs/toolkit 함께 사용하기
__12.6.5 redux-thunk와 axios를 사용하는 예제
_12.7 redux-saga 미들웨어
__12.7.1 redux-saga란?
__12.7.2 redux-saga를 시작하기 전 알아야 할 것들
__12.7.3 redux-saga 아키텍처
__12.7.4 redux-saga 적용하기
_12.8 react-redux가 제공하는 훅
_12.9 리덕스 개발 도구
__12.9.1 리덕스 개발 도구란?
__12.9.2 리덕스 개발 도구 사용해보기

13장 리액트 18 더 알아보기
_13.1 ReactDOM.createRoot( ) API
_13.2 자동 배치 처리 기능
_13.3 전환 기능
_13.4 지연된 값
_13.5 기타 추가된 기능

원형섭 2001년까지 삼성종합기술원 HCILAB에서 일하다 2001년부터 현재까지 크레듀 멀티캠퍼스(구 삼성 멀티캠퍼스)에서 프로그래밍, 빅데이터, NOSQL 분야 전임 교수로 활동하고 있다. 또한 강의와 병행하여 ㈜오픈에스지에서 수석 컨설턴트로 재직 중이며 삼성중공업, 삼성디스플레이 등에서 프로젝트를 진행하였다. React, Angular, Vue.js 등의 프런트엔드 프레임워크와 Open API, MSA(Micro Service Architecture)에 관심이 많으며 DB에서 백엔드, 프런트엔드까지 섭렵하는 풀스택 개발자를 지향한다. 최근에는 AWS와 같은 클라우드 환경과 컨테이너 기반 기술에 대한 여러 가지 시도를 하고 있으며 현재 챔피언 AWS 공인강사(AAI: AWS Authorized Instructor)로도 활동 중이다.