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 기타 추가된 기능