Top

실무 예제로 배우는 ReactJS 완전정복 [ReactJS를 사용하여 핵심 프로젝트 개발하기]

  • 원서명ReactJS by Example- Building Modern Web Applications with React (ISBN 9781785289644)
  • 지은이비풀 A M(Vipul A M), 프라타메쉬 손파끼(Prathamesh Sonpatki)
  • 옮긴이테크 트랜스 그룹 T4
  • ISBN : 9788960779211
  • 25,000원
  • 2016년 10월 31일 펴냄
  • 페이퍼백 | 336쪽 | 188*235mm
  • 시리즈 : acorn+PACKT, 오픈소스 프로그래밍

책 소개

소스 파일은 아래 깃허브 페이지에서 내려 받으실 수 있습니다.
(https://github.com/AcornPublishing/react-example)

요약

ReactJS는 웹 애플리케이션과 사이트에 다양한 반응 프로그래밍 특성을 적용하고자 하는 오픈소스 자바스크립트 라이브러리다. 단일 페이지 애플리케이션을 개발할 때 만날 수 있는 여러 문제점들을 해결하고자 한다. React의 핵심 원리는 선언적(declarative) 코드, 효율성(efficiency), 유연성(flexibility) 및 향상된 개발자 경험이다.
이 책은 다양한 과제를 개발할 때 발생하는 어려움을 해결하고자 하며, ReactJS를 마스터링해 ReactJS의 다양한 특성에 집중할 수 있도록 해준다. JSX, 애드온, 성능, Redux에 대한 많은 것을 다룬다.

이 책에서 다루는 내용

■ JSX를 사용한 React 컴포넌트 생성, 재사용 및 구성

■ React 앱의 데이터 흐름 관련 기술과 다양한 React 컴포넌트 간 데이터 공유 방법

■ 동적 컴포넌트와 이벤트 핸들러의 도움으로 사용자 인터랙션 조작

■ 동적 컴포넌트와 차세대 ES2015/ES6의 셋업 및 사용

■ React 애드온을 사용한 React의 불변성과 성능에 대한 특성 이해

■ React의 애니메이션 기술 이해

■ 모델 관련 데이터와 정보 저장을 위한 데이터 스토어 사용

■ Redux 라이브러리를 사용한 Flux 기반 React 애플리케이션 개발

이 책의 대상 독자

웹 개발자면서 기본부터 ReactJS를 배우고자 한다면 이 책이 적합하다. 자바스크립트, HTML, CSS에 대한 이해가 필요하다.

이 책의 구성

1장, ‘React 시작하기’에서는 정적인 데이터를 사용해 간단한 앱을 만들어봄으로써 ReactJS의 기본을 살펴본다. React의 탑레벨 API를 공부하고, 기본적인 빌딩 블록들도 살펴본다.
2장, ‘JSX 깊게 살펴보기’에서는 JSX에 대해 깊이 살펴보고, JSX가 React와 어떻게 함께 사용되는지 자세히 알아본다. JSX를 사용하면서 고려해야 할 여러 가지 내용들도 같이 다룬다.
3장, ‘데이터 흐름과 생명주기 이벤트’에서는 React 컴포넌트와 컴포넌트의 전체 생명주기에서의 데이터 흐름을 집중적으로 살펴본다.
4장, ‘동적 컴포넌트와 폼 구성하기’에서는 폼 마법사 애플리케이션을 만들면서 폼에 좀 더 집중해 React를 이용한 혼합 컴포넌트를 만드는 방법까지 살펴본다.
5장, ‘믹스인과 DOM’에서는 믹스인, ref, DOM을 어떻게 사용하는지 알아본다.
6장, ‘서버에서의 React’에서는 오픈 라이브러리 북 API에 기반한 검색 애플리케이션을 만들어 서버에서 테이블로 HTML을 렌더링하기 위해 React를 어떻게 사용할지를 알아본다.
7장, ‘React 애드온’에서는 계속해서 검색 애플리케이션을 개발하며, React에서 제공하는 다양한 애드온을 사용해 기능을 향상시킨다. 애드온을 사용하는 다양한 케이스를 살펴본다.
8장, ‘React 앱 성능 살펴보기’에서는 React가 컨텐츠를 어떻게 렌더링하는지 앱을 어떻게 더 빠르게 하는지 자세히 살펴봄으로써 React 앱의 성능에 대한 모든 것을 다룬다.
9장, ‘React 라우터와 데이터 모델’에서는 핀터레스트 스타일의 애플리케이션을 만드는 데 필요한 여러 도움과 React 라우터에 대해 살펴본다. React를 이용해 백본 모델을 비롯한 다양한 데이터 모델을 만드는 방법을 알아본다.
10장, ‘애니메이션’에서는 애니메이션을 사용해 더욱 상호연동적인 핀터레스트 앱을 만들고, React를 사용해 더욱더 효과적으로 사용하기 위한 방법에 집중한다.
11장, ‘React 도구’에서는 React를 가지고 작업하는 동안에 사용할 다양한 도구에 대해서 다룬다. Babel, ESLint, React 개발자 도구 및 Webpack에 대해서 살펴본다.
12장, ‘Flux’에서는 Flux 아키텍쳐를 사용하면서 소셜 미디어 트랙커 애플리케이션을 어떻게 만들지 설명한다. Flux 아키텍쳐에 대한 필요성과 테이블 적용을 논의한다.
13장, ‘Redux와 React’에서는 Redux 기반의 state 관리 기술을 사용하기 위해서 소셜 미디어 트랙커 애플리케이션 성능을 향상시킬 수 있는 유명한 state 관리 라이브러리 Redux 사용법을 알아본다.

저자/역자 소개

지은이의 말

ReactJS는 웹 애플리케이션과 사이트에서 다양한 반응 프로그래밍 특성을 적용하고자 하는 오픈소스 자바스크립트 라이브러리다. 단일 페이지 애플리케이션을 개발할 때 만날 수 있는 여러 문제점들을 해결하고자 한다. React의 핵심 원리는 선언적(declarative) 코드, 효율성(efficiency), 유연성(flexibility) 및 향상된 개발자 경험이다.
무엇인가를 개발할 때 그것을 지나치게 깊숙이 살펴보기보다 오히려 새로운 기술을 배우는 것이 시간을 절약하기 위해서도 더 좋지 않을까? 이 책에서는 다른 과제들이 가지는 어려움을 도와주고자 하며, React를 통달해 React의 다양한 특성들에 집중할 수 있게 해 준다. JSX, 애드온, 성능, Redux에 대한 많은 것을 다룬다.

지은이 소개

비풀 A M(Vipul A M)

빅바이너리 사의 디렉터다. 그는 레일스 이슈 팀의 일원으로, 여러 가지 이슈를 해결한다. 많은 여가시간을 오픈소스 루비 프로젝트들을 탐험하고 기여하는 데 사용한다. 여가시간에는 ReactJS를 사용하지 않는다.
비풀은 루비 커뮤니티를 좋아하며, 커뮤니티 내에서 PuneRb를 구축하는 것을 돕는다. RubyIndia 커뮤니티 뉴스레터, RubyIndia 팟캐스트를 만들어 운영 중이다. 푸네(Pune)에서 데칸 루비 컨퍼런스(Deccan Ruby Conference)를 운영했었다.
트위터(@vipulnsward) 또는 웹사이트(http://vipulnsward.com)를 통해 그와 만날 수 있다.

프라타메쉬 손파끼(Prathamesh Sonpatki)

빅바이너리 사의 디렉터며, 루비온레일스와 ReactJS를 사용해 웹 애플리케이션을 만든다. 새로운 프로그래밍 언어를 배우고 오픈소스에 기여하는 데 노력을 기울이고 있다.
트위터(@_cha1tanya)를 통해 그와 연락할 수 있다.

옮긴이의 말

React.js는 MVC 프레임워크에서의 뷰 부분을 컴포넌트로 만들기 위한 라이브러리다. 페이스북, 인스타그램, 에어비앤비, 야후 등의 여러 선도적인 업체에서 사용하고 있다. React.js는 사용자 인터페이스를 만드는 라이브러리로, 페이스북과 인스타그램에 의해서 개발돼 점점 많은 인기를 얻고 있다.
지금의 페이스북은 단순히 소셜 네트워크 서비스를 제공하는 것을 넘어 오픈소스 생태계의 새로운 강자로 자리매김하고 있다. 페이스북은 백엔드 기술과 웹 기술뿐만 아니라 iOS와 Android로 대표되는 모바일 기술까지 IT 전 분야에 걸쳐 다양한 기술을 오픈소스화해 많은 개발자들이 활용하는 것을 마다하지 않고 있다.
페이스북은 React.js뿐만 아니라 React Native까지 개발해 많은 사람들이 활용할 수 있도록 공개했다. React Native는 React.js를 기반으로 개발된 기술이며, 네이티브 모바일 앱을 만들기 위한 프레임워크다. 이렇게 페이스북의 기술 발전 노력은 계속되고 있다.
페이스북의 오픈소스 기술 중 ReactJS를 사용한 유명 사이트들을 어렵지 않게 발견할 수 있다. 스트리밍 서비스의 대표 주자로 손꼽히는 Netflix를 비롯해 세일즈 포스의 웹 서비스에서도 React.js를 사용하고 있다. 깃허브의 ‘아톰 에디터’ 같은 데스크톱 응용프로그램에도 리액트가 활용됐다.
React.js는 한 가지 문제를 해결하기 위해서 만들어졌다. 시시각각으로 변화하는 데이터를 사용하는 큰 규모의 애플리케이션을 만들기 위해서다. 단순함, 선언적 문법, 컴포넌트 이 세 가지 특징으로 React.js는 여러분이 UI를 구성하는 데 매우 직관적이고 효율적인 방안을 제시해 줄 것이다.
이 책은 React.js를 마스터해 React.js의 다양한 특성들에 집중할 수 있도록 해 준다. JSX, 애드온, 성능, Redux에 대한 많은 것을 다룬다. 이 책은 두 명의 개발자가 실제로 개발을 진행하듯이 구성해 읽기 편하며, 대화형으로 많은 내용들을 설명함으로써 React.js가 생소한 개발자들은 효과적인 애플리케이션의 UI 구현 방법을 쉽게 배울 수 있다.

옮긴이 소개

테크 트랜스 그룹 T4

최신 IT 테크놀로지에 대한 리서치를 목적으로 하는 컨설팅 그룹(http://www.funnycomputinglabs.com/)이다. 엔터프라이즈 환경에서 오픈소스를 활용한 프레임워크 구축에 관심이 많으며, 최근에는 하이브리드 환경에서의 HTML5, MariaDB, Spring, Node.js, React.js, Underscore.js 등 웹 전반에 걸친 기술과 빅데이터 흐름에 주목하고 있다. 또한, 오픈소스 기반 모바일 데이터베이스와 관련된 컨설팅과 자바스크립트를 기반으로 하는 서버 구축에 많은 경험을 쌓고 있다.

목차

목차
  • 1장. React 시작하기
    • React란?
    • 션이 마이크와 ReactJS를 만났을 때
    • React 라이브러리 사용하기
    • 첫 번째 컴포넌트 만들기
    • 다시 일로 돌아와서(Back to work)
    • 정적 데이터 표시하기
    • 데이터를 컴포넌트로 전달하기
    • 요약

  • 2장. JSX 깊게 살펴보기
    • 왜 JSX를 사용하는가
    • JSX를 자바스크립트로 변환시키기
    • HTML 태그 vs React 컴포넌트
    • 자립 태그
    • 다중 컴포넌트(Multiple components)
    • 자바스크립트 표현식
    • 네임스페이스 구성요소(Namespaced components)
    • 스프레드 속성(Spread attributes)
    • JSX의 스타일
    • JSX Gotchas
    • JSX에서의 조건 사항
    • 비DOM 속성
    • 요약

  • 3장. 데이터 흐름과 생명주기 이벤트
    • React에서의 데이터 흐름
    • Prop 확인
    • 기본 prop 정의하기
    • this.props.children 수정하기
    • State
    • 초기 state 설정하기
    • state 설정하기
    • state 사용하지 않기
    • State와 prop
    • 컴포넌트 생명주기 개요
    • 컴포넌트 생명주기 메소드
    • 요약

  • 4장. 동적 컴포넌트와 폼 구성하기
    • React에서의 폼
    • 애플리케이션 설정하기
    • 폼 시작하기
    • 인터랙티브(대화식) prop
    • 컨트롤된 컴포넌트
    • 비제어 컴포넌트
    • 폼 마법사를 사용해 시작하기
    • 폼 이벤트
    • 부모와 자식 간의 관계
    • 폼 검증
    • 자세한 쇼핑 단계
    • 상세 배송 단계
    • 요약

  • 5장. 믹스인과 DOM
    • 다시 사무실로 돌아가 보자
    • 모달 추가하기
    • Refs
    • 요약

  • 6장. 서버에서의 React
    • React를 사용해 서버에서 렌더링하기
    • 서버에서의 작업
    • 요약

  • 7장. React 애드온
    • 애드온 사용하기
      • 불변성 헬퍼
      • 유효한 명령어
    • 컴포넌트 클론하기
      • 앱 테스팅을 위한 여러가지 헬퍼들
        • Jest 셋업하기
      • React 컴포넌트의 구조 테스팅하기
    • React 컴포넌트의 테스팅 동작
      • 얕은 렌더링
    • 요약

  • 8장. React 앱 성능 살펴보기
    • React 앱 성능
    • 가상 DOM
    • PERF 애드온
    • React에 의한 DOM 동작
      • 모든 컴포넌트를 렌더링하기 위해 필요한 시간
      • React에서 소모하는 시간
      • shouldComponentUpdate 훅
    • PureRenderMixin
      • PureRenderMixin의 안티 패턴
    • 불변의 데이터
    • 요약

  • 9장. React 라우터와 데이터 모델
    • 새로운 도전
    • 백본 모델 만들기
    • 정의된 백본 모델 사용하기
    • 데이터 모델과 백본
    • 요약

  • 10장. 애니메이션(Animation)
    • 애디퀘이트 LLC에서의 재미있는 일들
    • 모델 업데이트
    • 애니메이션 효과
    • 요약

  • 11장. React 도구
    • 개발자 도구
      • ES6과 JSX를 위한 Babel 사용하기
      • ESLint
    • React 개발자 도구
    • 빌드 도구
      • Webpack이란
      • Webpack 설정
        • 로더
        • 핫 모듈 교체
    • 요약

  • 12장. Flux 257
    • Flux 아키텍쳐와 단방향 플로우
    • Flux 액션
    • Flux 스토어
    • 요약

  • 13장. Redux와 React
    • Redux
    • Redux 셋업하기
    • 요약

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

정오표

[p.100 : 아래서 6행]
이제 다시]
->
이제 다시