원쌤의 리액트 퀵스타트 with 타입스크립트-프런트엔드 개발자가 무조건 알아야 하는 리액트 제대로 배우기

원쌤에게 제대로 배우는 리액트 with 타입스크립트 정적인 데이터 형식을 지원하는 타입스크립트의 언어적 특성이 개발 생산성과 코드 안정성을 높이는 데 어떻게 적용되는지 타입스크립트의 주요 개념을 먼저 살펴봅니다. 그리고 리액트의 기능과 요소들이 필요한 이유를 설명해 리액트의 기초를 탄탄하게 잡습니다. 유튜브 플레이리스트를 만들어보며 리액트의 고급 기술까지 제대로 익히고, 끝에는 리액트 18에 새롭게 추가된 훅과 기능들을 알아봅니다.

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