리액트 웹앱 제작 총론(2판)(오픈소스 프로그래밍)

★ 이 책에서 다루는 내용 ★



■ 첫 리액트 앱 제작

■ UI 요소를 정의하는 컴포넌트 개발

■ 여러 컴포넌트를 결합한 복합적인 UI 구현

■ 자바스크립트 대신 JSX를 사용한 비주얼 구현

■ 앱의 상태 관리

■ 리액트 방식의 스타일 적용

■ 컴포넌트 생명주기의 이해

■ 라우팅과 뷰를 이용한 싱글 페이지 앱 제작

■ 리덕스를 사용한 앱 데이터와 상태의 쉬운 관리



★ 이 책의 구성 ★



1장. '리액트 소개'에서는 리액트가 하는 일과 그 이유에 대해 개괄적으로 소개한다.

2장. '첫 번째 리액트 앱'에서는 render 메소드에 h1 태그를 정의할 때의 JSX에 대해 알아본다.

3장. '리액트 컴포넌트'에서는 리액트를 리액트답게 만드는 것 중 하나인 컴포넌트를 배운다.

4장. '리액트 스타일링'에서는 CSS 스타일 규칙을 사용하는 방법과는 다른, 리액트가 자바스크립트에 인라인 방식으로 스타일링하는 모습을 볼 수 있다. HTML과 비슷한 XML 문법을 사용해 자바스크립트에서 UI를 통째로 선언하는 방법을 JSX를 통해 배운다.

5장. '복잡한 컴포넌트 제작'에서는 다양한 계층의 컴포넌트를 다루며, 여러 부모와 여러 자식 사이의 속성 전달 방법을 알아본다.

6장. '속성 전달'에서는 여러 계층에서 속성 전달을 좀 더 쉽게 할 수 있는 방법을 알아본다.

7장. 'JSX와의 재회'에서는 JSX를 알아야 할 필요가 있는 사항을 깊이 들여다보기 위해 역진 추적(backtracking)과 전진 추적(forwardtracking)을 배운다.

8장. '상태 다루기'에서는 상태 보존 컴포넌트로 무엇을 할 수 있는지 알아본다.

9장. '데이터에서 UI로'에서는 실전에서 보게 될 일반적인 시나리오에서 겪을 수 있는 난관을 줄이는 방법을 알아본다.

10장. '이벤트'에서는 이벤트 처리와 관련한 여러 가지 사항을 알아본다. 리액트가 이벤트를 취급하는 방법은 약간 다르며, 그 차이에 세심한 주의를 기울이지 않으면 놀라게 될 일이 많을 것이다. 몇 개의 간단한 예제로 시작해, 점점 더 이상하고 복잡하고 짜증나는 상황을 해결해나가는 방법을 배운다.

11장. '컴포넌트 생명주기'에서는 생명주기 메소드와 이를 통해 할 수 있는 일들에 관해 논의한다.

12장. 'DOM 엘리먼트 접근'에서는 DOM 엘리먼트에 직접 접근할 수 있는 쉬운 방법을 알아본다.

13장. '리액트 개발 환경 구성'에서는 리액트 자체보다는 리액트 앱을 개발하기 위한 환경 구성에 관한 내용을 다룬다.

14장. '외부 데이터 사용'에서는 외부 데이터를 다루는 데 필요한 자바스크립트의 모든 것과 리액트 앱 내부에서 작동하게 하는 모든 방법을 배운다.

15장. 'Todo List 앱 제작'에서는 지금까지 배운 많은 개념과 기법을 총동원해 Todo List 앱을 개발할 것이다.

16장. '슬라이드 메뉴'에서는 UI 부문에서 자주 등장하는 슬라이드 메뉴를 리액트로 만들어 본다.

17장. '불필요한 렌더링 방지'에서는 render 메소드의 정체를 알아보고, render 메소드가 호출되게 하는 방법을 설명한다.

18장. '리액트 라우터를 이용한 싱글 페이지 앱 제작'에서는 리액트를 이용해 간단한 싱글 페이지 앱(SPA)을 만들어본다.

19장. '리덕스 소개'에서는 리덕스의 주요 기능의 개념을 알아보고, 기능을 실현하는 코드도 직접 살펴본다.

20장. '리액트와 리덕스'에서는 리액트 프로젝트에서 리덕스가 가장 인기 있는 이유를 알아보고, 리액트와 리덕스를 통합해 개발해본다.

1장. 리액트 소개

__예전의 멀티페이지 디자인

__요즘의 싱글 페이지 앱

__리액트와의 첫 만남

____UI 상태의 자동 관리

____번개같이 빠른 DOM 조작

____조립하기 쉬운 UI를 지원하는 API

____자바스크립트만으로 정의하는 비주얼

____MVC 아키텍처에서의 'V'

__정리



2장. 첫 번째 리액트 앱

__JSX 다루기

__리액트 시작하기

__이름 보여주기

__여전히 익숙한 기술

____목적지 변경

____스타일 입히기!

__정리



3장. 리액트 컴포넌트

__함수에 대한 짧은 복습

__UI를 다루는 방식의 변화

__리액트 컴포넌트와의 첫 만남

____Hello, World! 컴포넌트 만들기

____속성 지정

__자식 다루기

__정리



4장. 리액트 스타일링

__알파벳 모음 보여주기

__리액트 콘텐츠 스타일링

____생성된 HTML의 이해

____바로 스타일링!

__리액트 방식의 스타일링

____스타일 객체 만들기

____콘텐츠 스타일링

____배경색 커스터마이징

__정리



5장. 복잡한 컴포넌트 제작

__비주얼 엘리먼트에서 컴포넌트로

____주요 비주얼 요소 식별

____컴포넌트 식별

__컴포넌트 작성

____카드 컴포넌트

____Square 컴포넌트

____Label 컴포넌트

__속성 전달

__컴포넌트 결합성의 비밀

__정리



6장. 속성 전달

__문제점 인식

__문제점 분석

__스프레드 연산자와의 만남

__더 나은 속성 전달 방법

__정리



7장. JSX와의 재회

__JSX의 실체

__기억해야 할 JSX의 특징

____표현식 평가

____복수의 엘리먼트 리턴

____인라인 CSS 사용 불가

____주석

____대소문자 구별

__어디서든 가능한 JSX

__정리



8장. 상태 다루기

__상태 사용하기

____시작 지점

__카운터 켜기

____초기 상태 값 설정

____타이머 가동과 상태 설정

____상태 변경 후 렌더링

__참고: 전체 코드

__정리



9장. 데이터에서 UI로

__예제

__어디든 가능한 JSX - 2탄

__배열 다루기

__정리



10장. 이벤트

__이벤트 리스닝하기와 반응하기

____시작 지점

__버튼 작동시키기

__이벤트 속성

____합성 이벤트

____이벤트 속성 다루기

__또 다른 이벤트 처리 기법

____컴포넌트의 이벤트는 직접 리스닝할 수 없다

____일반 DOM 이벤트의 리스닝

____이벤트 핸들러 내부의 this

__리액트에서의 이벤트 처리는 … 도대체 왜?

____브라우저 호환성

____성능 향상

__정리



11장. 컴포넌트 생명주기

__생명주기 메소드와의 만남

__생명주기 메소드의 작동 확인

__초기 렌더링 단계

____기본 속성 설정

____기본 상태 설정

____componentWillMount

____render

____componentDidMount

__업데이트 단계

____상태 변경 다루기

____shouldComponentUpdate

____componentWillUpdate

____render

____componentDidUpdate

____속성 변경 다루기

__언마운트 단계

__정리



12장. DOM 엘리먼트 접근

__컬러라이저 예제

__ref와의 첫 만남

__포털 사용하기

__정리



13장. 리액트 개발 환경 구성

__Create React와의 첫 만남

____무슨 일이 벌어졌나?

__HelloWorld 앱 개발

__운영 버전 빌드하기

__정리



14장. 외부 데이터 사용

__웹 요청에 관한 기초

__이제 리액트 시간!

____시작하기

__IP 주소 가져오기

____흥미로운 비주얼 만들기

__정리



15장. Todo List 앱 제작

__시작하기

__초기 UI 제작

__앱의 나머지 부분 개발

____아이템 추가

____아이템 표시

____스타일 적용

____아이템 삭제

__애니메이션

__정리



16장. 슬라이드 메뉴

__슬라이드 메뉴의 작동 원리

__개발 준비

__시작하기

__메뉴 보이기와 감추기

____버튼 제작

____메뉴 제작

__정리



17장. 불필요한 렌더링 방지

__render 메소드의 정체

__render 호출의 최적화

____예제로 시작하기

__render 호출의 이해

____shouldComponentUpdate 재정의

____PureComponent 사용

__정리



18장. 리액트 라우터를 이용한 싱글 페이지 앱 제작

__예제

__시작하기

__앱 구축

____초기 프레임 보여주기

____콘텐츠 페이지 만들기

____리액트 라우터 사용하기

__소소한 작업들

__라우팅 문제 해결

____약간의 CSS 추가

____활성화된 링크의 강조

__정리



19장. 리덕스 소개

__리덕스란 무엇인가

__리덕스를 사용한 앱 제작

____리덕스 타임!

____조명! 카메라! 액션!

____이제 리듀서 차례

____마지막은 스토어

__정리



20장. 리액트와 리덕스

__리덕스를 이용한 리액트 상태 관리

____리액트와 리덕스 합치기

____시작하기

____앱 구축

__정리

키루파 친나탐비 자신만큼이나 웹 개발을 사랑하는 사람들을 교육하며 많은 시간을 보냈다. 블로깅이라는 단어조차 없었던 1999년부터 자신의 웹사이트(kirupa.com)에 튜토리얼을 포스팅하기 시작했다. 그 후로 지금까지 수백 개의 글을 쓰고 다수의 책을 저술했으며, 유튜브에서 시청할 수 있는 수십 개의 튜토리얼 비디오를 제작했다. 웹 개발에 대해 글을 쓰거나 강의하는 시간 이외에는 마이크로소프트의 프로그램 매니저로서 웹을 더욱 굉장하게 만드는 일을 한다.