실전 리액트 프로그래밍 (리액트 훅부터 Next.js까지 | 개정판)

이재승

대학교1학년때C언어를처음배우면서터미널에서동작하는테트리스를밤새며만들었다.맙소사!세상에이렇게재밌는게있다니.대학원에서석사과정을밟던중연구보다는제품을만드는엔지니어가적성에맞는다는것을확실히깨닫고,리액트를통해웹프론트엔드개발자로전향했다.리액트에빠져지내다보니리액트공식프로젝트에보낸PR이머지되는경험도했다.블로그에쓴‘카카오페이지웹React포팅후기’라는글이많이읽히기도했다.요즘은카카오페이지해외버전웹개발에집중하고있다.

1장리액트프로젝트시작하기
1.1리액트란무엇인가
1.2리액트개발환경직접구축하기
1.2.1HelloWorld페이지만들기
1.2.2바벨사용해보기
1.2.3웹팩의기본개념이해하기
1.2.4웹팩사용해보기
1.3create-react-app으로시작하기
1.3.1create-react-app사용해보기
1.3.2주요명령어알아보기
1.3.3자바스크립트지원범위
1.3.4코드분할하기
1.3.5환경변수사용하기
1.4CSS작성방법결정하기
1.4.1일반적인CSS파일로작성하기
1.4.2css-module로작성하기
1.4.3Sass로작성하기
1.4.4css-in-js로작성하기
1.5단일페이지애플리케이션만들기
1.5.1브라우저히스토리API
1.5.2react-router-dom사용하기

2장ES6+를품은자바스크립트,매력적인언어가되다
2.1변수를정의하는새로운방법:const,let
2.1.1var가가진문제
2.1.2var의문제를해결하는const,let
2.2객체와배열의사용성개선
2.2.1객체와배열을간편하게생성하고수정하기
2.2.2객체와배열의속성값을간편하게가져오기
2.3강화된함수의기능
2.3.1매개변수에추가된기능
2.3.2함수를정의하는새로운방법:화살표함수
2.4향상된비동기프로그래밍1:프로미스
2.4.1프로미스이해하기
2.4.2프로미스활용하기
2.4.3프로미스사용시주의할점
2.5향상된비동기프로그래밍2:asyncawait
2.5.1asyncawait이해하기
2.5.2asyncawait활용하기
2.6템플릿리터럴로동적인문자열생성하기
2.7실행을멈출수있는제너레이터
2.7.1제너레이터이해하기
2.7.2제너레이터활용하기

3장중요하지만헷갈리는리액트개념이해하기
3.1상탯값과속성값으로관리하는UI데이터
3.1.1리액트를사용한코드의특징
3.1.2컴포넌트의속성값과상탯값
3.1.3컴포넌트함수의반환값
3.2리액트요소와가상돔
3.2.1리액트요소이해하기
3.2.2리액트요소가돔요소로만들어지는과정
3.3리액트훅기초익히기
3.3.1상탯값추가하기:useState
3.3.2컴포넌트에서부수효과처리하기:useEffect
3.3.3훅직접만들기
3.3.4훅사용시지켜야할규칙
3.4콘텍스트API로데이터전달하기
3.4.1콘텍스트API이해하기
3.4.2콘텍스트API활용하기
3.4.3콘텍스트API사용시주의할점
3.5ref속성값으로자식요소에접근하기
3.5.1ref속성값이해하기
3.5.2ref속성값활용하기
3.5.3ref속성값사용시주의할점
3.6리액트내장훅살펴보기
3.6.1Consumer컴포넌트없이콘텍스트사용하기:useContext
3.6.2렌더링과무관한값저장하기:useRef
3.6.3메모이제이션훅:useMemo,useCallback
3.6.4컴포넌트의상탯값을리덕스처럼관리하기:useReducer
3.6.5부모컴포넌트에서접근가능한함수구현하기:useImperativeHandle
3.6.6기타리액트내장훅:useLayoutEffect,useDebugValue

4장리액트실전활용법
4.1가독성과생산성을고려한컴포넌트코드작성법
4.1.1추천하는컴포넌트파일작성법
4.1.2속성값타입정의하기:prop-types
4.1.3가독성을높이는조건부렌더링방법
4.1.4관심사분리를위한프레젠테이션,컨테이너컴포넌트구분하기
4.2useEffect훅실전활용법
4.2.1의존성배열을관리하는방법
4.2.2의존성배열을없애는방법
4.3렌더링속도를올리기위한성능최적화방법
4.3.1React.memo로렌더링결과재사용하기
4.3.2속성값과상탯값을불변변수로관리하는방법
4.3.3가상돔에서의성능최적화

5장레거시프로젝트를위한클래스형컴포넌트
5.1클래스형컴포넌트의생명주기메서드
5.1.1constructor메서드
5.1.2getDerivedStateFromProps메서드
5.1.3render메서드
5.1.4componentDidMount메서드
5.1.5shouldComponentUpdate메서드
5.1.6getSnapshotBeforeUpdate메서드
5.1.7componentDidUpdate메서드
5.1.8componentWillUnmount메서드
5.1.9getDerivedStateFromError,componentDidCatch메서드
5.2클래스형컴포넌트기본사용법
5.2.1setState메서드이해하기
5.2.2클래스필드를이용해이벤트처리메서드작성하기
5.2.3생명주기메서드에서컨텍스트데이터사용하기
5.3컴포넌트의공통기능관리하기
5.3.1고차컴포넌트를이용한공통기능관리
5.3.2렌더속성값을이용한공통기능관리
5.4클래스형컴포넌트와훅의관계
5.5클래스형컴포넌트를훅으로변환하기
5.5.1constructor메서드
5.5.2componentDidUpdate메서드
5.5.3getDerivedStateFromProps메서드
5.5.4forceUpdate메서드
5.6기존클래스형컴포넌트를고려한커스텀훅작성법
5.6.1커스텀훅의반환값이없는경우
5.6.2커스텀훅의반환값이있는경우

6장리덕스로상태관리하기
6.1리덕스사용시따라야할세가지원칙
6.2리덕스의주요개념이해하기
6.2.1액션
6.2.2미들웨어
6.2.3리듀서
6.2.4스토어
6.3데이터종류별로상탯값나누기
6.3.1상탯값나누기예제를위한사전작업
6.3.2리듀서에서공통기능분리하기
6.4리액트상탯값을리덕스로관리하기
6.4.1react-redux패키지없이직접구현하기
6.4.2react-redux패키지사용하기
6.5reselect패키지로선택자함수만들기
6.5.1reselect패키지없이구현해보기
6.5.2reselect패키지사용하기
6.5.3reselect에서컴포넌트의속성값이용하기
6.5.4컴포넌트인스턴스별로독립된메모이제이션적용하기
6.6리덕스사가를이용한비동기액션처리
6.6.1리덕스사가시작하기
6.6.2여러개의액션이협업하는사가함수
6.6.3사가함수의예외처리
6.6.4리덕스사가로디바운스구현하기
6.6.5사가함수테스트하기

7장바벨과웹팩자세히들여다보기
7.1바벨실행및설정하기
7.1.1바벨을실행하는여러가지방법
7.1.2확장성과유연성을고려한바벨설정방법
7.1.3전체설정파일과지역설정파일
7.1.4바벨과폴리필
7.2바벨플러그인제작하기
7.2.1AST구조들여다보기
7.2.2바벨플러그인의기본구조
7.2.3바벨플러그인제작하기:모든콘솔로그제거
7.2.4바벨플러그인제작하기:함수내부에콘솔로그추가
7.3웹팩초급편
7.3.1웹팩실행하기
7.3.2로더사용하기
7.3.3플러그인사용하기
7.4웹팩고급편
7.4.1나무흔들기
7.4.2코드분할
7.4.3로더제작하기
7.4.4플러그인제작하기

8장서버사이드렌더링그리고Next.js
8.1서버사이드렌더링초급편
8.1.1클라이언트에서만렌더링해보기
8.1.2서버사이드렌더링함수사용해보기:renderToString
8.1.3서버데이터를클라이언트로전달하기
8.1.4스타일적용하기
8.1.5이미지모듈적용하기
8.2서버사이드렌더링고급편
8.2.1페이지를미리렌더링하기
8.2.2서버사이드렌더링캐싱하기
8.2.3서버사이드렌더링함수사용해보기:renderToNodeStream
8.3넥스트초급편
8.3.1넥스트시작하기
8.3.2웹팩설정변경하기
8.3.3서버에서생성된데이터를전달하기
8.3.4페이지이동하기
8.3.5에러페이지구현하기
8.4넥스트고급편
8.4.1페이지공통기능구현하기
8.4.2넥스트에서의코드분할
8.4.3웹서버직접띄우기
8.4.4서버사이드렌더링캐싱하기
8.4.5페이지미리렌더링하기
8.4.6styled-components사용하기

9장정적타입그리고타입스크립트
9.1타입스크립트란?
9.1.1동적타입언어와정적타입언어
9.1.2타입스크립트의장점
9.1.3실습을위한준비
9.2타입스크립트의여러가지타입
9.2.1타입스크립트의다양한타입
9.2.2열거형타입
9.2.3함수타입
9.3인터페이스
9.3.1인터페이스로객체타입정의하기
9.3.2인터페이스로정의하는인덱스타입
9.3.3그밖에인터페이스로할수있는것
9.4타입호환성
9.4.1숫자와문자열의타입호환성
9.4.2인터페이스의타입호환성
9.4.3함수의타입호환성
9.5타입스크립트고급기능
9.5.1제네릭
9.5.2맵드타입
9.5.3조건부타입
9.6생산성을높이는타입스크립트의기능
9.6.1타입추론
9.6.2타입가드
9.7타입스크립트환경구축하기
9.7.1create-react-app과넥스트에서타입스크립트사용하기
9.7.2프레임워크를사용하지않고타입스크립트환경구축하기
9.7.3기타환경설정하기
9.8리액트에타입적용하기
9.8.1리액트컴포넌트에서타입정의하기
9.8.2리덕스에서타입정의하기

10장다가올리액트의변화:concurrent모드
10.1블로킹vs.논블로킹렌더링
10.2작업의우선순위를통한효율적인CPU사용
10.3서스펜스로가능해진컴포넌트함수내비동기처리
10.3.1컴포넌트함수내에서비동기로모듈가져오기
10.3.2컴포넌트함수내에서API로데이터받기