따라하며 쉽게 배우는 모던 리액트 완벽 입문

야마다 요시히로

치바현 카마가야시에 거주하는 프리랜서 작가이며, Visual Studio and Development Technologies 분야 Microsoft MVP이다. 집필 커뮤니티 'WINGS 프로젝트'의 대표이며 《Vue.js 3 실전 입문》 《Angular 애플리케이션 프로그래밍》 등을 저술했다.

• 저자 웹사이트: https://wings.msn.to/

트랜스메이트

다양한 IT 기술과 주제에 관심 있는 사람들이 함께하는 번역가 모임이다. 시시각각 변화하는 IT 분야에 발맞춰 정확하게 이해하고 편안하게 읽을 수 있는 기술서로 거듭날 수 있게 노력하고 있다.

• ▣ 01장: 소개
• 1.1 리액트와 자바스크립트
• __1-1-1 자바스크립트의 역사
• __1-1-2 jQuery에서 차세대 라이브러리로
• __1-1-3 주요 자바스크립트 프레임워크
• __1-1-4 리액트의 특징
• 1.2 리액트 앱을 개발/실행하기 위한 기본 환경
• __1-2-1 Create React App이란?
• __1-2-2 Node.js 설치하기
• __1-2-3 비주얼 스튜디오 코드(VSCode) 설치
• 1.3 모던 자바스크립트의 기본
• __1-3-1 변수 선언
• __1-3-2 주요 리터럴 표현
• __1-3-3 구조 분해 할당
• __1-3-4 매개변수 기본값, 가변 인자 함수
• __1-3-5 옵셔널 체이닝 연산자(?.)
• __1-3-6 모듈
•  
• ▣ 02장: 리액트의 기본
• 2.1 처음 시작하는 리액트
• __2-1-1 리액트 앱 만들기
• __2-1-2 부록: Npm Scripts
• 2.2 샘플 앱 확인하기
• __2-2-1 메인 페이지 준비 - index.html
• __2-2-2 앱 실행을 위한 진입점 - index.js
• __2-2-3 보충: Strict 모드
• __2-2-4 페이지를 구성하는 UI 구성 요소 - App.js
• __2-2-5 보충: 앱 리렌더링
• __2-2-6 함수 컴포넌트와 클래스 컴포넌트
• 2.3 JSX의 기본
• __2-3-1 JSX의 규칙
• __2-3-2 JSX에 자바스크립트 표현식 삽입하기 - {...} 구문
• __2-3-3 {...} 구문으로 속성 값 설정하기
• __2-3-4 스타일시트 설정하기 - style 속성
• __2-3-5 JSX 식의 실체 이해하기
•  
• ▣ 03장: 컴포넌트 개발 (기본)
• 3.1 컴포넌트를 뒷받침하는 기본 개념 - Props와 State
• __3-1-1 Props/State란?
• __3-1-2 Props의 기본
• __3-1-3 이벤트 처리의 기본
• __3-1-4 State의 기본
• __3-1-5 React Developer Tools 소개
• 3.2 조건 분기 및 반복 처리
• __3-2-1 배열 나열하기 - 반복 처리
• __3-2-2 식의 진위 여부에 따라 표시 전환 - 조건부 분기
• __3-2-3 보충: 스타일 선택적으로 적용하기
• 3.3 Props/State에 대한 이해도 높이기
• __3-3-1 컴포넌트의 하위 콘텐츠를 템플릿에 반영하기
• __3-3-2 여러 children 넘겨주기
• __3-3-3 children에 대한 매개변수 전달하기
• __3-3-4 프로퍼티 타입 검증(PropTypes)
• __3-3-5 State 값 업데이트를 위한 두 가지 구문
• __3-3-6 자식 컴포넌트에서 부모 컴포넌트로의 정보 전달
• 3.4 고급 이벤트 처리
• __3-4-1 리액트에서 사용할 수 있는 이벤트
• __3-4-2 이벤트 객체
• __3-4-3 이벤트 전파 방지
• __3-4-4 이벤트 핸들러 옵션 설정하기
•  
• ▣ 04장: 컴포넌트 개발 (폼)
• 4.1 폼 조작의 기본
• __4-1-1 폼 관리의 기본
• __4-1-2 주의: change 이벤트 발생 타이밍
• __4-1-3 비제어 컴포넌트를 통한 폼 관리
• __4-1-4 입력 요소에 따른 폼 구현 예시
• 4.2 State의 구조화된 데이터 업데이트
• __4-2-1 스프레드 구문의 의미
• __4-2-2 Immer 라이브러리를 통한 개선
• __4-2-3 배열 업데이트
• 4.3 검증 기능 구현 - React Hook Form
• __4-3-1 React Hook Form의 기본
• __4-3-2 자체 검증 규칙 구현하기
• __4-3-3 폼의 상태에 따라 표시 제어하기
• __4-3-4 검증 라이브러리와 연동하기
• __4-3-5 Yup에서 자체 검증 규칙 구현하기
• __4-3-6 Yup으로 입력값 변환하기
• __4-3-7 Yup의 오류 메시지를 한국어로 번역하기
•  
• ▣ 05장: 컴포넌트 개발 (응용)
• 5.1 임베디드 컴포넌트
• __5-1-1 컴포넌트 렌더링 대기 감지 - Suspense 컴포넌트 (1)
• __5-1-2 비동기 처리 종료 기다리기 - Suspense 컴포넌트 (2)
• __5-1-3 컴포넌트 렌더링 시간 측정하기 - Profiler 컴포넌트
• 5.2 컴포넌트 개발에서의 스타일 정의
• __5-2-1 JSX 식에 스타일시트 삽입하기 - Styled JSX
• __5-2-2 표준 태그를 확장하여 스타일 태그 정의하기 - Styled Components
• __5-2-3 다양한 표기법을 지원하는 CSS-in-JS 라이브러리 - Emotion
• 5.3 컴포넌트에 대한 기타 주제
• __5-3-1 컴포넌트 하위의 콘텐츠를 임의의 영역에 렌더링하기 - 포털
• __5-3-2 컴포넌트에서 발생한 오류 처리하기 - Error Boundary
•  
• ▣ 06장: 리액트 라이브러리 활용하기
• 6.1 전형적인 UI 구현하기 - MUI
• __6-1-1 MUI의 주요 컴포넌트
• __6-1-2 MUI의 기본
• __6-1-3 드로워 메뉴 구현하기
• __6-1-4 페이지 내 배치를 조정하는 레이아웃 기능 활용하기 - 그리드
• __6-1-5 MUI 스타일 사용자 정의하기 - 테마
• __6-1-6 라이트/다크 모드에 따라 테마 전환하기
• __6-1-7 React Hook Form + MUI 연동하기
• 6.2 컴포넌트의 외형/동작을 카탈로그로 표시하기 - Storybook
• __6-2-1 Storybook 설치
• __6-2-2 스토리 확인
• __6-2-3 [Controls] 탭의 제어
• __6-2-4 [Actions] 탭의 제어
• __6-2-5 [Interactions] 탭의 제어
• __6-2-6 스토리 표시 사용자 지정하기
• __6-2-7 Storybook에 문서 추가하기
• 6.3 외부 서비스에서 데이터 가져오기 - React Query
• __6-3-1 React Query를 사용하지 않는 예시
• __6-3-2 React Query를 이용한 예제
• __6-3-3 Suspense/Error Boundary와의 연동
•  
• ▣ 07장: 훅 활용
• 7.1 컴포넌트 렌더링/파기 시 처리 수행하기 - 부작용 훅
• __7-1-1 useEffect 함수의 기초
• __7-1-2 인수 deps의 의미
• __7-1-3 예시: 부작용 훅을 이용한 타이머 준비
• __7-1-4 렌더링 시 동기적으로 처리 수행하기
• 7.2 다양한 값에 대한 참조 준비하기 - useRef 함수
• __7-2-1 함수 컴포넌트에서 ‘인스턴스 변수’ 정의하기
• __7-2-2 Ref를 컴포넌트 하위 요소로 전달(포워드)하기
• __7-2-3 함수 컴포넌트 하위 메서드 참조하기
• __7-2-4 콜백 함수를 ref 속성에 전달하기 - 콜백 Ref
• 7.3 상태와 처리를 한꺼번에 관리하기 - useReducer 함수
• __7-3-1 useState 훅의 문제점
• __7-3-2 useReducer 관련 키워드
• __7-3-3 useReducer 훅의 기초
• __7-3-4 Reducer를 여러 Action 타입에 대응하기
• __7-3-5 State 초깃값 생성 시 주의 사항
• 7.4 여러 계층의 컴포넌트에서 값 전달하기 - useContext 함수
• __7-4-1 컨텍스트의 기본
• __7-4-2 예: 컨텍스트를 이용한 테마 전환 구현하기
• 7.5 상태 관리 라이브러리 - Recoil
• __7-5-1 Recoil이란?
• __7-5-2 Recoil의 기본
• __7-5-3 Todo 목록을 Recoil 앱에 대응하기
• __7-5-4 Todo 목록 개선하기
• 7.6 함수 또는 그 결과를 메모하기 - memo/useMemo/useCallback 함수
• __7-6-1 메모화를 위한 샘플
• __7-6-2 함수 결과 메모하기 - useMemo 함수
• __7-6-3 컴포넌트 리렌더링 억제하기 - memo 함수
• __7-6-4 함수 정의 자체를 캐싱하기 - useCallback 함수
• 7.7 우선순위가 낮은 State 업데이트 구분하기 - useTransition 함수
• __7-7-1 여러 State에 따라 페이지를 제어하는 예시
• __7-7-2 useTransition 함수를 이용한 렌더링의 우선순위 지정
• __7-7-3 트랜지션 상태에 따라 처리 할당하기
• __7-7-4 특정 값의 ‘지연 버전’ 생성하기 - useDeferredValue 함수
• 7.8 훅 자체 제작
• __7-8-1 커스텀 훅 정의
• __7-8-2 커스텀 훅 사용
•  
• ▣ 08장: 라우팅
• 8.1 리액트 라우터의 기본
• __8-1-1 라우팅 테이블 정의
• __8-1-2 보충: 라우터 동작 옵션
• __8-1-3 루트 정의를 태그 형식으로 표현하기
• 8.2 라우터 지원 링크 설치
• __8-2-1 링크 설치의 기본
• __8-2-2 내비게이션 메뉴에 특화된 요소
• __8-2-3 요소에서 사용할 수 있는 주요 속성
• __8-2-4 보충: 프로그램 내 페이지 이동
• 8.3 라우터를 통해 정보를 전달하는 방식
• __8-3-1 경로의 일부를 매개변수로 전달하기 – 루트 매개변수
• __8-3-2 루트 매개변수의 다양한 표현
• __8-3-3 쿼리 정보 가져오기
• __8-3-4 개별 링크에서 임의의 정보 전달하기 - state 속성
• __8-3-5 상위 루트에서 하위 루트로 값 전달하기 - Outlet Context
• __8-3-6 루트별 정보 가져오기 - handle 속성
• 8.4 Route 컴포넌트 속성
• __8-4-1 루트 랜더링 시 예외 포착하기 - errorElement 속성
• __8-4-2 컴포넌트에서 사용할 데이터 준비하기 - loader 속성
• __8-4-3 루트에서 발생한 액션 처리하기 - action 속성
• __8-4-4 컴포넌트 지연 로드하기 - lazy 속성
• 8.5 라우팅과 관련된 기타 기법
• __8-5-1 현재 페이지의 링크 해제하기
• __8-5-2 스크롤 위치 복원하기 - 요소
•  
• ▣ 09장: 테스트
• 9.1 단위 테스트
• __9-1-1 Jest의 기본
• __9-1-2 컴포넌트 테스트
• __9-1-3 이벤트가 포함된 테스트
• __9-1-4 자식 컴포넌트 모의화
• __9-1-5 타이머를 이용한 테스트
• __9-1-6 비동기 통신을 수반하는 테스트
• __9-1-7 비동기 통신을 모의해보기 - msw
• __9-1-8 컨텍스트를 동반한 테스트
• 9.2 E2E 테스트
• __9-2-1 E2E 테스트 준비
• __9-2-2 E2E 테스트 작성
•  
• ▣ 10장: 타입스크립트 활용
• 10.1 타입스크립트의 기본
• __10-1-1 타입 어노테이션의 기본
• __10-1-2 타입스크립트의 데이터 유형
• __10-1-3 타입스크립트 고유의 특수한 타입
• __10-1-4 여러 개의 타입을 결합한 ‘복합 타입’
• 10.2 리액트 앱에 타입스크립트 도입하기
• __10-2-1 타입스크립트 템플릿 활성화
• __10-2-2 Props의 유형 정의
• __10-2-3 State/Context/Reducer의 타입 정보
• __10-2-4 fetch 데이터에 대한 타입 정의
• __10-2-5 보충: 함수 컴포넌트의 타입 정의
•  
• ▣ 11장: Next.js 활용하기
• 11.1 Next.js의 기본
• __11-1-1 Next.js란?
• __11-1-2 Next.js 앱 만들기
• 11.2 App Router의 기본 이해하기
• __11-2-1 두 종류의 라우터
• __11-2-2 App Router란?
• __11-2-3 프로젝트 기본 샘플 확인
• __11-2-4 App Router의 루트 매개변수
• 11.3 애플리케이션 ‘Reading Recorder’ 만들기
• __11-3-1 앱의 구조 개관하기
• __11-3-2 이용하는 서비스/라이브러리
• __11-3-3 Prisma 준비
• 11.4 앱의 구현 읽어보기
• __11-4-1 루트 레이아웃(공통 메뉴)
• __11-4-2 도서 정보 표시
• __11-4-3 리뷰 정보 목록 표시
• __11-4-4 Google 도서를 통한 도서 검색
• __11-4-5 리뷰 등록 양식
• 11.5 Vercel에 배포
• __11-5-1 GitHub 저장소 준비
• __11-5-2 Vercel 측의 준비
• __11-5-3 PostgreSQL 데이터베이스 준비하기
• __11-5-4 실제 환경에서 동작 확인하기

• GitHub 저장소: https://github.com/wikibook/modern-react
• ZIP 형식으로 다운로드: https://github.com/wikibook/modern-react/archive/refs/heads/main.zip

• 39쪽, 예제 코드 1-3-13의 마지막 줄

  console.log(getTrapezoidArea(10)); // 결과: 5 (=(10 ＋ 1) × 1 ÷ 2)

  ==>

  console.log(getTrapezoidArea(10)); // 결과: 5.5 (=(10 ＋ 1) × 1 ÷ 2)

• 74쪽, 페이지 하단 예제 코드의 밑에서 4번째 줄

  // 자식 요소에서 '//' '//' '/*~*/'은 안 됨

  ==>

  // 자식 요소에서 '//' '/*~*/'은 안 됨

• 212쪽, 예제 코드의 12번째 줄

  required: '성펼은 필수입니다.'

  ==>

  required: '성별은 필수입니다.'

• 216쪽, 두 번째 표(이번 예제에 설정된 검증 규칙)를 다음 내용으로 교체

  필드명	검증 규칙
  name	필수, 최대 문자열 길이(20자)
  gender	필수
  email	필수, 정규식(이메일 주소)
  memo	필수, 최소 문자열 길이(10자)

• 359쪽, 예제 코드 6-3-1의 8번째 줄

  // 처리 지연을 위한 더미 휴지 처리

  ==>

  // 처리 지연을 위한 더미 일시 정지 처리

• 361쪽, 페이지 중간 참고란 제목

  휴지 처리

  ==>

  일시 정지 처리

• 361쪽, 페이지 중간 참고란의 4번째 줄

  자바스크립트 표준에는 휴지 메서드(여기서는 sleep)가

  ==>

  자바스크립트 표준에는 일시 정지 메서드(여기서는 sleep)가

• 362쪽, 예제 코드 6-3-3의 8번째 줄

  // 처리 지연을 위한 더미 휴지 처리

  ==>

  // 처리 지연을 위한 더미 일시 정지 처리