114 처음 시작하는 리액트 UI를 위한 자바스크립트 라이브러리 ReactJS 톰 핼럿, 리차드 펠드만, 시몬 회벡, 칼 미켈슨, 존 비비, 프랑키 반야르디 지음 / 곽현철, 김훈민 옮김
114 처음 시작하는 리액트 UI를 위한 자바스크립트 라이브러리 ReactJS 톰 핼럿, 리차드 펠드만, 시몬 회벡, 칼 미켈슨, 존 비비, 프랑키 반야르디 지음 / 곽현철, 김훈민 옮김 이 도서는 Developing a React Edge(BLEEDING EDGE PRESS)의 번역서입니다
표지 사진 김재영 이 책의 표지는 김재영 님이 보내 주신 풍경사진을 담았습니다. 리얼타임은 독자의 시선을 담은 풍경사진을 책 표지로 보여주고자 합니다. 사진 보내기 ebookwriter@hanbit.co.kr 처음 시작하는 리액트 UI를 위한 자바스크립트 라이브러리 ReactJS 초판발행 2015년 10월 31일 지은이 톰 핼럿, 리차드 펠드만, 시몬 회벡, 칼 미켈슨, 존 비비, 프랑키 반야르디 / 옮김이 곽현철, 김훈민 / 펴낸이 김태헌 펴낸곳 한빛미디어(주) / 주소 서울시 마포구 양화로 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 Published by HANBIT Media, Inc. Printed in Korea Copyright c 2015 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 UIT 개발실에서 근무하고 있습니다. 옮긴이_ 김훈민 자바 개발자로 입문해서 현재는 NHN Technology Services 프론트엔드 개발팀에 서 Ajax UI 개발자로 근무하고 있습니다. http://huns.me 블로그를 운영하고 있으 며, 항상 "왜?"라는 질문을 던지려 애쓰는 중입니다.
역자 서문 이 책의 원서는 React v.0.11.1~v.0.12를 기준으로 쓰였다. Github 저장소에 있는 샘플 예제 코드는 React v.0.11.1을 사용한다. 이 책을 번역하는 현재(2015. 9. 8) 안정화된 가장 최신 버전은 v.0.13.3으로, 버전이 올라가면서 인터페이스나 정책이 바뀐 부분이 있어 책에 나와 있는 내용을 최신 버전에 그대로 적용할 수 없는 경우가 있다. 독자의 혼란을 막기 위해 최신 버전에서 호환되지 않는 부분마다 역주를 추가하 고, 부록으로 릴리즈 노트를 수록할 예정이다.
들어가며 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/bleedingedgesample-app에서 확인할 수 있다.
한빛 리얼타임 한빛 리얼타임은 IT 개발자를 위한 전자책입니다. 요즘 IT 업계에는 하루가 멀다 하고 수많은 기술이 나타나고 사라져 갑니다. 인 터넷을 아무리 뒤져도 조금이나마 정리된 정보를 찾기도 쉽지 않습니다. 또한, 잘 정리되어 책으로 나오기까지는 오랜 시간이 걸립니다. 어떻게 하면 조금이라 도 더 유용한 정보를 빠르게 얻을 수 있을까요? 어떻게 하면 남보다 조금 더 빨 리 경험하고 습득한 지식을 공유하고 발전시켜 나갈 수 있을까요? 세상에는 수 많은 종이책이 있습니다. 그리고 그 종이책을 그대로 옮긴 전자책도 많습니다. 전자책에는 전자책에 적합한 콘텐츠와 전자책의 특성을 살린 형식이 있다고 생 각합니다. 한빛이 지금 생각하고 추구하는, 개발자를 위한 리얼타임 전자책은 이렇습니다. 1 ebook First - 빠르게 변화하는 IT 기술에 대해 핵심적인 정보를 신속하게 제공합니다 500페이지 가까운 분량의 잘 정리된 도서(종이책)가 아니라, 핵심적인 내용을 빠르게 전달하기 위해 조금은 거칠지만 100페이지 내외의 전자책 전용으로 개발한 서비스입 니다. 독자에게는 새로운 정보를 빨리 얻을 기회가 되고, 자신이 먼저 경험한 지식과 정보를 책으로 펴내고 싶지만 너무 바빠서 엄두를 못 내는 선배, 전문가, 고수 분에게 는 좀 더 쉽게 집필할 수 있는 기회가 될 수 있으리라 생각합니다. 또한, 새로운 정보 와 지식을 빠르게 전달하기 위해 O'Reilly의 전자책 번역 서비스도 하고 있습니다. 2 무료로 업데이트되는 전자책 전용 서비스입니다 종이책으로는 기술의 변화 속도를 따라잡기가 쉽지 않습니다. 책이 일정 분량 이상으 로 집필되고 정리되어 나오는 동안 기술은 이미 변해 있습니다. 전자책으로 출간된 이 후에도 버전 업을 통해 중요한 기술적 변화가 있거나 저자(역자)와 독자가 소통하면서 보완하여 발전된 노하우가 정리되면 구매하신 분께 무료로 업데이트해 드립니다.
3 4 독자의 편의를 위해 DRM-Free로 제공합니다 구매한 전자책을 다양한 IT 기기에서 자유롭게 활용할 수 있도록 DRM-Free PDF 포맷으로 제공합니다. 이는 독자 여러분과 한빛이 생각하고 추구하는 전자책을 만들 어 나가기 위해 독자 여러분이 언제 어디서 어떤 기기를 사용하더라도 편리하게 전자 책을 볼 수 있도록 하기 위함입니다. 전자책 환경을 고려한 최적의 형태와 디자인에 담고자 노력했습니다 종이책을 그대로 옮겨 놓아 가독성이 떨어지고 읽기 어려운 전자책이 아니라, 전자책 의 환경에 가능한 한 최적화하여 쾌적한 경험을 드리고자 합니다. 링크 등의 기능을 적극적으로 이용할 수 있음은 물론이고 글자 크기나 행간, 여백 등을 전자책에 가장 최적화된 형태로 새롭게 디자인하였습니다. 앞으로도 독자 여러분의 충고에 귀 기울이며 지속해서 발전시켜 나가겠습니다. 지금 보시는 전자책에 소유 권한을 표시한 문구가 없거나 타인의 소유권한을 표시한 문구가 있다면 위법하게 사용하고 있을 가능성이 큽니다. 이 경우 저작권법에 따라 불이익을 받으실 수 있습니다. 다양한 기기에 사용할 수 있습니다. 또한, 한빛미디어 사이트에서 구매하신 후에는 횟수와 관계없이 내려받으 실 수 있습니다. 한빛미디어 전자책은 인쇄, 검색, 복사하여 붙이기가 가능합니다. 전자책은 오탈자 교정이나 내용의 수정 보완이 이뤄지면 업데이트 관련 공지를 이메일로 알려 드리며, 구매하 신 전자책의 수정본은 무료로 내려받으실 수 있습니다. 이런 특별한 권한은 한빛미디어 사이트에서 구매하신 독자에게만 제공되며, 다른 사람에게 양도나 이전은 허 락되지 않습니다.
차례 chapter 1 React 소개 017 1.1 배경 017 1.2 개요 019 chapter 2 JSX 025 2.1 JSX는 무엇인가? 026 2.2 Benefits of JSX? 027 2.3 컴포넌트 조합 030 2.4 JSX와 HTML의 차이점 033 2.5 JSX를 사용하지 않는 경우의 React 041 2.6 JSX 공식 스펙 044 chapter 3 컴포넌트 라이프사이클 047 3.1 라이프사이클 메소드 047 3.2 초기화 048 3.3 실행시 050 3.4 분해와 정리 053 3.5 안티 패턴: 상태에 계산값 사용 053 3.6 정리 055
chapter 4 데이터 흐름 057 4.1 Props 057 4.2 PropTypes 059 4.3 getdefaultprops 060 4.4 State 061 4.5 state와 props에는 어떤 값을 저장해야 할까? 062 4.6 정리 063 chapter 5 이벤트 처리 065 5.1 이벤트 핸들러 연결하기 065 5.2 이벤트와 상태 067 5.3 상태에 따른 렌더링 068 5.4 상태 변경하기 070 5.5 이벤트 객체 072 5.6 정리 073 chapter 6 컴포넌트 구성 075 6.1 HTML 확장 075 6.2 예제 076 6.3 부모 컴포넌트와 자식 컴포넌트의 관계 082 6.4 정리 084
chapter 7 믹스인 087 7.1 믹스인은 무엇인가? 087 7.2 정리 091 chapter 8 DOM 조작 093 8.1 React를 통한 DOM 노드 접근 093 8.2 React 외의 라이브러리 포함하기 095 8.3 부모 엘리먼트에 영향을 주는 플러그인 다루기 098 8.4 정리 100 chapter 9 폼 103 9.1 비제어 컴포넌트 104 9.2 제어 컴포넌트 106 9.3 폼 이벤트 118 9.4 레이블 109 9.5 textarea와 select 109 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 정리 244
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 정리 279
chapter 1 React 소개 1.1 배경 웹 애플리케이션이 막 등장한 시절에는 클라이언트가 페이지 전체를 서버에 요청 하는 방식으로만 웹 애플리케이션을 개발할 수 있었다. 이렇게 개발한 애플리케이 션은 브라우저에서 일어나는 이벤트를 처리할 필요가 없었기 때문에 구조가 아주 단순했다. PHP 같은 언어를 사용하면 이런 형태의 애플리케이션을 쉽게 만들 수 있었다. 기 능 PHP로 컴포넌트 functional components 를 만들면, 재사용성과 가독성이 높은 코드 를 쉽게 작성할 수 있었고, PHP는 이런 단순함 덕에 많은 인기를 얻었다. 하지만 이 방식으로는 사용자에게 멋진 경험을 줄 수 없었다. 사용자가 무언가를 할 때마다 매번 서버에 요청을 보내고 응답을 기다려야 했다. 심지어 서버로부터 응답이 오면 지금까지 페이지에서 사용자가 작업한 내용은 모두 날아가 버렸다. 더 나은 사용자 경험을 제공하기 위해서 사람들은 브라우저에서 애플리케이션을 렌더링하는 JavaScript 기반 라이브러리를 만들기 시작했다. 단순한 HTML 템플 릿부터 애플리케이션 전체를 제어하는 시스템까지, 다양한 방법으로 DOM을 제어 하는 라이브러리가 등장했다. 다양한 JavaScript 라이브러리를 이용하면서 애플리 케이션은 점점 더 크고 복잡해졌다. 길게 헝클어진 실처럼 꼬여있는 이벤트로 무장 한 애플리케이션의 동작을 설명하기란 쉽지 않다. 그래서 앞에서 이야기한 PHP의 1 React 소개 - 017
경우에 비해, 요즘의 클라이언트 애플리케이션은 만들기가 매우 어려워졌다. 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는 현재의 가상 표현 객체와 새로운 가상 표현 객체의 차이를 아주 018 -
효과적으로 비교하는 알고리즘을 가지고 있다. 이 알고리즘을 이용해서 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 소개 - 019
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를 이용하면 특정 작업을 수행하는 작지만 정교한 컴포넌트를 만들 수 있 020 -
다. 이렇게 만든 컴포넌트를 구성해서 오케스트레이션 레이어 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 소개 - 021
11) 성능 개선과 컴포넌트 React 가상 DOM은 뛰어난 성능을 보여주지만, 언제나 그렇듯이 개선할 부분이 있다. React는 변경이 없는 컴포넌트를 브라우저가 다시 렌더링 하는 것을 막음 으로써 애플리케이션의 속도를 비약적으로 높인다. 12) 서버 사이드 렌더링 많은 애플리케이션이 SEO를 적용한다. React는 Node.js처럼 브라우저가 아닌 환경에서도 문자열로 렌더링 할 수 있다. 서버 측 렌더링을 이용하면 애플리케이 션의 시작 페이지 로딩 시간을 줄일 수 있다. 서버와 클라이언트 렌더링 방식을 함 께 사용하는 것은 어려울 수 있다. 이 장에서는 두 가지 렌더링 방식을 함께 적용 하는 전략을 설명하고, 서버 측 렌더링을 처리할 때 발생할 수 있는 복잡한 상황을 자세히 알아본다. 13) React패밀리의 다른 JavaScript 라이브러리 사용하기 Facebook은 React 외에도, React와 함께 사용할 수 있는 여러 오픈 소스 개발 도구를 계속해서 공개하고 있다. 이 장을 학습하면 이런 라이브러리를 React 패 밀리에 잘 적용하기 위한 통찰을 얻을 수 있다. React를 위한 도구 다루기 React는 뛰어난 개발, 테스트 도구를 제공한다. 이 도구를 사용하면 견고한 애플 리케이션을 만들 수 있다. 14, 15장에서 개발자 도구와 테스트 방법을 알아본다. 14) 개발자 도구 React 애플리케이션의 규모가 커지면 배포를 위해 코드 패키징 과정을 자동화 할 필요가 있으며 코드 디버깅이 점점 어려질 것이다. 이 장에서는 이런 고민을 덜 어주는 React 애플리케이션 패키징 도구를 살펴본다. 그리고 보다 쉬운 디버깅을 위해 구글 크롬 플러그인으로 React 컴포넌트를 시각화하는 방법도 알아본다. 022 -
15) React를 위한 테스트 코드 작성하기 애플리케이션의 규모가 점점 커지는 상황에서, 기존 코드에 버그를 추가하지 않으 려면 테스트 코드를 작성하는 것이 좋다. 테스트 코드는 더 나은 모듈화 코드를 작 성하는 데 도움이 된다. 이 장에서는 React 컴포넌트의 모든 부분을 테스트하는 방법을 알아본다. React 활용하기 마지막 장은 React를 활용하는 데 있어서 중요한 부분을 살펴보고, 미처 생각해 보지 못한 다른 사용 사례를 설명한다. 16) Architectural patterns React는 MVC 중에서 V 만을 제공한다. 그래서 다른 프레임워크나 시스템에 매우 유연하게 적용할 수 있다. 이 장은 React를 이용해서 규모가 큰 애플리케이 션을 설계하는 과정을 설명한다. 17) React의 다른 사용 사례 React는 웹 환경에 초점을 맞추고 있지만, 웹이 아니더라도 JavaScript를 지원 하는 환경이라면 어디든 사용할 수 있다. 이 장에서는 전통적인 웹 환경이 아닌 곳 에서 React를 사용하는 방법을 알아본다. 1 React 소개 - 023
024 -
chapter 2 JSX React는 템플릿이나 표현 로직 대신 컴포넌트 개념을 이용하여 관심사를 분리한 다. 기본적으로 React는 마크업과 마크업 생성 코드를 함께 묶어둔다는 사실을 알아야 한다. 이렇게 하면 마크업 코드를 작성할 때 어색하고 무거운 템플릿 언어 를 사용할 필요가 없기 때문에 JavaScript의 표현력을 극대화 할 수 있다. React는 선택적으로 사용할 수 있는, HTML과 유사한 스타일의 마크업 언어를 지원한다. 자세히 알아보기 전에 먼저 봐두면 좋을 게 있다. JavaScript에 마크 업 코드를 작성하는 스타일을 좋아하지 않는다거나 JSX가정말 유용한지 잘 모르 겠다면, 아래에 나열한 장점을 한 번 읽어보길 바란다. 익숙한 마크업을 이용해서 엘리먼트를 트리 구조로 만들 수 있다. 더 의미가 잘 드러나고, 더 이해하기 쉬운 마크업을 제공한다. 애플리케이션의 구조를 더 쉽게 시각화 할 수 있다. React 엘리먼트 생성을 추상화한다. 마크업과 마크업을 생성하는 코드를 함께 둘 수 있다. 순수 JavaScript다. 이번 장에서 JSX의 장점과 사용법을 알아보고 HTML과 다르게 유의해야 할 점 을 알아본다. 반드시 JSX를 사용해야 하는 것은 아니라는 사실을 명심하자. JSX 를 사용하고 싶지 않다면 이 장의 끝에 있는 JSX 없이 React를 사용하는 방법을 설명하는 부분만 보고 넘어가도 좋다. 2 JSX - 025
2.1 JSX는 무엇인가? JSX는 JavaScript XML의 약자다. React 컴포넌트에서 사용할 마크업을 작성하기 위한 문법체계로 XML과 유사하다. JSX를 사용하지 않아도 상관없지만, JSX를 사 용하면 컴포넌트 가독성을 높일 수 있기 때문에 JSX를 사용할 것을 추천한다. JSX를 사용하지 않고 헤더를 생성하는 함수를 호출하는 예를 보자. // v0.11 React.DOM.h1({className: 'question'}, 'Questions'); // v0.12 React.createElement('h1', {classname: 'question'}, 'Questions'); JSX를 사용하면 이 코드를 훨씬 더 익숙하고 간결한 마크업으로 만들 수 있다. <h1 classname="question">questions</h1> JavaScript 코드 안에 마크업 코드를 작성하는 이전 방식과 비교해보면 JSX의 특징을 알 수 있다. 1. JSX는 변환되는 구문이다. 각 JSX 노드는 JavaScript 함수에 대응한다. 2. JSX는 런타임 라이브러리를 제공하지 않으며 필요로 하지도 않는다. 3. JSX는 JavaScript의 의미를 변경하거나 새로운 의미를 추가하지 않는다. 함수를 호출할 뿐이다. JSX가 HTML과 유사하다는 점이 React의 표현력을 배가한다. 이제 JSX의 이 점, 사용 목적, JSX와 HTML의 핵심 차이점을 알아보자. 026 -
2.2 Benefits of JSX? 다양한 템플릿 언어를 제쳐두고 왜 굳이 JSX를 사용해야 할까? 결론부터 이야기 하자면, JSX가 단순히 마크업을 JavaScript 함수에 매핑하기 때문이다. JSX의 이점은 코드가 늘어나면서 컴포넌트가 점점 복잡해지는 상황일 때 두드러 진다. JSXdㅢ 이점을 하나씩 살펴보자. 익숙함 개발 조직 안에 개발자만 있는 것은 아니다. HTML에 익숙한 UI/UX 디자이너, 테스트를 전담 QA 조직이 참여하여 개발 관련 업무를 수행한다. JSX를 프로젝트 에 사용하면 개발자가 아닌 구성원들도 쉽게 코드를 읽고 업무에 기여할 수 있다. XML에 익숙한 사람이라면 쉽게 JSX를 받아들일 수 있다. 그리고 뒤에서 더 자세히 살펴보겠지만, React 컴포넌트는 DOM으로 표현 할 수 있는 모든 것을 처리한다. JSX는 이를 아주 간단명료하게 표현하여 시각화 한다. 의미론 JSX를 이용하면 JavaScript 코드를 마크업으로 만들어 의미를 더 잘 드러낼 수 있다. 컴포넌트 구조와 정보 흐름을 HTML과 유사한 문법을 이용하여 선언할 수 있고, 이렇게 작성한 코드는 나중에 JavaScript로 변환할 수 있다. HTML5 태그명은 물론이고 애플리케이션의 마크업에 사용한 커스텀 컴포넌트 까지 모두 JSX를 작성할 때 사용할 수 있다. 커스텀 컴포넌트를 정의하는 방법은 뒤에서 다루고, 우선 여기에서는 JSX로 JavaScript의 가독성을 높이는 방법을 알아보자. 좌측에 헤더를 표시하고 나머지 오른쪽을 가득 채우는 칸막이 Divider 역할을 하는 엘리먼트를 생각해보자. HTML로 표현하면 이런 모양일 것이다. 2 JSX - 027
<div classname="divider"> </div> <h2>questions</h2><hr /> 이 마크업 코드를 Divider라는 React 컴포넌트로 포장했다. 이제 다른 HTML 엘리먼트처럼 사용할 수 있다. 코드의 의미를 더 이해하기 쉽다. <Divider>Questions</Divider> 시각화 앞의 예제에서 우리는 JSX로 간단한 예제 코드를 더 명확하고 간결하게 만들었 다. 수백 개의 컴포넌트가 복잡한 마크업 트리 형태로 얽혀있는 대형 프로젝트에 서 이런 장점은 더욱 두드러진다 위에서 언급했던 Divider 컴포넌트를 다시 보자. JavaScript만 사용했을 때보 다 마크업의 의미가 더 분명하게 드러나 더 쉽게 의미를 이해할 수 있다. 우선 순수 JavaScript를 사용한 경우다. // v0.11 render: function () { return React.DOM.div({className:"divider"}, "Label Text", React.DOM.hr() ); } // v0.12 render: function () { return React.createElement('div', {classname:"divider"}, "Label Text", React.createElement('hr') ); } 028 -
이번에는 JSX 마크업을 사용했다. render: function () { return <div classname ="divider"> Label Text<hr /> </div>; } JSX 마크업이 이해하기도 쉽고 디버깅하기도 편리하다는 점을 확인할 수 있다. 추상화 앞에서 React 0.11과 0.12로 코드를 작성하면서 서로 다른 JavaScript를 사용 했다. 두 버전 모두 같은 JSX를 지원한다. JSX 트랜스파일러를 이용하면 마크업 을 JavaScript로 변환하는 과정을 추상화할 수 있어 가능한 일이다. React 0.11 로 작성한 코드는 추가 변경 작업 없이 0.12로 업데이트 할 수 있다. 추상화가 만병통치약은 아니지만, 프로젝트를 진행해나가면서 코드를 변경하는 일을 줄여준다는 점은 분명한 장점이다. 관심사 분리 React로 개발할 때는 마크업과 마크업을 생성하는 JavaScript 코드를 함께 묶 어서 작성한다. 또한 애플리케이션의 관심사나 개별 컴포넌트의 관심사를 분리하 지 않는다. 대신 관심사 별로 컴포넌트를 만들어서 모든 관련 로직과 마크업을 하 나의 공간에 넣고 캡슐화한다. JSX를 이용하면 비지니스 로직에서 마크업 코드를 분리할 수 있어 코드를 간결하 게 만들 수 있다. 이렇게 하면 컴포넌트 트리 구조가 선명하게 드러나 개발자가 애 플리케이션을 이해하기 쉽다. 2 JSX - 029
2.3 컴포넌트 조합 지금까지 JSX를 이용해 간결한 마크업 형태로 컴포넌트를 작성하는 방법을 살펴 봤다. 이번에는 JSX로 만든 개별 컴포넌트를 하나로 조립하는 과정을 알아보자. 이 절에서는 다음의 내용을 다룬다. JSX를 사용하는 JavaScript 파일 작성 컴포넌트 조합하는 과정 컴포넌트 소유권과 부모/자식 관계 하나씩 차례대로 살펴보자. 커스텀 컴포넌트 선언하기 앞에서 설명한 Divider를 다시 보자. 출력하고 싶은 HTML은 다음과 같다. <div classname="divider"> </div> <h2>questions</h2><hr /> 이 HTML을 React 컴포넌트로 표현하기 위해서, 마크업을 반환하는 render 함 수를 가지고 있는 React 컴포넌트를 만들었다. var Divider = React.createClass({ render: function () { return ( <div classname ="divider"> <h2>questions</h2><hr /> </div> ); } }); 현재로서는 이 컴포넌트를 이 형태로만 사용할 수 있다. h2 태그 안에 동적으로 030 -
텍스트를 넣을 수 있다면 더 유용하지 않을까? 동적인 값 JSX를 이용해 동적으로 값을 렌더링하고 싶다면 중괄호를 이용한다. { } 중괄호 는 JavaScript 콘텍스트에 신호를 보낸다. 중괄호 사이에 있는 값을 JavaScript 로 평가한 결과를 마크업에 노드로 그린다. 간단한 텍스트나 숫자 값은 단순히 변수를 참조한다. 아래에 나와있는 방법으로 h2 태그 안에 텍스트를 동적으로 넣을 수 있다. var text = 'Questions'; <h2>{text}</h2> // <h2>questions</h2> 로직이 더 복잡하다면 함수를 이용한다. 중괄호를 이용해서 함수를 호출하여 결과 값을 렌더링 할 수도 있다. function datetostring(d) { return [ d.getfullyear(), d.getmonth() + 1, d.getdate() ].join('-'); }; <h2>{datetostring(new Date())}</h2> // <h2>2014-10-18</h2> 중괄호에 배열을 할당하면 React가 중괄호 안에 있는 배열의 각 항목을 자동으 로 하나로 묶어준다. 2 JSX - 031
var text = ['hello', 'world']; <h2>{text}</h2> // <h2>helloworld</h2> 종종 복잡한 값을 표현해야 할 때가 있다. 데이터 배열을 <li>로 표현해야하는 경 우가 그렇다. 이 문제를 해결하기 위해서 자식 노드를 처리하는 방법을 알아보자. 자식 노드 <h2>questions</h2>를 이용해서 헤더를 렌더링하면 Questions 는 h2 엘리 먼트의 자식 노드로 들어간다. 그렇다면 JSX를 이용해서 Divider를 아래와 같이 작성할 수 있을까? <Divider>Questions</Divider> 할 수 있다. React는 여는 태그와 닫는 태그 사이에 있는 모든 자식 노드를 파악 한다. 이 때 컴포넌트가 가지고 있는 this.props.children이라는 특별한 배 열에 모든 자식 노드를 저장한다. 위의 예제가 생성한 컴포넌트의 this.props. children 값은 ["Questions"]다. 이 개념을 이용해서 하드 코딩한 Questions 텍스트를 this.props. children으로 바꿔보자. 이제 React는 사용자가 <Divder> 태그 사이에 할당한 값을 값을 동적으로 렌더링 할 수 있다. var Divider = React.createClass({ render: function () { return ( <div classname ="divider"> <h2>{this.props.children}</h2><hr /> </div> ); } }); 032 -
HTML 엘리먼트처럼 활용할 수 있는<Divider> 컴포넌트를 만들었다. <Divider>Questions</Divider> 이 코드를 JSX 변환기 JSX transformer 를 JavaScript로 변환하면 다음과 같다. var Divider = React.createClass({displayName: 'Divider', render: function () { return ( React.createElement("div", {classname: "divider"}, React.createElement("h2", null, this.props.children), React.createElement("hr", null) ) ); } }); 결과값 역시 예상한 대로다. <div classname="divider"> <h2>questions</h2><hr /> </div> 2.4 JSX와 HTML의 차이점 JSX는 HTML과 유사하지만 HTML 문법을 완벽하게 따르지는 않는다. 이는 곧 장점이다. JSX 명세에는 다음과 같이 설명하고 있다. 이 명세서는 XML이나 HTML 명세를 따르지 않는다. ECMAScript 기능 처럼 JSX를 설계했으며, XML과 유사한 것은 익숙하기 때문이다 (http:// facebook.github.io/jsx/에서 발췌). 계속해서 JSX와 HTML 문법의 주요 차이점을 알아보자. 2 JSX - 033
속성 HTML 엘리먼트의 속성은 아래 보이는 것처럼 인라인 inline 으로 설정한다. <div id="some-id" class="some-class-name">...</div> JSX도 이 형식을 지원한다. 여기에 더해 JavaScript 변수를 이용해서 동적으로 속성 값을 할당할 수 있다. JavaScript 변수를 속성에 할당할 때는 변수를 중괄 호로 감싼다. var surveyquestionid = this.props.id; var classes = 'some-class-name';... <div id={surveyquestionid} classname ={classes}>...</div> 할당하려는 값을 얻는 과정이 복잡하다면 함수 호출의 결과를 속성 값으로 지정할 수도 있다. <div id={this.getsurveyid()} >...</div> React는 컴포넌트를 렌더링 할 때 마다 변수와 함수 호출을 평가하고, 평가 결과 로 얻은 새로운 상태 값을 DOM에 전달해 반영한다. NOTE 예제로 사용하는 설문조사 생성기의 전체 소스 코드는 Github 저장소에서 확인할 수 있다. https://github.com/backstopmedia/bleeding-edge-sample-app 조건문 React 컴포넌트의 마크업과 마크업 생성 로직은 하나로 묶여있다. 이렇게 함으 로써 반복문과 조건문 같은 JavaScript 로직을 이용해 마크업을 생성할 수 있다. 034 -
if/else 조건은 마크업으로 표현하기 어렵기 때문에, 컴포넌트에 조건문을 추가 하는 일 역시 어렵다. JSX에 바로 조건문을 작성할 수 있을까? 할 수 없다. <div classname={if(iscomplete) { 'is-complete' }}>...</div> 하지만 아예 불가능한 것은 아니며, 몇 가지 방법을 사용할 수 있다. 삼항 연산자 ternary logic 사용 변수를 선언하고 속성에서 참조 함수에 로직을 떠넘기기 논리곱(&&) 연산자 사용 각각의 예를 간단히 살펴보자. 삼항 연산자 사용 가독성을 위해 공백을 추가했다.... render: function () { return <div classname ={ this.state.iscomplete? 'is-complete' : '' }>...</div>; }... 텍스트에는 삼항 연산자가 적합하다. 하지만 JSX 안에 삼항 연산자를 사용한 코 드는 거추장스럽고 읽기 어렵다. 이런 경우에는 다음 방법을 고려할 수 있다. 변수 참조... getiscomplete: function () { return this.state.iscomplete? 'is-complete' : ''; }, 2 JSX - 035
render: function () { var iscomplete = this.getiscomplete(); return <div classname ={iscomplete}>...</div>; }... 함수 호출 사용... getiscomplete: function () { return this.state.iscomplete? 'is-complete' : ''; }, render: function () { return <div classname ={this.getiscomplete()}>...</div>; }... 논리곱 연산자(&&) 사용 React는 Null이나 False 값에 특정한 값을 할당하지 않기 때문에 불린 boolean 값을 사용해서 원하는 문자열을 출력할 수 있다. 아래 예제는 this.state. iscomplete가 참이면 is-complete 를 classname으로 사용한다. render: function () { return <div classname ={this.state.iscomplete && 'is-complete'}>... </div>; } 비DOM 속성 JSX에는 다음과 같은 특별한 속성을 사용할 수 있다. key ref dangerouslysetinnerhtml 036 -
자세히 살펴보자. 키 키 key 는 선택적으로 사용할 수 있는 고유 식별자다. 런타임 중에는 컴포넌트가 컴 포넌트 트리의 위나 아래로 이동할 수 있다. 예를 들어 사용자가 검색을 하거나 목 록에 아이템을 추가 또는 삭제하는 경우를 생각해보자. 이런 경우 컴포넌트를 제 거하고 다시 만들 필요가 없다. 컴포넌트에 설정한 고유키를 이용해서 React 컴포넌트 재사용 여부를 결정할 수 있다. 키는 렌더링 과정에서 항상 동일하다. 이렇게 하면 렌더링 성능을 향상시킬 수 있다. DOM에 있는 두 아이템의 위치를 서로 변경할 때, 전체를 다시 렌더링하 지 않고 키를 비교해서 위치만 변경할 수 있다. 참조 참조 ref 를 이용하면 부모 컴포넌트가 렌더링 함수 외부에서도 자식 컴포넌트를 참 조할 수 있다. ref 속성에 원하는 참조명을 설정해서 참조를 정의한다.... render: function () { return <div> <input ref ="myinput"... /> </div>; }... 컴포넌트 안에서 this.refs.myinput를 이용해서 이 참조 객체에 접근할 수 있 다. 이 객체를 지원 인스턴스 backing instance 라고 부른다. 지원 인스턴스는 React 가 DOM을 생성할 때 이용할 뿐, 실제 DOM은 아니다. this.refs.myinput. getdomnode ( )를 이용하면 실제 DOM을 가져올 수 있다. 2 JSX - 037
더 자세한 내용은 6장에서 부모/자식 관계와 소유 관계를 비교할 때 다룬다. HTML을 문자열로 사용하기 HTML을 문자열로 작성해야 할 때가 있다. DOM 조작에 문자열을 이용하는 외 부 라이브러리를 사용하는 경우다. React는 dangerouslysetinnerhtml 속성을 이용해 HTML 문자열을 입력할 수 있는 방법을 제공해 호환성을 높였다. 하지만 추천하고 싶은 방법은 아니다. 이 속성을 사용하려면 아래처럼 html 키가 있는 객체를 이용한다.... render: function () { var htmlstring = { html: "<span>an html string</span>" }; return <div dangerouslysetinnerhtml ={htmlstring} ></div>; }... NOTE DANGEROUSLYSETINNERHTML 이 속성은 곧 바뀔 수도 있다. 아래의 이슈를 참고하기 바란다. https://github.com/facebook/react/issues/2134 https://github.com/facebook/react/pull/1515 이벤트 모든 브라우저가 동일한 이벤트명을 사용하며, 카멜표기법을 따른다. 예를 들어 change는 onchange, click은 onclick이다. JSX를 이용하면 메소드를 할당 하는 것만으로 간단하게 이벤트 리스너를 추가할 수 있다.... handleclick: function (event) {...}, 038 -
render: function () { return <div onclick ={this.handleclick}>...</div> }... React는 자동으로 모든 메소드를 메소드가 속한 컴포넌트 객체에 바인딩한다. 따라서 수동으로 콘텍스트를 바인딩 할 필요가 없다.... handleclick: function (event) {...}, render: function () { // 안티패턴(anti-pattern) React를 사용할 때는 컴포넌트 인스턴스에 // 함수 콘텍스트를 개별적으로 바인딩할 필요가 없다. return <div onclick ={this.handleclick.bind(this)}>...</div> }... React의 이벤트 처리에 관한 더 자세한 이야기는 9장에서 다룬다. 주석 JSX는 JavaScript이기 때문에 JSX 마크업에 JavaScript 주석을 추가할 수 있 다. 주석을 작성할 수 있는 위치는 아래 두 곳이다. 1. 엘리먼트의 자식 노드로 작성 2. 노드의 속성에 인라인으로 작성 자식 노드로 작성하기 자식 노드 주석은 중괄호로 감싸서 작성한다. 여러 줄로 작성할 수도 있다. <div> {/* 여러 줄에 걸쳐 작성한 Input에 대한 주석 */} <input name ="email" placeholder="email Address" /> </div> 2 JSX - 039
속성에 인라인으로 작성 인라인 주석에는 두가지 방법이 있다. 여러 줄 주석은 이렇게 작성한다. <div> <input /* input에 대한 주석 */ name ="email" placeholder ="Email Address" /> </div> 한 줄 주석으로 작성할 수도 있다. <div> <input name ="email" // 한 줄 주석 placeholder ="Email Address" /> </div> 특수 속성 JSX 트랜스파일러는 JSX를 JavaScript 함수 호출 구문으로 변환한다. 따라서 변환 시 충돌 우려가 있는 class와 for 같은 몇 가지 키워드는 JSX에 사용할 수 없다. <form> 요소의 <label>에 for 속성을 추가하려면 JSX에서는 htmlfor 속성을 이용한다. <label htmlfor="for-text"... > CSS 클래스를 적용할 때는 class 속성 대신 classname 속성을 사용한다. 040 -
HTML에 익숙하다면 다소 이상하게 보일 수 있지만, JavaScript 입장에서 볼 때 는 일관성이 있다. JavaScript에서는 elem.classname으로 클래스 명에 접근할 수 있기 때문이다. <div classname={classes}... > 스타일 마지막으로 살펴볼 것은 인라인 스타일 속성이다. React는 모든 스타일 명에 카멜표기법을 적용했다. JavaScript의 DOM 스타일 속성과 일관성을 유지하 기 위함이다. 인라인 스타일을 선언하려면 CSS 값을 카멜표기법으로 작성해 JavaScript 객체에 전달한다. var styles = { bordercolor: "#999", borderthickness: "1px" }; React.renderComponent(<div style={styles}>...</div>, node); 2.5 JSX를 사용하지 않는 경우의 React 결과적으로 JSX 마크업은 순수 JavaScript 코드로 변환된다. 따라서 반드시 JSX 를 사용할 필요가 없지만 JSX를 사용하면 React 컴포넌트를 생성하는 단계의 복 잡함을 감출 수 있다. JSX를 사용하지 않을 생각이라면, React 컴포넌트를 생성 하는 과정을 알아야 한다. 이 과정은 총 3단계로 이루어진다. 1. 컴포넌트 클래스 정의하기 2. 컴포넌트 클래스의 인스턴스를 만드는 팩토리 생성하기 3. ReactElement 인스턴스를 생성하는 팩토리 사용하기 2 JSX - 041
React 엘리먼트 만들기 React는 HTML 엘리먼트를 생성해서 돌려주는 팩토리를 React.DOM.* 네임스 페이스로 제공한다. 이 팩토리는 React.createElement를 축약한 것으로 첫번 째 인자로 전달한 엘리먼트를 생성한다. 아래 예제에 있는 두 코드는 모두 같은 결 과를 돌려준다. React.createElement('div'); React.DOM.div(); 그렇지만 커스텀 컴포넌트를 만드려면, 커스텀 컴포넌트 클래스에서 팩토리를 생 성해야 한다. Divider 클래스를 만들었던 과정을 기억하는가? 목적을 명확하게 하기 위해서 DividerClass라고 이름을 바꿨다. var DividerClass = React.createClass({displayName: 'Divider', render: function () { return ( React.createElement("div", {classname: "divider"}, React.createElement("h2", null, this.props.children), React.createElement("hr", null) ) ); } }); JSX를 사용하지 않고 DividerClass를 쓰기 위해서는 두가지 방법을 생각해볼 수 있다. 1. React.createElement를 바로 호출한다. 2. React.DOM.* 함수와 비슷한 팩토리를 만든다. 042 -
createelement를 호출해서 엘리먼트를 직접 생성할 수 있다. var divider = React.createElement(DividerClass, null, 'Questions'); 팩토리를 만들려면 우선 createfactory 함수를 사용한다. var Divider = React.createFactory(DividerClass); ReactElement를 만들 수 있는 팩토리 함수를 만들었다. 아래처럼 사용할 수 있다. var divider = Divider(null, 'Questions'); 축약 React.DOM.* 네임스페이스를 이용하는 방식이 귀찮다면, 아래 예제에 보이는 R 과 같이 좀 더 짧은 변수명을 이용하면 좋다. var R = React.DOM; var DividerClass = React.createClass({displayName: 'Divider', render: function () { return R.div({className: "divider"}, R.h2(null, "Label Text"), R.hr() ); } }); 각각의 팩토리를 최상위 변수에 할당해놓고 필요할 때 직접 참조할 수도 있다. var div = React.DOM.div; var hr = React.DOM.hr; 2 JSX - 043
var h2 = React.DOM.h2; var DividerClass = React.createClass({displayName: 'Divider', render: function () { return div({classname: "divider"}, h2(null, "Label Text"), hr() ); } }); 참고사항 평소에 JavaScript와 마크업을 함께 사용하는 방식을 별로 좋아하지 않았다면, JSX가 제시하는 해결책에 매력을 느꼈기를 바란다. Facebook은 JSX에 대한 관 심이 증가하자 명세를 만들었으며, 기술적으로 깊이있는 설명도 함게 제공하고 있 다. 또한 JSX를 다뤄볼 수 있는 몇 가지 도구도 제공하고 있다. 이러한 도구는 브 라우저 환경에서 JSX 사용법을 알고 싶을 때 유용하게 사용할 수 있다. 2.6 JSX 공식 스펙 Facebook은 2014년 9월에 JSX 공식 명세를 공개했다. JSX를 만든 이유와 문 법에 대한 기술적인 설명을 담고 있다. 자세한 내용은 http://facebook.github.io/jsx/에서 확인할 수 있다. 브라우저에서 JSX 다뤄보기 JSX를 테스트 해 볼 수 있는 여러 가지 도구가 있다. React Getting Started 문 서에는 JSFiddle을 이용해서 JSX를 작성하는 방법이 나와있다. http://facebook.github.io/react/docs/getting-started.html 그리고 React가 제공하는 JSX 컴파일러 서비스를 이용하면 브라우저 상에서 044 -
JSX를 JavaScript로 변환할 수 있다. http://facebook.github.io/react/jsx-compiler.html 2 JSX - 045