• 시작하세요! 리액트 프로그래밍
  • 페이스북 엔지니어가 알려주는 실전 React.js 프로그래밍

  • 스토얀 스테파노프 지음
  • 최민석 옮김

  • 오픈소스 & 웹 시리즈_080
  • ISBN: 9791158390501
  • 22,000원 | 2016년 10월 20일 발행 | 272쪽



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

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

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

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

★ 이 책에서 다루는 내용 ★

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

스토얀 스테파노프(Stoyan Stefanov)

스토얀 스테파노프는 페이스북의 엔지니어이며 전에는 야후에서 일했다. 그는 온라인 이미지 최적화 툴인 스머시를 개발했고 성능 향상 툴인 YSlow 2.0을 설계했다. 스토얀은 『자바스크립트 패턴』(O’Reilly, 2010)과 『객체지향 자바스크립트』(Packt Publishing, 2008)를 집필했으며, 『초고속 웹사이트 구축』과 『자바스크립트 성능 최적화』의 기여자다. 또한 블로그를 운영하고 있으며, Velocity, JSConf, Fronteers 등의 여러 컨퍼런스에서 강연자로 자주 모습을 드러내고 있다.

최민석

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

  • ▣ 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>에서 액션 사용
    • 플럭스 정리
    • 불변
    • 불변 저장소 데이터
      • 불변 데이터 조작
  • 3쪽, 5번째 줄

    http://reactjs.com으로 이동한 다음(공식 깃허브 페이지로 리디렉션된다), “Download” 버튼과 “Download Starter Kit” 링크를 차례로 클릭해 ZIP 파일을 내려받는다.

    ==>

    React 프로젝트의 GitHub 페이지(https://github.com/facebook/react)를 통해 리액트를 다운로드하거나 Installation 절에 있는 starter kit(https://facebook.github.io/react/downloads/react-15.3.2.zip) 링크를 클릭해 Starter Kit를 내려받는다.

  • 11쪽, 밑에서 3번째 줄

    ); --> ),

  • 12쪽, 밑에서 5번째 줄

    (예: React.DOM.render(reactWhat, domWhere)) --> (예: ReactDOM.render(reactWhat, domWhere))

  • 38쪽, 첫 번째 줄

    componentDidUpdate(oldProps, old State)가 ==> componentDidUpdate(oldProps, oldState)가

  • 43쪽, 밑에서 3번째 줄

    메서드 shouldComponentUpdate(next Props, nextState)는 ==> 메서드 shouldComponentUpdate(nextProps, nextState)는

  • 88쪽, 본문 2번째 줄

    https://babel.js.io/repl/에서 ==> https://babeljs.io/repl/에서

  • 115쪽, 6번째 줄

    React.render -> ReactDOM.render

  • 164쪽, 14~15번째 줄

    ? (a[column] _ b[column] ? 1 : -1)
    : (a[column] _ b[column] ? 1 : -1)
    

    -->

    ? (a[key] _ b[key] ? 1 : -1)
    : (a[key] _ b[key] ? 1 : -1)
    
  • 174쪽, 11번째 줄

    import Button from './Button'; // <- "새 항목 추가"에 사용
    import Button from './Button'; // <- "새 항목 추가" 폼을 여는 데 사용
    

    -->

    import Button from './Button'; // <- "새 항목 추가"에 사용
    import Dialog from './Dialog'; // <- "새 항목 추가" 폼을 여는 데 사용
    

예제코드 관련 GitHub 페이지

관련 글


엮인 글

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