리액트를 다루는 기술 : 입문부터 대규모 애플리케이션까지 한 권으로

김민준

개발은언제나즐겁고재밌어야한다는생각을갖고있는개발자이며,IT기술을가르치는것을굉장히좋아하는교육자이다.또한,사용자를행복하게만드는서비스를만드는것이가장중요하다고여긴다.현재리디(주)에서애니메이션스트리밍서비스라프텔(laftel.net)의프런트엔드개발을하고있다.그리고개발자들의블로그서비스인벨로그(velog.io)를운영및개발하고있다.

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

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

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

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

5장ref:DOM에이름달기
__5.1ref는어떤상황에서사용해야할까?
____5.1.1예제컴포넌트생성
____5.1.2App컴포넌트에서예제컴포넌트렌더링
____5.1.3DOM을꼭사용해야하는상황
__5.2ref사용
____5.2.1콜백함수를통한ref설정
____5.2.2createRef를통한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.2App컴포넌트에서예제컴포넌트렌더링
__6.3key
____6.3.1key설정
__6.4응용
____6.4.1초기상태설정하기
____6.4.2데이터추가기능구현하기
____6.4.3데이터제거기능구현하기
__6.5정리

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

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

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

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

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

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

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

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

15장ContextAPI
__15.1ContextAPI를사용한전역상태관리흐름이해하기
__15.2ContextAPI사용법익히기
____15.2.1새Context만들기
____15.2.2Consumer사용하기
____15.2.3Provider
__15.3동적Context사용하기
____15.3.1Context파일수정하기
____15.3.2새로워진Context를프로젝트에반영하기
____15.3.3색상선택컴포넌트만들기
__15.4Consumer대신Hook또는staticcontextType사용하기
____15.4.1useContextHook사용하기
____15.4.2staticcontextType사용하기
__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.1Parcel로프로젝트만들기
____16.2.2간단한UI구성하기
____16.2.3DOM레퍼런스만들기
____16.2.4액션타입과액션생성함수정의
____16.2.5초깃값설정
____16.2.6리듀서함수정의
____16.2.7스토어만들기
____16.2.8render함수만들기
____16.2.9구독하기
____16.2.10액션발생시키기
__16.3리덕스의세가지규칙
____16.3.1단일스토어
____16.3.2읽기전용상태
____16.3.3리듀서는순수한함수
__16.4정리

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

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

19장코드스플리팅
__19.1자바스크립트함수비동기로딩
__19.2React.lazy와Suspense를통한컴포넌트코드스플리팅
____19.2.1state를사용한코드스플리팅
____19.2.2React.lazy와Suspense사용하기
____19.2.3LoadableComponents를통한코드스플리팅
__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.1redux-thunk코드준비하기
____20.4.2Users,UsersContainer컴포넌트준비하기
____20.4.3PreloadContext만들기
____20.4.4서버에서리덕스설정및PreloadContext사용하기
____20.4.5스크립트로스토어초기상태주입하기
____20.4.6redux-saga코드준비하기
____20.4.7User,UserContainer컴포넌트준비하기
____20.4.8redux-saga를위한서버사이드렌더링작업
____20.4.9usePreloaderHook만들어서사용하기
__20.5서버사이드렌더링과코드스플리팅
____20.5.1라우트컴포넌트스플리팅하기
____20.5.2웹팩과babel플러그인적용
____20.5.3필요한청크파일경로추출하기
____20.5.4loadableReady와hydrate
__20.6서버사이드렌더링의환경구축을위한대안
____20.6.1Next.js
____20.6.2Razzle
__20.7정리

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

22장mongoose를이용한MongoDB연동실습
__22.1소개하기
____22.1.1문서란?
____22.1.2MongoDB구조
____22.1.3스키마디자인
__22.2MongoDB서버준비
____22.2.1설치
____22.2.2MongoDB작동확인
__22.3mongoose의설치및적용
____22.3.1.env환경변수파일생성
____22.3.2mongoose로서버와데이터베이스연결
__22.4esm으로ES모듈import/export문법사용하기
____22.4.1기존코드ESModule형태로바꾸기
__22.5데이터베이스의스키마와모델
____22.5.1스키마생성
____22.5.2모델생성
__22.6MongoDBCompass의설치및사용
__22.7데이터생성과조회
____22.7.1데이터생성
____22.7.2데이터조회
____22.7.3특정포스트조회
__22.8데이터삭제와수정
____22.8.1데이터삭제
____22.8.2데이터수정
__22.9요청검증
____22.9.1ObjectId검증
____22.9.2RequestBody검증
__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.1JWT의이해
____23.1.1세션기반인증과토큰기반인증의차이
__23.2User스키마/모델만들기
____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.5postsAPI에회원인증시스템도입하기
____23.5.1스키마수정하기
____23.5.2posts컬렉션비우기
____23.5.3로그인했을때만API를사용할수있게하기
____23.5.4포스트작성시사용자정보넣기
____23.5.5포스트수정및삭제시권한확인하기
__23.6username/tags로포스트필터링하기
__23.7정리

24장프런트엔드프로젝트:시작및회원인증구현
__24.1작업환경준비하기
____24.1.1설정파일만들기
____24.1.2라우터적용
____24.1.3스타일설정
____24.1.4Button컴포넌트만들기
____24.1.5리덕스적용
__24.2회원가입과로그인구현
____24.2.1UI준비하기
____24.2.2리덕스로폼상태관리하기
____24.2.3API연동하기
____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.1TagBox만들기
__25.3리덕스로글쓰기상태관리하기
____25.3.1EditorContainer만들기
____25.3.2TagBoxContainer만들기
____25.3.3글쓰기API연동하기
__25.4정리

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

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

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

찾아보기

리액트,현장밀착입문서는따로있다!

자바스크립트의기본기능과문법을숙지한다
리액트의기본기를익히려면자바스크립트는필수!잘모르는자바스크립트문법이나오면반드시체크하자.리액트개발에필요한ES6문법은적재적소에배치했다.

원리를알면더효율적으로사용할수있다
동작원리를이해하면리액트를왜사용해야하는지,어떻게사용하면좋은지큰그림을그릴수있다.작은프로젝트를해보면서리액트를통해개발자경험을향상시키는방법을배우자.

웹애플리케이션에리액트를적용해본다.
리액트를적용해보면서실전감각을익힌다.UI업데이트과정을간결하게,복잡한애플리케이션개발도컴포넌트기반으로쉽게,자바스크립트개발을손쉽게.

리액트를이해하기위한핵심개념은물론이고어떤상황에서어떻게사용해야하는지,왜이렇게사용하는것이효과적인지,공식문서에는나오지않는실전노하우와팁을풍부하게담았다.
또한,프로젝트생성부터코드를작성및개선하고,배포하기까지실무에바로응용할수있도록예제를준비했다.먼저일정관리애플리케이션을만들면서리액트의기본기를다지고,다음으로여러실습예제를진행하면서컴포넌트스타일링,상태관리,API연동,라우팅,코드스플리팅,서버사이드렌더링등리액트를활용한다양한기술을사용해본다.마지막으로프런트엔드프로젝트를통해배운지식을종합적으로활용해본다.