추가 적립 안내

『시작하세요! 리액트 프로그래밍』은 웹 개발 관점에서 리액트를 배우는 데 초점을 맞춘다. 처음에는 아무것도 없는 빈 HTML 파일에서 시작해 점차 필요한 요소를 추가한다. 이 방법을 통해 새로운 구문이나 부가적인 툴이 아닌 리액트를 배우는 데 집중할 수 있다.

그러고 나서 일반적으로 리액트와 함께 사용되는 별개의 선택적인 기술인 JSX에 대해 다루며, 실제로 앱을 개발하는 데 필요한 사항과 그 과정에 도움이 되는 부수적인 툴을 살펴본다. 이러한 부수적인 주제로는 자바스크립트 패키징 툴(Browserify), 단위 테스트(Jest), 린팅(ESLint), 형식(Flow), 앱 내 데이터 흐름 조직화(Flux), 그리고 불변 데이터(Immutable.js)가 있다. 이 책의 핵심 주제인 리액트에 초점을 유지하기 위해 이러한 부수적인 기술에 대해서는 최소한으로 소개하지만, 각자 필요로 하는 기술을 선택할 수 있도록 충분한 정보를 담았다.

다기능 웹 애플리케이션을 신속하게 개발하기 위한 페이스북의 오픈소스 기술인 리액트를 시작해보자. 야후 웹 개발자인 스토얀 스테파노프는 이 실용적인 안내서에서 리액트의 기본 구성요소인 컴포넌트를 개발하고 이를 바탕으로 유지 관리하기 편리한 대규모 앱으로 구축하는 방법을 설명한다. 기본적인 자바스크립트 구문에 익숙하다면 지금 바로 시작해보자.

리액트의 기본 작동 방식을 배우고 나면 사용자가 와인에 대한 평가를 기록할 수 있는 와인패드라는 앱을 제작한다. 이 과정에서 많은 웹 개발자들이 리액트를 웹 개발의 핵심 기술로 인정하는 이유를 이해할 수 있을 것이다.

★ 이 책에서 다루는 내용 ★
◎ 리액트 설정과 첫 번째 "Hello world" 웹 앱 작성
◎ 일반 DOM 컴포넌트와 함께 사용할 커스텀 리액트 컴포넌트 개발
◎ 내용을 편집, 정렬, 검색하고 내보낼 수 있는 데이터 테이블 컴포넌트 개발
◎ 함수 호출 방식을 대신할 수 있는 JSX 구문 확장 사용
◎ 리액트에 집중하는 데 도움이 되는 간소한 저수준 빌드 프로세스 설정
◎ 데이터를 클라이언트에 저장하는 완전한 커스텀 앱 개발
◎ ESLint, 플로우(Flow), 제스트(Jest) 툴을 이용해 앱 개발 과정에서 코드를 검사하고 테스트
◎ 플럭스를 이용한 컴포넌트 간의 통신 관리

▣ 01장: Hello World
설정
Hello React World
작동 원리
React.DOM.*
특수한 DOM 속성
리액트 데브툴 브라우저 확장
다음 단계: 커스텀 컴포넌트

▣ 02장: 컴포넌트의 수명
최소 요건
프로퍼티
propTypes
___기본 프로퍼티 값
상태
상태 저장 텍스트 영역 컴포넌트
DOM 이벤트 참고 사항
___기존의 이벤트 처리 방식
___리액트의 이벤트 처리
프로퍼티와 상태
초기 상태의 프로퍼티: 안티 패턴
외부에서 컴포넌트 접근
작동 중 프로퍼티 변경
수명 주기 메서드
수명 주기 예제: 모두 기록하기
수명 주기 예제: 믹스인 사용
수명 주기 예제: 자식 컴포넌트 사용
성능을 위한 컴포넌트 업데이트 방지
PureRenderMixin

▣ 03장: Excel: 멋진 테이블 컴포넌트
데이터 준비
테이블 헤더 루프
콘솔 경고 디버깅
td 내용 추가
___컴포넌트를 개선하는 방법
정렬
___컴포넌트를 개선하는 방법
정렬 UI 표시
데이터 편집
___편집 가능한 셀
___입력 필드 셀
___저장
___가상 DOM의 차이점 비교와 결론
검색
___상태와 UI
___내용 필터링
___검색을 개선하는 방법
빠른 재현
___재현 기능을 개선하는 방법
___다른 구현 방법
테이블 데이터 내려받기

▣ 04장: JSX
Hello JSX
JSX 트랜스파일
바벨
클라이언트 측
JSX 변환
JSX에서 자바스크립트 사용
JSX의 공백
JSX의 주석
HTML 엔터티
___XSS 방지
스프레드 속성
___부모 대 자식 스프레드 속성
JSX에서 여러 노드 반환
JSX와 HTML의 차이점
___className과 htmlFor
___style이 객체로 취급됨
___닫는 태그
___캐멀표기법으로 속성 표기
JSX와 폼
___onChange 핸들러
___value와 defaultValue
___〈textarea〉와 value
___〈select〉와 value
JSX를 이용한 Excel 컴포넌트 수정

▣ 05장: 앱 개발을 위한 설정
기본 파트 앱
___파일과 폴더
___index.html
___CSS
___자바스크립트
___자바스크립트: 현대화
필수 구성 요소 설치
___Node.js
___브라우저리파이
___바벨
___리액트 및 기타 항목
빌드 시작
___자바스크립트 트랜스파일
___자바스크립트 패키징
___CSS 패키징
___결과!
___윈도우 버전
___개발 중 빌드하기
배포
앞으로 할 일

▣ 06장: 앱 구축하기
와인패드 v.0.0.1
___설정
___코딩 시작
컴포넌트
___설정
___검색
___〈Button〉 컴포넌트
___Button.css
___Button.js
___폼
___〈Suggest〉
___〈Rating〉 컴포넌트
___〈FormInput〉 “팩터리”
___〈Form〉
___〈Actions〉
___대화상자
앱 구성
새로 개선된 〈Excel〉
Whinepad
마무리

▣ 07장: 린트, 플로우, 테스트, 반복
package.json
___바벨 구성
___스크립트
ESLint
___설정
___실행
___전체 규칙
플로우
___설정
___실행
___형식 검사 사용하기
___〈Button〉 수정하기
___app.js
___프로퍼티와 상태의 형식 검사
___형식 내보내기/가져오기
___형변환
___불변항(Invariant)
테스트
___설정
___첫 번째 테스트
___첫 번째 리액트 테스트
___〈Button〉 컴포넌트의 테스트
___〈Actions〉 테스트
___전체 상호작용 테스트
___적용 범위(coverage)
기본 개념

▣ 08장: 플럭스
와인패드 다시 살펴보기
저장소
___저장소 이벤트
___〈Whinepad〉에서 저장소 사용
___〈Excel〉에서 저장소 사용
___〈Form〉에서 저장소 사용
___선긋기
액션
___CRUD 액션
___검색과 정렬
___〈Whinepad〉에서 액션 사용
___〈Excel〉에서 액션 사용
플럭스 정리
불변
불변 저장소 데이터
___불변 데이터 조작