리 액트 정복 하 기 | 에이콘 출판사 
 리 액트 정복 하 기 [ 컴포넌트 와 라이프사이클 기반 ] 
 원 서명 Mastering React : Master the art of building modern web applications using React ( ISBN 9781783558568 ) 
 지은 이 아담 홀튼 ( Adam Horton ) , 라이언 바이스 ( Ryan Vice ) 
 2016 년 12 월 28 일 펴냄 페이퍼백 | 304 쪽 | 188 * 235 mm 시리즈 : acorn + PACKT 
 요약 리 액트 초보 개발자 가 리 액트 컴포넌트 , 리 액트 웹 애플리케이션 설계 방법 , 리 액트 애니메이션 기술 을 이용 해서 중급 기술 을 습득 할 수 있 도록 개별 기술 과 실질 적 인 예제 프로젝트 를 자세히 설명 한다 . 특히 리 액트 와 관련 개발 기술 을 이용 해서 직접 따라 할 수 있 는 블로그 앱 은 독자 가 실제로 체험 할 수 있 는 중급 이상 의 리 액트 애플리케이션 개발 경험 이 될 것 이 다 . 
 추천 의 글 “ 바퀴 를 재 창조 하 지 마 라 ” 라는 오래 된 격언 을 들 어 본 적 이 있 을 것 이 다 . 특히 소프트웨어 기술 과 관련 이 있 는 방법 에서 는 이 격언 에 더욱 공감 이 간다 . 프로그래머 라면 항상 알려진 패턴 으로 작업 하 고 가능 한 한 빨리 배포 하 는 것 이 덕목 이 다 . 야크 셰 이빙 ( yak shaving ) ( 한 가지 일 을 진행 하 는데 점차 연관 성 이 떨어지 는 일 을 하 게 되 는 현상 ) , 바이크 쉐 딩 ( bikeshedding ) ( 불 필요 한 기술 적 논쟁 에 시간 과 노력 을 투자 하 는 일 ) , 금 도금 ( gold plating ) , 어설픈 진행 , 설정 , 시시 한 일 , 실험 , 재 작업 , 특별 한 눈송이 아키텍처 같 은 , 겉보기 에 불 필요 한 실험 과 재 작업 이 라 폄하 하 는 많 은 소프트웨어 기술 단어 들 을 사용 한다 . 또한 폭포수 를 이제 그만 따르 고 , 자신 이 익숙 한 강가 나 호수 를 따르 라는 말 을 들어왔 다 . 최상위 의 소프트웨어 개발자 들 은 가장 훌륭 한 예시 와 검증 된 표준 을 구현 해서 거인 의 어깨 위 에 있 는 것 을 자랑 스럽 게 여긴다 . 반대 로 , 소프트웨어 방종 의 본보기 는 NIH 증후군 ( Not Invented Here Syndrome ) ( 신 제품 을 구상 한 부서 를 다른 부서 에서 적대시 하 거나 위협 으로 느끼 는 현상 ) 이 있 는 공간 이 다 . 계획 에 의존 해서 집중 하 고 시간 을 낭비 하 지 않 으며 , 우리 가 이미 하 고 있 는 일 을 진행 해야 한다 . 특정 소프트웨어 개발자 커뮤니티 가 이런 세계관 을 받아들이 지 않 는다면 , 그곳 은 바로 자바 스크립트 의 심각 한 전문 개발 자 일 것 이 다 . 끊임없이 움직이 는 주요 브라우저 기술 , 다양 한 배경 을 가진 개발자 들 의 끝 이 없 는 유입 , 자바 스크립트 자체 의 지속 적 인 표준 의 진화 는 소프트웨어 개발 스택 의 변화 를 만들 어 낸다 . 재창조 는 일반 적 이 고 항상 있 어 왔 다 . 브라우저 의 DOM 과 상호 작용 하 는 데 문제 가 있 을 때 , 재창조 의 목표 가 설정 된다 . 시 즐 ( Sizzle ) , 제이 쿼리 ( jQuery ) , 마지막 으로 브라우저 네이티브 구현 체인 querySelectorAll 은 이미 존재 하 는 표준 에 대한 기본 적 인 불 만족 으로 태어났 다 . 가장 좋 은 XML , JSON 의 예시 코드 에서 웹 통신 을 위한 주요 표준 으로 발생 했 다 . 오늘 자바 스크립트 프레임워크 를 내려 받 으면 어떤 종류 의 패턴 이 라도 사용 할 수 있 을 것 이 다 . MVVM , MVC , MVW , MVP , 체 이닝 연결 ( Chain of Responsibility ) , 발행 구독 패턴 ( PubSub ) , 이벤트 기반 , 선언 적 , 기능 적 , 객체 지향 , 모듈 , 프로토타입 이 라는 변화 하 는 모형 과 규모 를 살펴보 자 . 프로그램 을 설계 하 는 데 는 한 가지 방법 만 존재 하 는 것 이 아니 다 . 더욱이 커피 스크립트 ( CoffeeScript ) , 라이브 스크립트 ( LiveScript ) , 바벨 ( Babel ) , 타입 스크립트 ( Typescript ) , 아놀드 씨 ( ArnoldC ) 같 은 전처 리기 세상 을 보 면 개발자 는 열병 에 걸린 듯이 자바 스크립트 자체 를 재 창조 하 려 한다 . 성 스러울 것 도 없 지만 아마도 자바 스크립트 가 엄청 빠르 게 진화 하 는 원동력 일 것 이 다 . 내 가 처음 으로 리 액트 를 배웠 을 때 가 생각난다 . 샌프란시스코 에서 개최 된 유명 한 컨퍼런스 에 참석 했 는데 , 점심 시간 에 공개 대화 를 진행 했 던 페이스북 과 칸 아카데미 ( Khan Academy ) 의 개발자 들 옆 에 앉 게 되 었 다 . 그 당시 가장 유명 한 개발 도구 는 엠버 ( Ember ) , 백본 ( Backbone ) , 그리고 앵 귤 러 ( Angular ) ( 당시 컨퍼런스 에서 그 주제 로 30 개 의 강연 이 있 었 다 ) 였 다 . 우리 는 기존 개발 도구 의 장단점 을 토론 했 고 , 우리 가 느끼 는 개발 의 어려움 은 웹 애플리케이션 을 어떻게 추상 화 할지 에 대한 지배 적 인 견해 때문 에 존재 했 다 . 그 당시 내 옆 에 앉 아 있 던 개발자 는 “ 리 액트 패밀리 를 접해 보 는 것 이 좋 겠 어요 ” 라고 했 고 그날 그 의 유일 한 컨퍼런스 에 나 를 초대 했 다 . 물론 참석 했 다 . 결국 내 가 참석 했 던 가장 가치 있 는 ( 그리고 그 당시 많 은 논쟁 이 있 었 다 ) 세미나 였 다 . 자신 을 피트 헌트 ( Pete Hunt ) 라고 소개 한 점심 컨퍼런스 진행자 는 웹 애플리케이션 에 관한 새로운 방법 을 제시 한 핵심 기여 자 가 되 었 다 . 나 는 그 의 강연 에 참석 했 고 , 자바 스크립트 의 차세대 재창조 견인차 를 찾 았 다는 사실 을 갑자기 인식 했 다 . 일반 적 인 양방향 데이터 바인딩 기법 은 단 방향 데이터 흐름 을 위해 사용 하 지 않 고 애플리케이션 단체 의 표준 MVC 패턴 은 재조명 하 면서 액션 , 스토어 , 디스패치 형태 로 변형 했 다 . 그러나 가장 흥미 로우 면서 도 근본 적 인 리 액트 의 특징 은 문제 를 일으키 는 DOM 의 처리 로 , 자바 스크립트 의 기본 부터 DOM 을 완벽 하 면서 자신 있 게 재 구성 하 는 것 이 다 . 여러분 이 이 책 을 집 어 들 었 다면 이미 자바 스크립트 의 미래 에 흥미 가 있 을 것 이 다 . 이 처럼 반복 되 는 자바 스크립트 의 재 창조 주제 는 지난 몇 년 사이 에 서로 밀접 한 연관 성 이 있 어 왔 다 . 리 액트 , ES 6 , 빌드 시스템 , 스 캐 폴 딩 ( scaffolding ) 등 많 은 것 이 자바 스크립트 의 전망 을 밝 게 비추 는 새로운 개발 도구 다 . 이 책 은 현대 에코 시스템 과 더불 어 리 액트 를 설명 한다는 점 에서 중요 하 다 하 겠 다 . 이 책 을 읽 고 나 면 상용 애플리케이션 을 계획 하 고 , 설계 하 고 , 결국 개발 하 는 데 필요 한 모든 원칙 을 이해 하 게 될 것 이 다 . 애플리케이션 설계 영역 으로 흥미 로운 여행 을 떠날 때 아담 만큼 훌륭 한 선생 도 없 다 . 학창 시절 아담 을 처음 만났 는데 , 월드 웹 애플리케이션 에서 최초 이 자 가장 훌륭 한 것 에 초점 을 둔 컨퍼런스 인 썬더 플레인 ( Thunder Plains ) 에서 그 가 강연 하 는 모습 을 보 고 빠져 들 었 다 . 아담 은 중간 지점 으로 이동 하 는 기능 을 기반 으로 하 는 상륙 게임 과 자바 스크립트 바닐라 프로젝트 로 완벽 하 게 재 구성 한 3 D 광선 투과 엔진 같 은 개인 프로젝트 형태 의 기발 한 컬렉션 을 공개 했 다 . 아담 은 유일무이 한 프로그래머 다 . 그 는 과학자 , 땜쟁이 , 공예가 처럼 일 한다 . 기존 시스템 을 좀 더 잘 이해 하 기 위해 재 구성 하 는 일 을 서슴 지 않 을 뿐 더러 자신 의 목표 를 달성 하 기 위해 좀 더 나 은 방법 을 찾 아서 새로운 방법 으로 실험 하 기 를 즐긴다 . 자바 스크립트 세상 의 흥미 롭 고 재미난 일 들 속 으로 들어갈 때 는 중요 생각 , 탐험 과 발견 을 장려 하 는 안내자 가 필요 하 다 . 또 다른 안내자 는 마이크 로 소프트 MVP 를 수년 에 걸쳐 3 회 거머쥐 었 고 , 엔터 프라이즈 아키텍처 에 대한 책 을 저술 했으며 , 산업 이벤트 에 강사 로 자주 활동 하 고 , 소프트웨어 개발 의 전쟁 으로 물든 3 차원 세상 에서 일 해 온 라이언 바이스 ( Ryan Vice ) 가 있 다 . 그러나 좀 더 중요 한 점 은 라이언 은 문제 해결 을 위한 웹 스택 의 중심 에 리 액트 를 사용 하 는 바이스 소프트웨어 LLC 회사 를 설립 했 다는 점 이 다 . 리 액트 프로젝트 에 대한 현장 경험 을 바탕 으로 , 피 튀기 는 웹 환경 에서 여러분 이 자신 만 의 웹 애플리케이션 을 개발 할 때 도움 이 되 는 훌륭 한 안내자 가 돼 줄 것 이 다 . 바퀴 를 새로 창조 할 필요 가 있 다 . 동의 하 지 못하 는 독자 가 있 다면 이미 창조 된 첫 번 째 바퀴 를 각자 의 자동차 에 붙여 보 는 과제 를 내주 고 싶 다 . 자신 의 신념 을 따르 되 복잡 한 돌 디스크 가 깔려 있 는 고속도로 를 즐겁 게 달리 길 바란다 . 하늘 을 나 는 자동차 를 꿈꾸 며 자바 스크립트 에 내 기 를 걸 게 될 것 이 다 . 제시 할린 ( Jesse Harlin ) 
 http : / / jesseharlin . net / 
 자바 스크립트 아키 텍 트이 자 커뮤니티 리더 
 이 책 에서 다루 는 내용 ■ 리 액트 컴포넌트 라이프사이클 과 props , states 등 의 핵심 개념 의 이해 ■ 리 액트 를 이용 한 폼 구현 및 폼 유효 성 검사 패턴 구현 ■ 모던 싱글 페이지 웹 애플리케이션 구조 의 이해 ■ 방대 한 웹 기술 의 선택 으로 인해 스트레스 를 받 지 않 고 도 웹 기술 을 선택 및 조합 하 는 방법 이해 ■ 완벽 한 싱글 페이지 애플리케이션 개발 ■ 애플리케이션 디자인 절차 를 고려 해 작성 한 계획 에 따라 개발 시작 ■ 애플리케이션 프로토 타이핑 기술 과 툴 에 자신 만 의 개발 무기 추가 ■ 애니메이션 을 이용 해 화려 한 리 액트 애플리케이션 제작 
 이 책 의 대상 독자 이미 자바 스크립트 와 CSS 를 이해 하 고 웹 브라우저 환경 에서 개발 하 는 웹 전문가 에게 초점 을 맞춘다 . 기타 웹 애플리케이션 프레임워크 를 이용 한 과거 의 개발 경험 이 꼭 필요 한 것 은 아니 지만 도움 이 될 것 이 다 . 명령어 터미널 에 익숙 한 경우 에 도 좀 더 쉽 게 따라갈 수 있 다 . 
 1 장 , ‘ 리 액트 소개 ’ 에서 는 단순 한 헬로 월드 예시 부터 시작 해 , 리 액트 엔 티티 와 정의 내용 으로 초점 을 이동 하 면서 리 액트 의 기본 내용 을 설명 한다 . 2 장 , ‘ 컴포넌트 통합 과 라이프사이클 ’ 에서 는 컴포넌트 의 계층 화 를 비롯 해 , DOM 에서 컴포넌트 를 입력 하 고 제거 하 면서 컴포넌트 의 상태 를 관리 한다 . 3 장 , ‘ 동적 컴포넌트 , 믹스 인 , 폼 그리고 JSX ’ 에서 는 리 액트 의 유효 성 검사 를 위해 리 액트 폼 의 기본 과 패턴 을 살펴본다 . 4 장 , ‘ 리 액트 애플리케이션 의 구조 ’ 에서 는 웹 애플리케이션 디자인 의 접근 방법 과 함께 , 독자 들 의 주요 선택 사항 이 되 는 리 액트 컨텍스트 내부 에서 사용 할 수 있 는 광범위 한 웹 기술 메뉴 를 선택 하 는 방법 을 설명 한다 . 기술 적 인 디자인 을 연습 하 고 개발 을 안내 하 는 결과물 생성 방법 을 학습 해 보 자 . 5 장 , ‘ 리 액트 애플리케이션 시작 ’ 에서 는 모든 기능 을 갖춘 리 액트 다중 사용 자 블로그 애플리케이션 을 구현 한다 . 개발 환경 을 준비 하 고 모든 개발 도구 를 설치 하 며 , 모든 애플리케이션 뷰 를 스 캐 폴 딩 한다 . 6 장 , ‘ 리 액트 블로그 앱 파트 1 : 액션 과 공통 컴포넌트 ’ 에서 는 리플 럭스 액션 을 이용 해 애플리케이션 통신 전략 을 수립 한다 . 여기 서 는 일부 공통 컴포넌트 를 개발 한다 . 7 장 , ‘ 리 액트 블로그 앱 파트 2 : 사용자 ’ 에서 는 블로그 애플리케이션 의 프로토타입 을 위한 사용 자 계정 관리 기능 구현 방법 을 설명 한다 . 8 장 , ‘ 리 액트 블로그 앱 파트 3 : 포스트 ’ 에서 는 블로그 포스트 를 생성 하 고 화면 에 표시 한다 . 
 9 장 , ‘ 리 액트 블로그 앱 파트 4 : 무한 스크롤 과 검색 ’ 에서 는 무한 스크롤 로딩 과 검색 기능 을 추가 하 는 방법 을 설명 한다 . 10 장 , ‘ 리 액트 애니메이션 ’ 에서 는 리 액트 의 웹 애니메이션 기술 을 설명 한다 . 
 지은 이 소개 아담 홀튼 ( Adam Horton ) 
 라이언 바이스 ( Ryan Vice ) 
 기존 의 애플리케이션 을 마케팅 하 거나 현대 화 하 기 위해 MVP 를 찾 으려는 고객 들 을 위한 현실 적 인 맞춤 형 솔루션 개발 을 전문 으로 하 는 바이스 소프트웨어 ( Vice Software ) 의 창업자 이 자 핵심 아키 텍 트 다 . 전반 적 으로 좀 더 경쟁력 있 는 가격 을 제공 하 는데 , 바이스 소프트웨어 는 기술 이 포함 된 가격 을 제공 한다 . 즉 , 필요 한 경우 아키 텍 트 부분 에 해당 하 는 비용 만 지불 하 면 좀 더 단순 한 작업 에서 는 훨씬 적 은 제품 비용 만 지불 하 면 된다 . 마이크 로 소프트 의 MVP 상 을 3 회 수상 했으며 , 소프트웨어 관련 책 을 출간 했 고 , 텍사스 에서 개최 되 는 컨퍼런스 와 이벤트 에서 강사 로 활동 했 다 . 또한 아내 히더 와 결혼 한 행운아 며 , 세 자녀 그레이스 , 딜란 , 노아 와 함께 여가 시간 의 대부분 을 보내 고 있 다 . 
 옮긴 이 의 말 리 액트 는 페이스북 에서 공개 하 고 다중 플랫폼 에서 적용 할 수 있 는 서버 클라이언트 겸용 자바 스크립트 라이브러리 다 . 소프트웨어 의 MVC 패턴 에서 뷰 에 해당 하 는 코드 의 모듈 화 와 컴포넌트 화 를 좀 더 쉽 게 개발 할 수 있 는 인터페이스 를 제공 하 고 , DOM 렌더링 의 성능 을 높이 기 위해 가상 DOM 핸들링 기법 을 적용 했 다 . 
 옮긴 이 소개 조효 성 
 JSX 디 컴파일 
 렌더링 결과 의 구조 
 컴포넌트 라이프사이클 : 이벤트 의 마운트 와 언마 운트 
 컴포넌트 라이프사이클 : 이벤트 업데이트 
 컨트롤 가능 한 컴포넌트 : 읽 기 만 가능 한 입력 
 컨트롤 가능 한 컴포넌트 : 읽 기 입력 과 쓰 기 입력 
 필요 이상 으로 힘들 지 않 은가 ? 
 컨트롤 가능 한 컴포넌트 : 단순 한 폼 
 폼 에 대한 가장 적절 한 예제 는 무엇 인가 ? 
 데이터 기반 으로 진행 하 는 폼 리팩토링 
 유효성 검사 타입 
 리 액트 유효성 검사 믹스 인 예제 
 빌드 시스템 선택 
 모던 JS 문법 과 JSX 템플 릿 컴파일 링 
 프론트엔드 아키텍처 컴포넌트 
 프론트엔드 라우터 
 프론트엔드 모델 
 뷰 , 뷰 모델 , 뷰 컨트롤러 
 메시징 과 이벤트 
 기타 유틸리티 에 대한 필요 
 메인 데이터 엔 티티 와 API 
 메인 뷰 , 사이트 맵 , 라우트 
 사용자 와 연관 된 뷰 
 포스트 관련 뷰 
 데이터 엔 티티 
 메인 뷰 와 사이트 맵 
 노드 와 필요 한 모듈 설치 
 웹 팩 설치 와 환경 설정 
 웹 팩 환경 설정 
 리 액트 와 렌더링 
 목 데이터베이스 
 메인 뷰 
 뷰 를 리 액트 라우터 와 연결 
 베이스 스타일 
 입력 과 로딩 인디케이터 
 기본 적 인 입력 컴포넌트 
 로더 컴포넌트 
 애플리케이션 헤더 
 쿠키 읽 기 와 쓰 기 
 폼 유틸리티 믹스 인 
 세션 컨텍스트 스토어 
 사용 자 스토어 
 로그인 뷰 
 사용자 뷰 생성 
 믹스 인과 라이프사이클 메소드 
 사용자 프로파일 이미지 
 폼 유효 성 검사 와 제출 
 사용자 뷰 컴포넌트 
 사용자 리스트 뷰 
 앱 헤더 
 포스트 생성 과 편집 
 폼 전송 
 포스트 리스트 컴포넌트 
 포스트 리스트 뷰 
 무한 스크롤 코드 매니 페스트 
 포스트 스토어 변경 
 포스트 리스트 컴포넌트 변경 
 검색 기능 코드 매니 페스트 
 검색 스토어 
 애플리케이션 헤더 변경 
 추천 하 는 향상 기법 
 블로그 앱 레벨 업 
 클래스 변경 을 이용 한 CSS 트랜 지 션 
 팝오버 메뉴 
 리 액트 모션 의 동작 방법 
 시계 애니메이션