114 처음시작하는리액트 UI 를위한 자바스크립트라이브러리 ReactJS 톰핼럿, 리차드펠드만, 시몬회벡, 칼미켈슨, 존비비, 프랑키반야르디지음 / 곽현철, 김훈민옮김
114 처음시작하는리액트 UI 를위한 자바스크립트라이브러리 ReactJS 톰핼럿, 리차드펠드만, 시몬회벡, 칼미켈슨, 존비비, 프랑키반야르디지음 / 곽현철, 김훈민옮김 이도서는 Developing a React Edge(BLEEDING EDGE PRESS) 의번역서입니다
표지사진김재영이책의표지는김재영님이보내주신풍경사진을담았습니다. 리얼타임은독자의시선을담은풍경사진을책표지로보여주고자합니다. 사진보내기 ebookwriter@hanbit.co.kr 처음시작하는리액트 UI 를위한자바스크립트라이브러리 ReactJS 초판발행 2016 년 7 월 25 일 지은이톰핼럿, 리차드펠드만, 시몬회벡, 칼미켈슨, 존비비, 프랑키반야르디 / 옮긴이곽현철, 김훈민 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 9월 30일제10-1779호 ISBN 978-89-6848-775-0 15000 / 정가 17,000원 총괄전태호 / 책임편집김창수 / 기획 편집김상민디자인표지 내지여동일, 조판최송실마케팅박상용, 송경석, 변지영 / 영업김형진, 김진불, 조유미 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr c 2016 HANBIT Media, Inc. Authorized Korean translation of the English edition of Developing a React Edge, ISBN 9781939902122 c 2014 Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon Højberg, and Karl Mikkelsen. This translation is published and sold by permission of Bleeding Edge Press, Inc., which owns or controls all rights to publish and sell the same. 이책의저작권은블리딩엣지프레스사와한빛미디어 ( 주 ) 에있습니다. 저작권법에의해한국내에서보호를받는저작물이므로무단전재와복제를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanbit.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.
저자소개 지은이 _ 톰핼럿 샌프란시스코에있는실시간비디오플랫폼인 Tout.com의 Ruby/JavaScript 시니어엔지니어이다. Jasmine을이용한 React 애플리케이션테스트를도와주는 Jasmine-react의제작자이기도하다. 수중폴로를좋아하고, 아내와아들과함께시간을보낸다. 지은이 _ 리차드펠드만 샌프란시스코에있는교육기술회사인 NoRedInk에서리드프론트엔드엔지니어로일하고있다. 함수형프로그래밍의지지자이자, 강연자다. 일반적인 JavaScript 객체와배열에하위호환성을갖는이뮤터블데이터구조를제공하는오픈소스라이브러리인 seamless-immutable 의제작자이기도하다. 지은이 _ 시몬회벡 로드아일랜드주프로비던스에있는 Swipely에서시니어 UI 엔지니어로일하고있다. 프로비던스 JS 밋업그룹의공동주최자이고, 보스턴의 Startup Institute에서 JavaScript를가르치기도했다. JavaScript를이용한기능적유저인터페이스를만들고, cssarrowplease.com 같은사이드프로젝트에시간을할애하고있다.
지은이 _ 칼미켈슨 LockedOn에서시니어 PHP/JavaScript 엔지니어로일하면서아름답고강력한부동산소프트웨어를만들고있다. Karl은새로운기술에대한열정이있고, 새로운방법으로일하기위해공부하는것을즐긴다. 자신의웹사이트인 karlmikko.com에서그를찾을수없다면, 아내와함께암벽등반을하고있거나커피를즐기고있을것이다. 지은이 _ 존비비 Dave Ramsey의디지털개발팀에서애플리케이션을개발하고있다. 웹과 ios를위해사용자를대하는기술에집중하고있다. Final Cut Pro와 Motion에사용하는플러그인과 PHP 웹서비스를만들기도했다. Beebe가예술과코드에관한언어를섞는날은좋은날이다. 그는독서광이고, 사진을좋아하며, 매일아내의기대이상을달성하기위해노력하고있다. 지은이 _ 프랑키반야르디 여러고객을위해사용자경험을만드는시니어프론트엔드개발자이다. 여가는 StackOverflow (FakeRainBrigand) 와 IRC (GreenJello) 에올라오는질문에답 해주는한편작은프로젝트도즐긴다.
역자소개 옮긴이 _ 곽현철 NHN Technology Services에서 UI 개발자로일하다가지금은티켓몬스터에서프론트엔드개발자로일하고있다. 좋은동료가되겠다는핑계로개발욕심보다개그욕심이많아서주변에웃음을전하느라바쁜, 조금재미있는사람. 아마지금도어디선가농담을던지고있을것이다. 옮긴이 _ 김훈민 NHN Technology Services 에서근무하던시절본격적으로프론트엔드개발에 입문하여지금은네이버에서스마트에디터 3 를개발하고있다. 잠들어버린 http:// huns.me 블로그를운영하고있으며테스트프로세스에관심이많다.
역자서문 요즘웹프론트엔드는그야말로춘추전국시대다. 수많은도구, 라이브러리, 프레임워크가오늘쏟아지고내일사라진다. SPA를위한 Full Framework로서한시대를풍미했던 Backbone은벌써낡은기술이되었다. Backbone이지나간자리는구글을등에업은 Angular가차지했다. Angular는한때천하를통일할가장유력한후보였다. 엄청난기세로개발자들의마음을사로잡으며높은점유율을차지하는데성공했지만, 고질적인성능이슈와완전히새로운버전인 Angular 2 발표로인한역풍등으로요즘은기세가한풀꺾인모습이다. React는 Angular 이후, 최근프론트엔드영역에서가장많은관심을받는기술이다. 처음 React가등장했을때커뮤니티의반응은호의적이지않았다. 많은것이불편했다. Virtual DOM, JSX 같은개념은낯설었고, 페이지단위로개발하는데익숙해있던개발자들은컴포넌트단위로사고하기힘들어했다. 더군다나 HTML과 JavaScript를한곳에묶어두는 React의개발방식은기능과구조라는두개의관심사를분리하라는오랜불문율에어긋났다. 하지만 Facebook은포기하지않았고, 전세계수억명이사용하는자사제품의곳곳에 React를심었다. 끊임없이 React의철학을이야기하며설득했다. 시간이지나면서 React에호감을보이는개발자들이늘기시작했다. Airbnb, 넷플릭스, Atlassian, BBC 같은거대기업이 React를자사프로젝트에사용했다. 분위기가달라졌다. 때마침국내에도 React 바람이불었다. React Native의등장이한몫했다. "Learn once, Write everywhere 라는캐치프레이즈에많은개발자가설렜다. 그렇게 React는프론트엔드를넘어모바일앱까지조금씩스며들었다. React 관련커뮤니티가문을열었고, React를주제로하는블로그포스트가하나둘등장했다. 국내외에서부지런히영역을넓힌 React는, 이제설계부터개발까지다양한플러그인과라이브러리를가진차세대프론트엔드개발도구로많은사랑을받고있다.
이책은 React를소개하지만, React를처음접하는사람을위한책은아니다. 간단한튜토리얼정도는해봤으나 React의장점이뭔지아직아리송하다는사람에게더적합하다. 6명의저자가다양한주제로 React의가치와철학을이야기한다. 여러관점에서바라본 React를간접경험해볼수있다. 하지만저자가여러명이다보니읽다보면전체내용이하나의줄기로매끄럽게연결되어있지못한듯한느낌을받을수있다. 사용자들이처음부터끝까지직접따라해볼수있을만한예제가부족하다는점도아쉽다. 대신 React를지탱하는철학이무엇인지, 어떻게활용할수있는지를고민하면서이책을읽을것을추천한다. 설치방법에대한설명이나간단한튜토리얼은 React 공식문서 (https://facebook.github.io/react/docs/getting-started. html) 를추천한다. 영어가어렵다면한국어로번역한사이트 (http://reactkr. github.io/react/docs/getting-started-ko-kr.html) 도있다. 원서가나온후, 책을번역하고출간하기까지여타의사정으로인해시간이지연되어책이쓰일당시 0.11이었던 React의버전이이제는 0.14 RC까지올라가버렸다. 따라서책에있는내용을최신버전에그대로적용할수없는경우가있다. 번역서라는특성상원문을수정하기가쉽지않기때문에논의끝에 React 0.14 RC를반영하는역자주석을추가하기로했다. 또한, 원서에는없는 React 릴리즈로그를부록으로수록했다. 릴리즈로그를보면지원을중단하는 API와 React가그동안변해온과정을알수있다. React를맛은봤지만, 그맛이정확히뭔지잘모르겠다는분들이이책으로인해 React와더친해질수있기를바란다. 끝으로전문직업인으로서배울점이많은존경하는상훈님, 개발자로서성장하는데많은영감과지식을준대선이형, 방황하던내인생에반전을만들어준태훈님, 지칠때마다끊임없이열정을불어넣어주는우영이, 함께번역하고교정하느라고생한능력자현철님, 한결같이옆에서나를응원해주는지원이에게고맙다는말을전한다. 이
책을선택한모든독자의앞날에축복이가득하길바라며서문을마친다. _ 김훈민
최근몇년간 Javascript 개발환경의눈부신발전만큼, HTML/CSS를이용한 UI 개발도빠르게변화해왔다. Bootstrap 같은프레임워크의사용은이제흔한일이되었고, BEM, OOCSS 같은 CSS 방법론들이 UI를바라보는새로운시야를제공하고있다. 이런영향으로 UI 개발도페이지또는화면단위의개발방식에서탈피하여, 컴포넌트라고부를만한재사용성이높은 UI를바탕으로한스타일가이드기반의개발로점차모양새가바뀌고있다. React는이런새로운물결과잘어울린다. 컴포넌트와상태를중심으로 UI를개발하면, 화면구성을위한복잡한논리구조를단순하게풀어낼수있다. React에대한이해는 UI의분리를위해선행되어야할생각의분리에도도움을준다. React가가져다주는이런단편적인생각의전환만으로도자신의생산성이높아지는것을느끼게될것이다. 끝으로엉성한번역을함께살펴봐주고글로만들어준훈민님, 번역의길에다리를놓아준상훈님, 개발의길을열어준형국이형, 고락을함께하고있는표준화개발유닛동료들, 그리고늘나를웃게해주는영원이에게감사인사를전한다. _ 곽현철
들어가며 React는무엇이고왜써야할까? React는 Facebook에서내부적으로개발한 JavaScript 라이브러리로 2013년에오픈소스로공개되었다. 웹에서상호작용하는사용자인터페이스를만들기위한라이브러리이다. React는브라우저 DOM을다루는새로운방법을소개했다. 확장성과새로운기능의개발을위해수동으로 DOM을갱신하고어렵게각상태를추적하는노력은이제옛날이야기가되었다. React는매우새로운방법으로 DOM을다룬다. 아무때나선언적으로사용자인터페이스를정의할수있다. React는데이터가변경되었을때어떤부분의 DOM을갱신할지신경쓰지않는다. 언제든지최소한의 DOM 수정때문에전체애플리케이션을재렌더링한다. 이책에서얻을수있는것 React는현재의방법들에도전하는새롭고흥미로운개념을소개한다. 이책은이런모든개념을살펴보고, 이런개념들이유용한이유를설명해준다. 단일페이지애플리케이션 SPAs, Single Page Applications 를만드는데특히도움이될것이다. React는애플리케이션의 view 에만집중한다. 서버통신이나코드조직에는전혀관심을두지않는다. 이책에서는 React를이용해서완전한애플리케이션을만들기위한모범예제와대체도구도설명한다. 이책을읽기위해알아야할것 이책의내용을이해하기위해서는 JavaScript 와 HTML 을다뤄본경험이있어야한 다. 프레임워크의종류와상관없이단일페이지애플리케이션을다뤄본경험이있다
면더욱도움이될것이다. 물론필수적인것은아니다. 소스코드와예제애플리케이션이책에서는예제애플리케이션으로설문조사생성기 Survey Builder 를인용한다. 전체코드는 Github의저장소 https://github.com/backstopmedia/bleedingedge-sample-app에서확인할수있다. 버전이슈에대한역자주이책은 React v.0.11.1~v.0.12를기준으로집필되었다. Github 저장소에있는샘플예제코드는 React v.0.11.1을사용한다. 이책을번역하는현재 (2015. 9. 8) 가장안정화된최신버전은 v.0.13.3으로, 버전이업데이트하면서인터페이스나정책이바뀐부분이있어책에나와있는내용을최신버전에그대로적용할수없는경우가있다. 독자의혼란을막기위해최신버전에서호환되지않는부분마다역자주를삽입했고, 부록에릴리즈노트를수록했으니참고하기바란다.
차례 chapter 1 React 소개 019 1.1 배경 019 1.2 개요 021 chapter 2 JSX 027 2.1 JSX는무엇인가? 028 2.2 JSX의장점 029 2.3 컴포넌트조합 032 2.4 JSX와 HTML의차이점 035 2.5 JSX를사용하지않는경우의 React 043 2.6 JSX 공식스펙 046 chapter 3 컴포넌트라이프사이클 049 3.1 라이프사이클메소드 049 3.2 초기화 050 3.3 실행시 052 3.4 분해와정리 055 3.5 안티패턴 : 상태에계산값사용 055 3.6 정리 057
chapter 4 데이터흐름 059 4.1 Props 059 4.2 PropTypes 061 4.3 getdefaultprops 062 4.4 State 063 4.5 state와 props에는어떤값을저장해야할까? 064 4.6 정리 065 chapter 5 이벤트처리 067 5.1 이벤트핸들러연결하기 067 5.2 이벤트와상태 069 5.3 상태에따른렌더링 070 5.4 상태변경하기 072 5.5 이벤트객체 074 5.6 정리 075 chapter 6 컴포넌트구성 077 6.1 HTML 확장 077 6.2 예제 078 6.3 부모컴포넌트와자식컴포넌트의관계 084 6.4 정리 086
chapter 7 믹스인 089 7.1 믹스인은무엇인가? 089 7.2 정리 093 chapter 8 DOM 조작 095 8.1 React를통한 DOM 노드접근 095 8.2 React 외의라이브러리포함하기 097 8.3 부모엘리먼트에영향을주는플러그인다루기 100 8.4 정리 102 chapter 9 폼 103 9.1 비제어컴포넌트 104 9.2 제어컴포넌트 107 9.3 폼이벤트 109 9.4 레이블 110 9.5 textarea와 select 110 9.6 체크박스와 radio 버튼 112 9.7 폼엘리먼트이름 113 9.8 여러개의폼엘리먼트에 change 핸들러사용 115 9.9 커스텀폼컴포넌트 120 9.10 포커스 124 9.11 사용성 124 9.12 정리 129
chapter 10 애니메이션 131 10.1 CSS 트랜지션그룹 131 10.2 트랜지션그룹사용시주의점 134 10.3 인터벌렌더링 134 10.4 정리 137 chapter 11 성능개선 139 11.1 shouldcomponentupdate 139 11.2 Immutability Helpers 애드온 141 11.3 속도저하원인찾기 143 11.4 Key 144 11.5 정리 146 chapter 12 서버사이드렌더링 147 12.1 렌더링함수 148 12.2 서버사이드컴포넌트라이프사이클 150 12.3 정리 157 chapter 13 React 패밀리 159 13.1 Jest 159 13.2 Immutable.Map 165 13.3 Flux 166 13.4 정리 167
chapter 14 개발도구 169 14.1 빌드도구 169 14.2 Browserify 170 14.3 Webpack 173 14.4 Webpack과 React 174 14.5 디버깅도구 177 14.6 정리 179 chapter 15 테스트 181 15.1 시작하기 181 15.2 첫번째명세 : 렌더링 183 15.3 모의컴포넌트 189 15.4 함수를스파이객체로만들기 196 15.5 이벤트시뮬레이션 205 15.6 finder 메소드로컴포넌트탐색하기 209 15.7 믹스인 212 15.8 <body> 에렌더링하기 224 15.9 서버사이드테스트 229 15.10 브라우저테스트자동화 236 15.11 정리 243
chapter 16 설계패턴 245 16.1 라우팅 246 16.2 Om(ClojureScript) 251 16.3 Flux 252 16.4 정리 261 chapter 17 그밖의사용법 263 17.1 데스크톱 263 17.2 게임 265 17.3 HTML 이메일 271 17.4 차트 276 17.5 정리 278 chapter 18 부록 : 릴리스로그 280 18.1 React v.0.11.2 280 18.2 React v.0.12 RC 281 18.3 React v.0.12 286 18.4 React v.0.12.2 290 18.5 React v.0.13 Beta 1 291 18.6 React v.0.13 RC 296 18.7 React v.0.13 RC2 298 18.8 React v.0.13 300 18.9 React v.0.13.1 303 18.10 React v.0.13.2 304 18.11 React v.0.13.3 305 18.12 React v.0.14 Beta 1 306 18.13 React v.0.14 RC 310
chapter 1 React 소개 1.1 배경 웹애플리케이션이막등장한시절에는클라이언트가페이지전체를서버에요청하는방식으로만웹애플리케이션을개발할수있었다. 이렇게개발한애플리케이션은브라우저에서일어나는이벤트를처리할필요가없었기때문에구조가아주단순했다. PHP 같은언어를사용하면이런형태의애플리케이션을쉽게만들수있었다. 기능 PHP로컴포넌트 functional components 를만들면, 재사용성과가독성이높은코드를쉽게작성할수있었고, PHP는이런단순함덕분에많은인기를얻었다. 하지만이방식으로는사용자에게멋진경험을줄수없었다. 사용자가무언가를할때마다매번서버에요청을보내고응답을기다려야했다. 심지어서버로부터응답이오면지금까지페이지에서사용자가작업한내용은모두날아가버렸다. 더나은사용자경험을제공하기위해서사람들은브라우저에서애플리케이션을렌더링하는 JavaScript 기반라이브러리를만들기시작했다. 단순한 HTML 템플릿부터애플리케이션전체를제어하는시스템까지, 다양한방법으로 DOM을제어하는라이브러리가등장했다. 다양한 JavaScript 라이브러리를이용하면서애플리케이션은점점더크고복잡해졌다. 길게헝클어진실처럼꼬여있는이벤트로무장한애플리케이션의동작을설명하기란쉽지않다. 그래서앞에서이야기한 PHP의 1 React 소개 - 019
경우에비해, 요즘의클라이언트애플리케이션은만들기가매우어려워졌다. React는 Facebook이사용하는 PHP프레임워크인 XHP를대체하기위해시작되었다. PHP 프레임워크인 XHP는새로운요청이들어올때마다전체페이지를렌더링한다. 이작업을클라이언트에서처리하기위해 React가탄생했다. React는기본적으로복잡한상태변화를잘관리할수있게해주는상태시스템 state machine 이다. React의관심사는오직두가지다. 1. DOM 업데이트 2. 이벤트응답 React는 Ajax, 라우팅, 저장소, 데이터구조에관심이없으며 MVC Model-View- Controller 프레임워크가아니다. 굳이 MVC를가지고이야기하자면, MVC에서 V 를담당한다고볼수있다. 가벼운 React는다양한시스템에자유롭게어울릴수있다. 실제로몇몇인기있는 MVC 프레임워크가 View를렌더링할때 React를사용한적이있다. JavaScript로 DOM을가져오고갱신하는작업은느리므로상태가바뀔때마다페이지전체를렌더링하는애플리케이션은성능이떨어질수밖에없다. React는가상 DOM virtual DOM 을이용해서 DOM을읽지않고갱신할수있는아주강력한렌더링시스템을가지고있다. React의핵심은렌더링함수다. 이함수는현재의상태값을결과페이지를나타내는가상표현객체 virtual representation 으로변환한다. 마치고성능 3D 게임엔진같다. 상태변경을감지한 React는이함수를실행해서새로운가상표현객체를만든다음에이것을 DOM에전달해새로운상태를반영한다. 언뜻보면, JavaScript가필요할때개별요소를갱신하는것보다느릴것같다. 하지만 React는현재의가상표현객체와새로운가상표현객체의차이를아주 020 -
효과적으로비교하는알고리즘을가지고있다. 이알고리즘을이용해서 DOM을최소한으로변경한다. 리플로우 reflow 나불필요한 DOM 조작 mutation 같이흔한성능저해요소를최소화함으로써성능을끌어올린다. 인터페이스가커질수록, 하나의상호작용 interaction 이다른상호작용을연쇄적으로부르는경우가많아진다. 이런연쇄호출을적절히처리하지않으면애플리케이션의성능이급격히떨어진다. 심지어, 최종상태에도달할때까지같은 DOM 엘리먼트를몇번이고다시변경하는경우도있다. React 가상표현객체는단일패스에서최소한의변경을수행함으로써이런문제를최소화한다. 이를통해애플리케이션의유지보수성도높인다. 사용자입력이나외부의변경에의한상태변화가있다는사실을 React에게알려주기만하면나머지는 React가알아서처리한다. 개발자가프로세스를세세히관리할필요가없다. React는모든이벤트를하나의이벤트핸들러에위임 delegate 함으로써이벤트핸들러가여러개일때발생할수있는성능저하의위험을줄인다. 이책에서사용하는설문조사생성기 Survey Builder 예제는 Github 저장소 (https:// github.com/backstopmedia/bleeding-edge-sample-app) 에서자세히볼수있다. 1.2 개요 이책은 React 를이용한최신개발기법을크게네가지주제로나눠서다룬다. 컴포넌트생성및구성 1장부터 7장까지는 React 컴포넌트를생성하고구성하는방법을설명한다. 여 기에서는 React 사용방법을배운다. 1 React 소개 - 021
1) React 소개 1 장은배경과이책의전체개요를설명하고 React 를소개한다. 2) JSX와기본 React 구성요소사용하기 JSXJavaScript XML를이용하면 JavaScript 코드안에 XML 스타일의문법코드를작성할수있다. JSX를사용하는방법과이를이용해서기본적인 React 컴포넌트를만드는방법을학습한다. React 컴포넌트를개발할때반드시 JSX를같이사용해야하는것은아니지만, 권장하고싶은방법이라는생각에이책에있는대부분의예제는 JSX를사용해서작성했다. 3) React 구성요소의라이프사이클 React는렌더링과정중에자주컴포넌트를생성하고제거하며, 컴포넌트라이프사이클에접근할수있는다양한함수를제공한다. 이라이프사이클을잘이해하면애플리케이션메모리누수를방지할수있다. 4) React의데이터흐름 React가컴포넌트트리에데이터를어떻게전달하는지, 어떤데이터를변경해도안전한지잘알아둬야한다. React는속성 props 과상태 state 를아주분명하게구분한다. 이장은속성과상태가무엇인지알아보고, 컴포넌트개발시에이둘을제대로사용하는방법을설명한다. 5) 이벤트핸들링 React의이벤트처리는선언적이다. 이벤트처리는동적 UI를구성하는데중요하므로완벽하게익히는게좋다. 다행히 React를이용하면이벤트처리를아주간단하게할수있다. 6) 컴포넌트의구성 React 를이용하면특정작업을수행하는작지만정교한컴포넌트를만들수있 022 -
다. 이렇게만든컴포넌트를구성해서오케스트레이션레이어 orchestration layers01 를만 든다. 이장은한컴포넌트가다른컴포넌트를사용하는방법을설명한다. 7) React 믹스인 여러 React 컴포넌트가사용하는공통기능을공유하는방법인믹스인을사용하 면컴포넌트를더작게만들수있어서관리하기편하다. 고급주제 기본을배웠으니이제더수준높은주제로넘어간다. 8 장부터 13 장까지 React 개발기술을연마하여더훌륭한 React 컴포넌트를만들어본다. 8) React에서 DOM에접근하기기존 JavaScript 라이브러리를사용하거나컴포넌트를더깊게제어하기위해서때로는 React 가상 DOM이아닌진짜 DOM을이용해야할때가있다. 이장은안전하게 DOM에접근할수있는 React 컴포넌트의라이프사이클이어디인지, DOM 제어를언제해제하여메모리누수를막아야하는지를설명한다. 9) React로폼요소다루기 HTML 폼엘리먼트는사용자입력을받는대표적인방법이다. HTML 폼엘리먼트는상태를갖는다. React를이용하면놀라운방법으로폼의상태를 React 컴포넌트에전달할수있다. 10) 애니메이션 CSS를이용하면고성능애니메이션을만들수있다. React는 CSS 애니메이션처리를도와준다. 이장은 React를이용해서 CSS 애니메이션을처리하는방법을설명한다. 01 역자주 _ 소프트웨어개발에서오케스트레이션레이어 (Orchestration Layer, OL) 는모델링한데이터요소와기능을구체화하는추상레이어를말한다. 작게나눈 React 컴포넌트를실제제품에적용하기위해서는개별컴포넌트가서로조화롭게동작하여하나의콘텐츠를표현할수있게제어하는단계가필요하다. 이책에서말하는오케스트레이션레이어는이단계를의미한다. 1 React 소개 - 023
11) 성능개선과컴포넌트 React 가상 DOM은뛰어난성능을보여주지만, 언제나그렇듯이개선할부분이있다. React는변경이없는컴포넌트를브라우저가다시렌더링하는것을막음으로써애플리케이션의속도를비약적으로높인다. 12) 서버사이드렌더링많은애플리케이션이 SEO를적용한다. React는 Node.js처럼브라우저가아닌환경에서도문자열로렌더링할수있다. 서버측렌더링을이용하면애플리케이션의시작페이지로딩시간을줄일수있다. 서버와클라이언트렌더링방식을함께사용하는것은어려울수있다. 이장에서는두가지렌더링방식을함께적용하는전략을설명하고, 서버측렌더링을처리할때발생할수있는복잡한상황을자세히알아본다. 13) React 패밀리의다른 JavaScript 라이브러리사용하기 Facebook은 React 외에도, React와함께사용할수있는여러오픈소스개발도구를계속해서공개하고있다. 이장을학습하면이런라이브러리를 React 패밀리에잘적용하기위한통찰을얻을수있다. React를위한도구다루기 React는뛰어난개발, 테스트도구를제공한다. 이도구를사용하면견고한애플리케이션을만들수있다. 14, 15장에서개발자도구와테스트방법을알아본다. 14) 개발자도구 React 애플리케이션의규모가커지면배포를위해코드패키징과정을자동화할필요가있으며코드디버깅이점점어려질것이다. 이장에서는이런고민을덜어주는 React 애플리케이션패키징도구를살펴본다. 그리고더쉬운디버깅을위해구글크롬플러그인으로 React 컴포넌트를시각화하는방법도알아본다. 024 -
15) React를위한테스트코드작성하기애플리케이션의규모가점점커지는상황에서, 기존코드에버그를추가하지않으려면테스트코드를작성하는것이좋다. 테스트코드는더나은모듈화코드를작성하는데도움이된다. 이장에서는 React 컴포넌트의모든부분을테스트하는방법을알아본다. React 활용하기 마지막장은 React 를활용하는데있어서중요한부분을살펴보고, 미처생각해 보지못한다른사용사례를설명한다. 16) Architectural patterns React는 MVC 중에서 V 만을제공한다. 그래서다른프레임워크나시스템에매우유연하게적용할수있다. 이장은 React를이용해서규모가큰애플리케이션을설계하는과정을설명한다. 17) React의다른사용사례 React는웹환경에초점을맞추고있지만, 웹이아니더라도 JavaScript를지원하는환경이라면어디든사용할수있다. 이장에서는전통적인웹환경이아닌곳에서 React를사용하는방법을알아본다. 1 React 소개 - 025