따라하며 쉽게 배우는 모던 리액트 완벽 입문 - 위키북스 오픈소스 & 웹 시리즈 117

야마다요시히로

저자:야마다요시히로
치바현카마가야시에거주하는프리랜서작가이며,VisualStudioandDevelopmentTechnologies분야MicrosoftMVP이다.집필커뮤니티'WINGS프로젝트'의대표이며《Vue.js3실전입문》《Angular애플리케이션프로그래밍》등을저술했다.
-저자웹사이트:wings.msn.to/

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

01장:소개
1.1리액트와자바스크립트
__1-1-1자바스크립트의역사
__1-1-2jQuery에서차세대라이브러리로
__1-1-3주요자바스크립트프레임워크
__1-1-4리액트의특징
1.2리액트앱을개발/실행하기위한기본환경
__1-2-1CreateReactApp이란?
__1-2-2Node.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부록:NpmScripts
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.3JSX의기본
__2-3-1JSX의규칙
__2-3-2JSX에자바스크립트표현식삽입하기-{...}구문
__2-3-3{...}구문으로속성값설정하기
__2-3-4스타일시트설정하기-style속성
__2-3-5JSX식의실체이해하기

03장:컴포넌트개발(기본)
3.1컴포넌트를뒷받침하는기본개념-Props와State
__3-1-1Props/State란?
__3-1-2Props의기본
__3-1-3이벤트처리의기본
__3-1-4State의기본
__3-1-5ReactDeveloperTools소개
3.2조건분기및반복처리
__3-2-1배열나열하기-반복처리
__3-2-2식의진위여부에따라표시전환-조건부분기
__3-2-3보충:스타일선택적으로적용하기
3.3Props/State에대한이해도높이기
__3-3-1컴포넌트의하위콘텐츠를템플릿에반영하기
__3-3-2여러children넘겨주기
__3-3-3children에대한매개변수전달하기
__3-3-4프로퍼티타입검증(PropTypes)
__3-3-5State값업데이트를위한두가지구문
__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.2State의구조화된데이터업데이트
__4-2-1스프레드구문의의미
__4-2-2Immer라이브러리를통한개선
__4-2-3배열업데이트
4.3검증기능구현-ReactHookForm
__4-3-1ReactHookForm의기본
__4-3-2자체검증규칙구현하기
__4-3-3폼의상태에따라표시제어하기
__4-3-4검증라이브러리와연동하기
__4-3-5Yup에서자체검증규칙구현하기
__4-3-6Yup으로입력값변환하기
__4-3-7Yup의오류메시지를한국어로번역하기

05장:컴포넌트개발(응용)
5.1임베디드컴포넌트
__5-1-1컴포넌트렌더링대기감지-Suspense컴포넌트(1)
__5-1-2비동기처리종료기다리기-Suspense컴포넌트(2)
__5-1-3컴포넌트렌더링시간측정하기-Profiler컴포넌트
5.2컴포넌트개발에서의스타일정의
__5-2-1JSX식에스타일시트삽입하기-StyledJSX
__5-2-2표준태그를확장하여스타일태그정의하기-StyledComponents
__5-2-3다양한표기법을지원하는CSS-in-JS라이브러리-Emotion
5.3컴포넌트에대한기타주제
__5-3-1컴포넌트하위의콘텐츠를임의의영역에렌더링하기-포털
__5-3-2컴포넌트에서발생한오류처리하기-ErrorBoundary

06장:리액트라이브러리활용하기
6.1전형적인UI구현하기-MUI
__6-1-1MUI의주요컴포넌트
__6-1-2MUI의기본
__6-1-3드로워메뉴구현하기
__6-1-4페이지내배치를조정하는레이아웃기능활용하기-그리드
__6-1-5MUI스타일사용자정의하기-테마
__6-1-6라이트/다크모드에따라테마전환하기
__6-1-7ReactHookForm+MUI연동하기
6.2컴포넌트의외형/동작을카탈로그로표시하기-Storybook
__6-2-1Storybook설치
__6-2-2스토리확인
__6-2-3[Controls]탭의제어
__6-2-4[Actions]탭의제어
__6-2-5[Interactions]탭의제어
__6-2-6스토리표시사용자지정하기
__6-2-7Storybook에문서추가하기
6.3외부서비스에서데이터가져오기-ReactQuery
__6-3-1ReactQuery를사용하지않는예시
__6-3-2ReactQuery를이용한예제
__6-3-3Suspense/ErrorBoundary와의연동

07장:훅활용
7.1컴포넌트렌더링/파기시처리수행하기-부작용훅
__7-1-1useEffect함수의기초
__7-1-2인수deps의의미
__7-1-3예시:부작용훅을이용한타이머준비
__7-1-4렌더링시동기적으로처리수행하기
7.2다양한값에대한참조준비하기-useRef함수
__7-2-1함수컴포넌트에서‘인스턴스변수’정의하기
__7-2-2Ref를컴포넌트하위요소로전달(포워드)하기
__7-2-3함수컴포넌트하위메서드참조하기
__7-2-4콜백함수를ref속성에전달하기-콜백Ref
7.3상태와처리를한꺼번에관리하기-useReducer함수
__7-3-1useState훅의문제점
__7-3-2useReducer관련키워드
__7-3-3useReducer훅의기초
__7-3-4Reducer를여러Action타입에대응하기
__7-3-5State초깃값생성시주의사항
7.4여러계층의컴포넌트에서값전달하기-useContext함수
__7-4-1컨텍스트의기본
__7-4-2예:컨텍스트를이용한테마전환구현하기
7.5상태관리라이브러리-Recoil
__7-5-1Recoil이란?
__7-5-2Recoil의기본
__7-5-3Todo목록을Recoil앱에대응하기
__7-5-4Todo목록개선하기
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-2useTransition함수를이용한렌더링의우선순위지정
__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상위루트에서하위루트로값전달하기-OutletContext
__8-3-6루트별정보가져오기-handle속성
8.4Route컴포넌트속성
__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-1Jest의기본
__9-1-2컴포넌트테스트
__9-1-3이벤트가포함된테스트
__9-1-4자식컴포넌트모의화
__9-1-5타이머를이용한테스트
__9-1-6비동기통신을수반하는테스트
__9-1-7비동기통신을모의해보기-msw
__9-1-8컨텍스트를동반한테스트
9.2E2E테스트
__9-2-1E2E테스트준비
__9-2-2E2E테스트작성

10장:타입스크립트활용
10.1타입스크립트의기본
__10-1-1타입어노테이션의기본
__10-1-2타입스크립트의데이터유형
__10-1-3타입스크립트고유의특수한타입
__10-1-4여러개의타입을결합한‘복합타입’
10.2리액트앱에타입스크립트도입하기
__10-2-1타입스크립트템플릿활성화
__10-2-2Props의유형정의
__10-2-3State/Context/Reducer의타입정보
__10-2-4fetch데이터에대한타입정의
__10-2-5보충:함수컴포넌트의타입정의

11장:Next.js활용하기
11.1Next.js의기본
__11-1-1Next.js란?
__11-1-2Next.js앱만들기