페이스북이 만들고 사용 중인 모던 프런트엔드 라이브러리!

리액트는 조합형 인터페이스를 제작하기 위한 오픈소스 라이브러리로서 현재는 페이스북이 관리하고 있다. 이 라이브러리는 처음 공개된 이후로 빠른 속도로 보급되고 있으며, 관련 커뮤니티의 사용자도 꾸준히 증가하고 있다.

이 책은 jQuery 또는 백본/앵귤러 등으로 프런트엔드 앱을 개발해본 경험이 있지만 날로 복잡해지는 프런트엔드 애플리케이션을 효율적으로 제작할 수 있는 향상된 도구와 지식을 필요로 하는 중급 자바스크립트 개발자를 위해 구성됐다.

리액트 라이브러리를 자세히 소개하고 인터페이스를 조합형으로 제작하는 최상의 방법을 설명한다. 리액트 라이브러리 자체는 아직 작기 때문에 완전한 애플리케이션을 만들 수 있는 충분한 지식을 독자에게 전달하기 위해 리액트 라우터나 플럭스 아키텍처 같은 리액트 생태계의 부가적인 도구와 라이브러리를 함께 다룬다.

각 주제는 특정 문제를 효과적으로 해결할 수 있는 정보를 전달하기 위해 간결하고 명확하게 구성했다. 가장 중요한 기능에 대해서는 현실적이고 구체적인 활용 방안을 제시하며, 모든 단원에서 흔히 발생하는 문제와 이러한 문제를 예방하는 방법을 자세히 다룬다.

『프로 리액트』는 점차 복잡해지는 프런트엔드 애플리케이션과 인터페이스를 효과적으로 제작하는 방법을 알려주는 책이다. 이 책은 리액트 라이브러리와 리액트 생태계의 추가 도구와 라이브러리를 이용해 복잡한 애플리케이션을 제작할 수 있는 과정을 심도 있게 다룬다.

리액트를 완전하게 이용하는 방법과 인터페이스를 조합형으로 제작하는 모범 사례를 배운다. 또 리액트 라우터 및 플럭스 아키텍처 같은 리액트 생태계의 추가 도구와 라이브러리에 대해서도 알아본다. 각 주제는 주어진 문제를 효과적으로 해결할 수 있는 정보를 전달하기 위해 간결하고 명확하게 구성돼 있다. 가장 중요한 기능에 대해서는 현실적이고 구체적인 이용 방안을 제시하며 모든 단원에서는 흔히 발생하는 문제와 이러한 문제를 예방하는 방법을 자세히 다룬다.

이 책은 jQuery나 다른 자바스크립트 프레임워크를 이용해 프런트엔드 앱을 개발해본 경험이 있지만 점차 복잡해지는 프런트엔드 애플리케이션을 효과적으로 제작하기 위한 방법을 찾는 독자에게 최적의 방법을 안내한다. 지금 바로 『프로 리액트』를 선택하고 리액트 전문가를 향한 발걸음을 시작하자.

★ 이 책에서 다루는 내용 ★

  • 조합형 사용자 인터페이스를 구축하는 방법을 배운다.
  • 리액트의 가상 DOM 아키텍처를 소개하고 가상 DOM이 애플리케이션 개발에 미치는 영향을 이해한다.
  • 각 기능이 작동하는 방법과 이러한 기능이 중요한 이유를 이해한다.
  • 리액트 자체는 물론 리액트 생태계의 주요 타사 라이브러리를 심도 있게 다룬다.
  • 사용자 경험과 검색 엔진을 최적화하는 데 도움이 되는 동형/유니버셜 애플리케이션을 개발하는 방법을 배운다.
  • 복잡한 애플리케이션의 데이터 흐름 전략을 체계적이고 포괄적으로 분석한다.
  • 리액트 프로젝트를 테스트, 개선, 배포하는 방법을 배운다.

카시우 지 소자 안토니우 (Cássio de Sousa Antonio)

카시우 지 소자 안토니우는 20년 전 싱클레어 스펙트럼(Sinclair Spectrum)에서 프로그래밍을 시작한 후 브라질과 미국에서 소프트웨어 엔지니어이나 기술 관리자로 일해왔으며, 마이크로소프트, 코카콜라, 유니레버, HSBC 등 여러 대기업의 주요 프로젝트에 참여했다. 그가 창업한 회사는 2014년 후반 인수됐으며, 현재 컨설턴트로 일하고 있다. 트위터에서는 @cassiozen으로 활동하고 있다.

최민석

번역회사에서 언어전문가로 일하다 뜻하는 바를 이루기 위해 프리랜서로 독립해서 현재는 전문 번역가로 일하고 있다. 주로 IT 관련 소프트웨어의 현지화와 개발자 웹 사이트 관련 프로젝트를 진행하고 있으며 앞으로 개발자 서적 분야에서 작은 변화를 일으키고 싶다는 소박한 소망이 있다. 번역가의 고민은 독자의 고민과 반비례한다는 믿음으로 오늘도 기꺼이 고민할 준비가 돼 있다. 번역한 책으로는 『네티 인 액션』 『엔터프라이즈 애플리케이션 아키텍처 패턴』 『유니티와 C#으로 배우는 게임 개발 교과서』 『자바 웹 개발 완벽 가이드』 『시작하세요! 스프링 4 프로그래밍』 『게임 디자인 워크숍』이 있다.

  • ▣ 1장: 시작하기
    • 시작하기 전에
      • Node.js와 npm
      • 자바스크립트 ES6
    • 리액트의 정의
    • 리액트의 장점
      • 편리한 반응형 렌더링
      • 순수 자바스크립트를 이용한 컴포넌트 기반 개발
      • 문서 모델의 유연한 추상화
    • 첫 번째 리액트 앱 작성
      • 리액트 개발 워크플로
      • 첫 번째 컴포넌트 만들기
      • 타이핑 수고를 약간 줄이는 방법
      • 동적 값
    • 컴포넌트 조합하기
      • 속성
      • 칸반 보드 앱 소개
      • 컴포넌트 계층 정의
      • 속성의 중요성
      • 컴포넌트 만들기
      • 앱 모듈(App.js)
    • 상태 소개
      • 칸반 앱: 토글되는 카드
    • 정리
    •  
  • ▣ 02장: DOM 추상화의 내부
    • 리액트의 이벤트
      • DOM 이벤트 리스너
      • 칸반 앱: DOM 이벤트 관리
    • JSX 자세히 살펴보기
      • JSX와 HTML 비교
      • JSX와 HTML의 차이
      • JSX의 특이점
    • 칸반 앱: 카드가 열려있는지 여부 확인
      • 공백
      • JSX의 주석
      • 동적 HTML 렌더링
      • 칸반 앱: 마크다운 렌더링
    • JSX를 배제하고 리액트 이용
      • 일반 자바스크립트로 리액트 요소 만들기
      • 요소 팩토리
      • 커스텀 팩토리
    • 인라인 스타일링
      • 인라인 스타일 정의
      • 칸반 앱: 인라인 스타일링을 이용한 카드 색상 지정
    • 폼 처리
      • 제어 컴포넌트
      • 특수 사례
      • 비제어 컴포넌트
      • 칸반 앱: 태스크 폼 만들기
    • 가상 DOM의 작동 방식
      • 칸반 앱: 키
      • ref
    • 정리
    •  
  • ▣ 03장: 컴포넌트를 이용한 애플리케이션 구축
    • 속성 유효성 검사
      • 속성 기본값
      • 기본 제공되는 propTypes 유효성 검사기
      • 칸반 앱: 속성 형식 정의
      • 커스텀 propTypes 유효성 검사기
    • 컴포넌트 조합 전략과 모범 사례
      • 상태 저장 컴포넌트와 순수 컴포넌트
      • 어떤 컴포넌트가 상태 저장이어야 할까?
      • 데이터 흐름과 컴포넌트 통신
    • 컴포넌트 수명주기
      • 수명주기 단계와 메서드
      • 수명주기 함수의 실제 활용: 데이터 가져오기
    • 불변성에 대한 개요
      • 일반 자바스크립트에서의 불변성
      • 중첩된 객체
      • 리액트 불변성 도우미
    • 칸반 앱: 약간의 복잡성 추가
    • 정리
    •  
  • ▣ 04장: 정교한 상호작용
    • 리액트의 애니메이션
      • CSS 트랜지션과 애니메이션의 기초
      • ReactCSSTransitionGroup
    • 드래그 앤드 드롭
      • 리액트 DnD 구현 개요
      • 리액트 DnD 예제 구현
    • 칸반 앱: 애니메이션과 드래그 앤드 드롭 지원
      • 카드 토글 애니메이션
      • 카드 드래그
    • 정리
    •  
  • ▣ 05장: 라우팅
    • 라우팅을 구현하는 단순한 방식
    • 리액트 라우터
      • 인덱스 라우트
      • 매개변수를 이용하는 라우트
      • 활성 링크 설정
      • 속성 전달하기
      • UI와 URL의 연결 분리
      • 프로그래밍 방식으로 라우트 변경
      • 히스토리
      • 칸반 앱: 라우팅
    • 정리
    •  
  • ▣ 06장: 플럭스를 이용한 리액트 애플리케이션 설계
    • 플럭스란?
      • 스토어
      • 액션
      • 디스패처
    • 실용성이 없는 최소 플럭스 앱
      • 은행계좌 애플리케이션
    • 플럭스 유틸
      • 플럭스 유틸 스토어
      • 컨테이너 컴포넌트 고차 함수
    • 비동기 플럭스
      • waitFor: 스토어 업데이트 순서
      • 비동기 데이터 가져오기
    • 에어치프 애플리케이션
      • 설정: 프로젝트 구성과 기본 파일
      • 공항을 가져오는 액션 생성자와 API 도우미 작성
      • AirportStore
      • App 컴포넌트
      • 에어치프 애플리케이션 완성: 항공권 로딩
      • API 도우미
    • 비동기 데이터 가져오기 구현 발전시키기
      • AppDispatcher의 dispatchAsync 메서드
    • 칸반 앱: 플럭스 아키텍처로 전환
      • 리팩터: 플럭스 기본 구조 제작 및 파일 이동
      • 플럭스 아키텍처로 데이터 가져오기 전환
      • FetchCards 액션, API 메서드 호출, 스토어 콜백 구현
      • 모든 카드와 태스크 조작을 플럭스 아키텍처로 이식하기
      • 기능 이식을 위한 준비
      • 컴포넌트
      • 모든 컴포넌트 상태 제거
    • 정리
    •  
  • ▣ 07장: 성능 튜닝
    • 조정 프로세스 작동 방식
      • 일괄 처리
      • 하위 트리 렌더링
    • 리액트 퍼프
      • 성능 테스트 애플리케이션
      • 리액트 퍼프 설치와 이용
    • shouldComponentUpdate
      • shallowCompare 애드온
    • 정리
    •  
  • ▣ 08장: 동형 리액트 애플리케이션
    • Node.js와 익스프레스
      • Node.js와 익스프레스를 이용한 “Hello World” 애플리케이션 제작
    • 동형 리액트의 기본
      • 프로젝트 구조 만들기
      • 서버상의 리액트 컴포넌트 렌더링
      • 클라이언트에 리액트 마운팅
    • 라우팅
      • 내부 라우트 설정
      • 동적 데이터 가져오기
      • 라우트 렌더링
    • 정리
    •  
  • ▣ 09장: 리액트 컴포넌트의 테스트
    • 제스트
    • 리액트 테스트 유틸리티
      • 테스트용 컴포넌트 렌더링
      • 자식 순회 및 찾기
      • 이벤트 시뮬레이션
      • 얕은 렌더링
    • 정리
    •  
  • ▣ 부록A: 웹팩
    • 웹팩이란?
    • 그런트나 걸프와 같은 빌드 도구와의 차이점
    • 시작하기
      • 예제 프로젝트
      • 첫 번째 빌드 실행
    • 구성 파일 정의
      • 태스크 바로가기 추가
      • 소스맵 생성
    • 웹팩 개발 서버
    • 로더
    • 바벨
      • 설치와 구성
      • 바벨 구성 파일
    • 자바스크립트 외의 애셋
      • 스타일시트
      • CSS 모듈
      • CSS 프로세서
    • 플러그인
      • 플러그인 이용하기
      • html-webpack-plugin
    • HMR
    • 실무용 빌드
    • 최적화 플러그인
    • 캐싱
    • 정리
    •  
  • ▣ 부록B: 자바스크립트 2015
    • 클래스
    • 모듈
    • let과 const
    • 프로미스
    • 화살표 함수
    • 템플릿 문자열
    • 구조분해 할당
- **예제 실행 오류**

`npm install --save react react-dom`과 같은 명령어로 리액트를 설치할 경우 최신 버전으로 설치되어 책의 예제가 동작하지 않는 문제가 있습니다. 이 경우 `react-dom`을 임포트하는 `import {render} from 'react-dom';` 구문을 추가합니다.
  • 리액트를 최신버전으로 설치할 경우(페이스북 Haneul Cho 님 의견)

    import {render} from 'react-dom'; 모듈 임포트 구문 추가뿐 아니라 예제 DOM render 코드를 React.render(<APP />, document.getElementById('root')); 에서 render(<APP />, document.getElementById('root')); 로 수정해야 예제가 정상적으로 작동합니다.

    구조 분해 할당 없이 import ReactDOM from 'react-dom'; 으로 모듈 임포트 구문을 추가했다면 DOM render는 ReactDOM.render(<APP />, document.getElementById('root'));로 수정합니다.

  • 40쪽, 페이지 하단 예제 코드의 3번째 줄

    " Have a nice day"), --> "Have a nice day"),

  • 77쪽, 예제 3-6

    ContacsApp 코드 --> ContactsApp 코드

  • 95쪽, 밑에서 6번째 줄 코드

    npm install .save react-addons-update --> npm install --save react-addons-update

  • 180쪽, 밑에서 8번째 줄

    npm install --save react-router@1.x.xhistory@1.x.x 명령을 이용해

    ==>

    npm install --save react-router@1.x.x history@1.x.x 명령을 이용해

  • 374쪽, 본문 밑에서 2번째 줄

    npm install .save-dev --> npm install --save-dev

예제 코드 깃허브 페이지

칸반 앱 예제 코드 다운로드

셸에서 다음 명령어를 실행합니다.

$ git clone https://github.com/pro-react/kanban-app.git
$ git fetch --all
$ git checkout chapter3

원서책 홈페이지

관련 글


엮인 글

엮인 글 주소: http://wikibook.co.kr/pro-react/trackback/