[목 차]

1장 리액트 시작
__1.1 왜 리액트인가?
____1.1.1 리액트 이해
__1.2 리액트의 특징
____1.2.1 Virtual DOM
____1.2.2 기타 특징
__1.3 작업 환경 설정
____1.3.1 Node.js와 npm
____1.3.2 yarn
____1.3.3 에디터 설치
____1.3.4 Git 설치
____1.3.5 create-react-app으로 프로젝트 생성하기

2장 JSX
__2.1 코드 이해하기
__2.2 JSX란?
__2.3 JSX의 장점
____2.3.1 보기 쉽고 익숙하다
____2.3.2 더욱 높은 활용도
__2.4 JSX 문법
____2.4.1 감싸인 요소
____2.4.2 자바스크립트 표현
____2.4.3 If 문 대신 조건부 연산자
____2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링
____2.4.5 undefined를 렌더링하지 않기
____2.4.6 인라인 스타일링
____2.4.7 class 대신 className
____2.4.8 꼭 닫아야 하는 태그
____2.4.9 주석
__2.5 ESLint와 Prettier 적용하기
____2.5.1 ESLint
____2.5.2 Prettier
__2.6 정리

3장 컴포넌트
__3.1 클래스형 컴포넌트
__3.2 첫 컴포넌트 생성
____3.2.1 src 디렉터리에 MyComponent.js 파일 생성
____3.2.2 코드 작성하기
____3.2.3 모듈 내보내기 및 불러오기
__3.3 props
____3.3.1 JSX 내부에서 props 렌더링
____3.3.2 컴포넌트를 사용할 때 props 값 지정하기
____3.3.3 props 기본값 설정: defaultProps
____3.3.4 태그 사이의 내용을 보여 주는 children
____3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기
____3.3.6 propTypes를 통한 props 검증
____3.3.7 클래스형 컴포넌트에서 props 사용하기
__3.4 state
____3.4.1 클래스형 컴포넌트의 state
____3.4.2 함수형 컴포넌트에서 useState 사용하기
__3.5 state를 사용할 때 주의 사항
__3.6 정리

4장 이벤트 핸들링
__4.1 리액트의 이벤트 시스템
____4.1.1 이벤트를 사용할 때 주의 사항
____4.1.2 이벤트 종류
__4.2 예제로 이벤트 핸들링 익히기
____4.2.1 컴포넌트 생성 및 불러오기
____4.2.2 onChange 이벤트 핸들링하기
____4.2.3 임의 메서드 만들기
____4.2.4 input 여러 개 다루기
____4.2.5 onKeyPress 이벤트 핸들링
__4.3 함수형 컴포넌트로 구현해 보기
__4.4 정리

5장 ref: DOM에 이름 달기
__5.1 ref는 어떤 상황에서 사용해야 할까?
____5.1.1 예제 컴포넌트 생성
____5.1.2 App 컴포넌트에서 예제 컴포넌트 렌더링
____5.1.3 DOM을 꼭 사용해야 하는 상황
__5.2 ref 사용
____5.2.1 콜백 함수를 통한 ref 설정
____5.2.2 createRef를 통한 ref 설정
____5.2.3 적용
__5.3 컴포넌트에 ref 달기
____5.3.1 사용법
____5.3.2 컴포넌트 초기 설정
____5.3.3 컴포넌트에 메서드 생성
____5.3.4 컴포넌트에 ref 달고 내부 메서드 사용
__5.4 정리

6장 컴포넌트 반복
__6.1 자바스크립트 배열의 map() 함수
____6.1.1 문법
____6.1.2 예제
__6.2 데이터 배열을 컴포넌트 배열로 변환하기
____6.2.1 컴포넌트 수정하기
____6.2.2 App 컴포넌트에서 예제 컴포넌트 렌더링
__6.3 key
____6.3.1 key 설정
__6.4 응용
____6.4.1 초기 상태 설정하기
____6.4.2 데이터 추가 기능 구현하기
____6.4.3 데이터 제거 기능 구현하기
__6.5 정리

7장 컴포넌트의 라이프사이클 메서드
__7.1 라이프사이클 메서드의 이해
__7.2 라이프사이클 메서드 살펴보기
____7.2.1 render( ) 함수
____7.2.2 constructor 메서드
____7.2.3 getDerivedStateFromProps 메서드
____7.2.4 componentDidMount 메서드
____7.2.5 shouldComponentUpdate 메서드
____7.2.6 getSnapshotBeforeUpdate 메서드
____7.2.7 componentDidUpdate 메서드
____7.2.8 componentWillUnmount 메서드
____7.2.9 componentDidCatch 메서드
__7.3 라이프사이클 메서드 사용하기
____7.3.1 예제 컴포넌트 생성
____7.3.2 App 컴포넌트에서 예제 컴포넌트 사용
____7.3.3 에러 잡아내기
__7.4 정리

8장 Hooks
__8.1 useState
____8.1.1 useState를 여러 번 사용하기
__8.2 useEffect
____8.2.1 마운트될 때만 실행하고 싶을 때
____8.2.2 특정 값이 업데이트될 때만 실행하고 싶을 때
____8.2.3 뒷정리하기
__8.3 useReducer
____8.3.1 카운터 구현하기
____8.3.2 인풋 상태 관리하기
__8.4 useMemo
__8.5 useCallback
__8.6 useRef
____8.6.1 로컬 변수 사용하기
__8.7 커스텀 Hooks 만들기
__8.8 다른 Hooks
__8.9 정리

9장 컴포넌트 스타일링
__9.1 가장 흔한 방식, 일반 CSS
____9.1.1 이름 짓는 규칙
____9.1.2 CSS Selector
__9.2 Sass 사용하기
____9.2.1 utils 함수 분리하기
____9.2.2 sass-loader 설정 커스터마이징하기
____9.2.3 node_modules에서 라이브러리 불러오기
__9.3 CSS Module
____9.3.1 classnames
____9.3.2 Sass와 함께 사용하기
____9.3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기
__9.4 styled-components
____9.4.1 Tagged 템플릿 리터럴
____9.4.2 스타일링된 엘리먼트 만들기
____9.4.3 스타일에서 props 조회하기
____9.4.4 props에 따른 조건부 스타일링
____9.4.5 반응형 디자인
__9.5 정리

10장 일정 관리 웹 애플리케이션 만들기
__10.1 프로젝트 준비하기
____10.1.1 프로젝트 생성 및 필요한 라이브러리 설치
____10.1.2 Prettier 설정
____10.1.3 index.css 수정
____10.1.4 App 컴포넌트 초기화
__10.2 UI 구성하기
____10.2.1 TodoTemplate 만들기
____10.2.2 TodoInsert 만들기
____10.2.3 TodoListItem과 TodoList 만들기
__10.3 기능 구현하기
____10.3.1 App에서 todos 상태 사용하기
____10.3.2 항목 추가 기능 구현하기
____10.3.3 지우기 기능 구현하기
____10.3.4 수정 기능
__10.4 정리

11장 컴포넌트 성능 최적화
__11.1 많은 데이터 렌더링하기
__11.2 크롬 개발자 도구를 통한 성능 모니터링
__11.3 느려지는 원인 분석
__11.4 React.memo를 사용하여 컴포넌트 성능 최적화
__11.5 onToggle, onRemove 함수가 바뀌지 않게 하기
____11.5.1 useState의 함수형 업데이트
____11.5.2 useReducer 사용하기
__11.6 불변성의 중요성
__11.7 TodoList 컴포넌트 최적화하기
__11.8 react-virtualized를 사용한 렌더링 최적화
____11.8.1 최적화 준비
____11.8.2 TodoList 수정
____11.8.3 TodoListItem 수정
__11.9 정리

12장 immer를 사용하여 더 쉽게 불변성 유지하기
__12.1 immer를 설치하고 사용법 알아보기
____12.1.1 프로젝트 준비
____12.1.2 immer를 사용하지 않고 불변성 유지
____12.1.3 immer 사용법
____12.1.4 App 컴포넌트에 immer 적용하기
____12.1.5 useState의 함수형 업데이트와 immer 함께 쓰기
__12.2 정리

13장 리액트 라우터로 SPA 개발하기
__13.1 SPA란?
____13.1.1 SPA의 단점
__13.2 프로젝트 준비 및 기본적인 사용법
____13.2.1 프로젝트 생성 및 라이브러리 설치
____13.2.2 프로젝트에 라우터 적용
____13.2.3 페이지 만들기
____13.2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결
____13.2.5 Link 컴포넌트를 사용하여 다른 주소로 이동하기
__13.3 Route 하나에 여러 개의 path 설정하기
__13.4 URL 파라미터와 쿼리
____13.4.1 URL 파라미터
____13.4.2 URL 쿼리
__13.5 서브 라우트
__13.6 리액트 라우터 부가 기능
____13.6.1 history
____13.6.2 withRouter
____13.6.3 Switch
____13.6.4 NavLink
__13.7 정리

14장 외부 API를 연동하여 뉴스 뷰어 만들기
__14.1 비동기 작업의 이해
____14.1.1 콜백 함수
____14.1.2 Promise
____14.1.3 async/await
__14.2 axios로 API 호출해서 데이터 받아 오기
__14.3 newsapi API 키 발급받기
__14.4 뉴스 뷰어 UI 만들기
____14.4.1 NewsItem 만들기
____14.4.2 NewsList 만들기
__14.5 데이터 연동하기
__14.6 카테고리 기능 구현하기
____14.6.1 카테고리 선택 UI 만들기
____14.6.2 API를 호출할 때 카테고리 지정하기
__14.7 리액트 라우터 적용하기
____14.7.1 리액트 라우터의 설치 및 적용
____14.7.2 NewsPage 생성
____14.7.3 Categories에서 NavLink 사용하기
__14.8 usePromise 커스텀 Hook 만들기
__14.9 정리

15장 Context API
__15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기
__15.2 Context API 사용법 익히기
____15.2.1 새 Context 만들기
____15.2.2 Consumer 사용하기
____15.2.3 Provider
__15.3 동적 Context 사용하기
____15.3.1 Context 파일 수정하기
____15.3.2 새로워진 Context를 프로젝트에 반영하기
____15.3.3 색상 선택 컴포넌트 만들기
__15.4 Consumer 대신 Hook 또는 static contextType 사용하기
____15.4.1 useContext Hook 사용하기
____15.4.2 static contextType 사용하기
__15.5 정리

16장 리덕스 라이브러리 이해하기
__16.1 개념 미리 정리하기
____16.1.1 액션
____16.1.2 액션 생성 함수
____16.1.3 리듀서
____16.1.4 스토어
____16.1.5 디스패치
____16.1.6 구독
__16.2 리액트 없이 쓰는 리덕스
____16.2.1 Parcel로 프로젝트 만들기
____16.2.2 간단한 UI 구성하기
____16.2.3 DOM 레퍼런스 만들기
____16.2.4 액션 타입과 액션 생성 함수 정의
____16.2.5 초깃값 설정
____16.2.6 리듀서 함수 정의
____16.2.7 스토어 만들기
____16.2.8 render 함수 만들기
____16.2.9 구독하기
____16.2.10 액션 발생시키기
__16.3 리덕스의 세 가지 규칙
____16.3.1 단일 스토어
____16.3.2 읽기 전용 상태
____16.3.3 리듀서는 순수한 함수
__16.4 정리

17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기
__17.1 작업 환경 설정
__17.2 UI 준비하기
____17.2.1 카운터 컴포넌트 만들기
____17.2.2 할 일 목록 컴포넌트 만들기
__17.3 리덕스 관련 코드 작성하기
____17.3.1 counter 모듈 작성하기
____17.3.2 todos 모듈 만들기
____17.3.3 루트 리듀서 만들기
__17.4 리액트 애플리케이션에 리덕스 적용하기
____17.4.1 스토어 만들기
____17.4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기
____17.4.3 Redux DevTools의 설치 및 적용
__17.5 컨테이너 컴포넌트 만들기
____17.5.1 CounterContainer 만들기
____17.5.2 TodosContainer 만들기
__17.6 리덕스 더 편하게 사용하기
____17.6.1 redux-actions
____17.6.2 immer
__17.7 Hooks를 사용하여 컨테이너 컴포넌트 만들기
____17.7.1 useSelector로 상태 조회하기
____17.7.2 useDispatch를 사용하여 액션 디스패치하기
____17.7.3 useStore를 사용하여 리덕스 스토어 사용하기
____17.7.4 TodosContainer를 Hooks로 전환하기
____17.7.5 useActions 유틸 Hook을 만들어서 사용하기
____17.7.6 connect 함수와의 주요 차이점
__17.8 정리

18장 리덕스 미들웨어를 통한 비동기 작업 관리
__18.1 작업 환경 준비
__18.2 미들웨어란?
____18.2.1 미들웨어 만들기
____18.2.2 redux-logger 사용하기
__18.3 비동기 작업을 처리하는 미들웨어 사용
____18.3.1 redux-thunk
____18.3.2 redux-saga
__18.4 정리

19장 코드 스플리팅
__19.1 자바스크립트 함수 비동기 로딩
__19.2 React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅
____19.2.1 state를 사용한 코드 스플리팅
____19.2.2 React.lazy와 Suspense 사용하기
____19.2.3 Loadable Components를 통한 코드 스플리팅
__19.3 정리

20장 서버 사이드 렌더링
__20.1 서버 사이드 렌더링의 이해
____20.1.1 서버 사이드 렌더링의 장점
____20.1.2 서버 사이드 렌더링의 단점
____20.1.3 서버 사이드 렌더링과 코드 스플리팅 충돌
__20.2 프로젝트 준비하기
____20.2.1 컴포넌트 만들기
____20.2.2 페이지 컴포넌트 만들기
__20.3 서버 사이드 렌더링 구현하기
____20.3.1 서버 사이드 렌더링용 엔트리 만들기
____20.3.2 서버 사이드 렌더링 전용 웹팩 환경 설정 작성하기
____20.3.3 빌드 스크립트 작성하기
____20.3.4 서버 코드 작성하기
____20.3.5 정적 파일 제공하기
__20.4 데이터 로딩
____20.4.1 redux-thunk 코드 준비하기
____20.4.2 Users, UsersContainer 컴포넌트 준비하기
____20.4.3 PreloadContext 만들기
____20.4.4 서버에서 리덕스 설정 및 PreloadContext 사용하기
____20.4.5 스크립트로 스토어 초기 상태 주입하기
____20.4.6 redux-saga 코드 준비하기
____20.4.7 User, UserContainer 컴포넌트 준비하기
____20.4.8 redux-saga를 위한 서버 사이드 렌더링 작업
____20.4.9 usePreloader Hook 만들어서 사용하기
__20.5 서버 사이드 렌더링과 코드 스플리팅
____20.5.1 라우트 컴포넌트 스플리팅하기
____20.5.2 웹팩과 babel 플러그인 적용
____20.5.3 필요한 청크 파일 경로 추출하기
____20.5.4 loadableReady와 hydrate
__20.6 서버 사이드 렌더링의 환경 구축을 위한 대안
____20.6.1 Next.js
____20.6.2 Razzle
__20.7 정리

21장 백엔드 프로그래밍: Node.js의 Koa 프레임워크
__21.1 소개하기
____21.1.1 백엔드
____21.1.2 Node.js
____21.1.3 Koa
__21.2 작업 환경 준비
____21.2.1 Node 설치 확인
____21.2.2 프로젝트 생성
____21.2.3 ESLint와 Prettier 설정
__21.3 Koa 기본 사용법
____21.3.1 서버 띄우기
____21.3.2 미들웨어
__21.4 nodemon 사용하기
__21.5 koa-router 사용하기
____21.5.1 기본 사용법
____21.5.2 라우트 파라미터와 쿼리
____21.5.3 REST API
____21.5.4 라우트 모듈화
____21.5.5 posts 라우트 생성
__21.6 정리

22장 mongoose를 이용한 MongoDB 연동 실습
__22.1 소개하기
____22.1.1 문서란?
____22.1.2 MongoDB 구조
____22.1.3 스키마 디자인
__22.2 MongoDB 서버 준비
____22.2.1 설치
____22.2.2 MongoDB 작동 확인
__22.3 mongoose의 설치 및 적용
____22.3.1 .env 환경변수 파일 생성
____22.3.2 mongoose로 서버와 데이터베이스 연결
__22.4 esm으로 ES 모듈 import/export 문법 사용하기
____22.4.1 기존 코드 ES Module 형태로 바꾸기
__22.5 데이터베이스의 스키마와 모델
____22.5.1 스키마 생성
____22.5.2 모델 생성
__22.6 MongoDB Compass의 설치 및 사용
__22.7 데이터 생성과 조회
____22.7.1 데이터 생성
____22.7.2 데이터 조회
____22.7.3 특정 포스트 조회
__22.8 데이터 삭제와 수정
____22.8.1 데이터 삭제
____22.8.2 데이터 수정
__22.9 요청 검증
____22.9.1 ObjectId 검증
____22.9.2 Request Body 검증
__22.10 페이지네이션 구현
____22.10.1 가짜 데이터 생성하기
____22.10.2 포스트를 역순으로 불러오기
____22.10.3 보이는 개수 제한
____22.10.4 페이지 기능 구현
____22.10.5 마지막 페이지 번호 알려 주기
____22.10.6 내용 길이 제한
__22.11 정리

23장 JWT를 통한 회원 인증 시스템 구현하기
__23.1 JWT의 이해
____23.1.1 세션 기반 인증과 토큰 기반 인증의 차이
__23.2 User 스키마/모델 만들기
____23.2.1 모델 메서드 만들기
____23.2.2 스태틱 메서드 만들기
__23.3 회원 인증 API 만들기
____23.3.1 회원가입 구현하기
____23.3.2 로그인 구현하기
__23.4 토큰 발급 및 검증하기
____23.4.1 비밀키 설정하기
____23.4.2 토큰 발급하기
____23.4.3 토큰 검증하기
____23.4.4 토큰 재발급하기
____23.4.5 로그아웃 기능 구현하기
__23.5 posts API에 회원 인증 시스템 도입하기
____23.5.1 스키마 수정하기
____23.5.2 posts 컬렉션 비우기
____23.5.3 로그인했을 때만 API를 사용할 수 있게 하기
____23.5.4 포스트 작성 시 사용자 정보 넣기
____23.5.5 포스트 수정 및 삭제 시 권한 확인하기
__23.6 username/tags로 포스트 필터링하기
__23.7 정리

24장 프런트엔드 프로젝트: 시작 및 회원 인증 구현
__24.1 작업 환경 준비하기
____24.1.1 설정 파일 만들기
____24.1.2 라우터 적용
____24.1.3 스타일 설정
____24.1.4 Button 컴포넌트 만들기
____24.1.5 리덕스 적용
__24.2 회원가입과 로그인 구현
____24.2.1 UI 준비하기
____24.2.2 리덕스로 폼 상태 관리하기
____24.2.3 API 연동하기
____24.2.4 회원가입 구현
____24.2.5 로그인 구현
____24.2.6 회원 인증 에러 처리하기
__24.3 헤더 컴포넌트 생성 및 로그인 유지
____24.3.1 헤더 컴포넌트 만들기
____24.3.2 로그인 상태를 보여 주고 유지하기
____24.3.3 로그아웃 기능 구현
__24.4 정리

25장 프런트엔드 프로젝트: 글쓰기 기능 구현하기
__25.1 에디터 UI 구현하기
__25.2 에디터 하단 컴포넌트 UI 구현하기
____25.2.1 TagBox 만들기
__25.3 리덕스로 글쓰기 상태 관리하기
____25.3.1 EditorContainer 만들기
____25.3.2 TagBoxContainer 만들기
____25.3.3 글쓰기 API 연동하기
__25.4 정리

26장 프런트엔드 프로젝트: 포스트 조회 기능 구현하기
__26.1 포스트 읽기 페이지 구현하기
____26.1.1 PostViewer UI 준비하기
____26.1.2 API 연동하기
__26.2 포스트 목록 페이지 구현하기
____26.2.1 PostList UI 준비하기
____26.2.2 포스트 목록 조회 API 연동하기
____26.2.3 HTML 필터링하기
____26.2.4 페이지네이션 구현하기
__26.3 정리

27장 프런트엔드 프로젝트: 수정/삭제 기능 구현 및 마무리
__27.1 포스트 수정
____27.1.1 PostActionButtons 컴포넌트 만들기
____27.1.2 수정 버튼 클릭 시 글쓰기 페이지로 이동하기
__27.2 포스트 삭제
__27.3 react-helmet-async로 meta 태그 설정하기
__27.4 프로젝트 마무리
____27.4.1 프로젝트 빌드하기
____27.4.2 koa-static으로 정적 파일 제공하기
____27.4.3 더 할 수 있는 작업
__27.5 정리

28장 그다음은?
__28.1 리액트 관련 커뮤니티
____28.1.1 국내 커뮤니티
____28.1.2 국외 커뮤니티
__28.2 책의 연장선
__28.3 사이드 프로젝트 생성

찾아보기

[본 문]

[지은이 서문]
이 책의 목표는 단순히 리액트를 다루는 기술을 습득하는 데 머무는 것이 아니라 독자로 하여금 더욱 즐겁고 편하게 웹 개발을 하도록 해 주는 것입니다. 그리고 웹 개발에 필요한 주요 지식을 다루어 여러분이 만들고 싶은 프로젝트를 실제로 개발할 수 있도록 경험치를 쌓아 주는 것이죠.
개정판을 집필하면서 정말 많은 내용이 달라졌습니다. 2019년 초 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 리액트 컴포넌트 개발 방식에 매우 큰 변화가 생겼습니다. 기존에는 컴포넌트에서 상태 관리를 하려면 반드시 클래스형 컴포넌트를 만들어서 사용해야 했지만, 이제는 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. 또한, 리액트 컴포넌트의 라이프사이클(LifeCycle) 메서드를 대체할 수 있는 Hooks도 있어서 더 이상 클래스형 컴포넌트를 사용할 이유가 없습니다. 이에 맞춰, 책에 사용된 주요 예시를 모두 함수형 컴포넌트 형태로 전환했습니다.
이 책으로 리액트 개발 방법을 충분히 익히고 난 다음에는 이 책에서 배운 것을 응용하여 여러분이 만들고 싶은 프로젝트를 구상해서 개발해 보는 것을 적극 권장합니다. 최고의 학습 방법은 직접 무언가를 처음부터 설계하고 마지막까지 완성해 보는 것이라 생각하며, 저 또한 이러한 방식으로 개발 공부를 해 왔기 때문입니다.
- 지은이 서문 중에서