Page 21 -

규칙에 따라 React 컴포넌트를 담는 변수의 이름은 대문자로 시작한다. JSX 없이 자바스크립트

만 사용하는 경우에는 이런 규칙을 따르지 않아도 된다(helloWorld처럼 소문자 변수명을 사용할
수 있다). 그렇지만 JSX를 사용할 경우에는 이 규칙을 따라야 하므로 여기서부터 이 규칙을 적용
할 것을 추천한다. (JSX에서 React는 일반 <h1> 같은 HTML 요소와 <HelloWorld/> 같은 사용
자 정의 컴포넌트를 대소문자로 구분한다. 반면에, 자바스크립트만 사용하는 경우에는 ‘h1’이나

HelloWorld처럼 전달하는 변수에 따라 구분한다. 지금부터 사용자 정의 컴포넌트 이름을 지을 때
대문자 규칙을 따르는 것은 좋은 생각이다.) JSX에 대해서는 3장에서 살펴본다. 1

Note ES6+/ES2015+와 React
위에서 살펴본 컴포넌트 클래스 예제는 render() 메서드를 ES6 문법으로 정의한다. 콜론(:)과 function 키워드를
입력하지 않았다. 이것은 함수를 값으로 하는 속성(키 또는 객체 프로퍼티)을 선언하는 것과 동일하다. 즉, render:
function()을 작성하는 것과 같다. ES6의 메서드 작성법을 사용하는 것은 내가 선호하기도 하고, 추천하고 싶은
방법이기도 하다. 왜냐하면 이 방법이 코드가 더 짧고, 짧게 작성할수록 실수할 가능성도 줄어들기 때문이다.

예전에는 React에 컴포넌트 클래스를 생성하기 위해 사용하는 React.createClass()라는 자체 메서드가 있었
다. React.createClass()를 사용하는 것과 ES6 클래스를 사용해서 React.Component를 상속받는 것에는 약
간 차이가 있다. 일반적으로 둘 중에 한 가지 방법을 택하는 것이 좋고, 둘을 동시에 사용하는 것은 추천하지 않는다.
React 버전 15.5.4 이후부터 createClass() 메서드는 지원종료(deprecated) 되었다.
여전히 React.createClass()를 사용하는 팀도 있겠지만, 대체로 ES6 클래스를 사용하는 방법이 일반적인 표준
이다. 이 책은 향후 흐름에 맞게 가장 많이 사용하는 도구와 방법을 소개하고자 하므로 ES6에 중점을 둘 것이다. 깃허
브 저장소를 보면 폴더명에 -es5가 붙어있는데, 이 책을 준비하던 초창기에 ES5로 작성한 예제다.
2016년 8월 현재 대부분의 최신 브라우저가 별도의 도구를 사용하지 않고도 기본적으로 이 책에서 소개한 ES6 기
1
능은 물론 ES6 명세 상의 대부분의 기능을 지원한다. 따라서 이 책을 읽는 독자들도 ES6에 익숙하다고 가정하고
있다. React와 관련된 ES6+/ES2015+ 및 그 외의 주요 기능에 대한 자세한 정보가 필요하다면, 이 책의 부록 E를
참고하거나 ES6를 포괄적으로 다룬 악셀 라우슈마이어(Axel Rauschmayer)의 저서 《ES6 탐색하기(Exploring
ES6)》도 추천한다. 인터넷에 무료로 공개되어 있기도 하다(http://exploringjs.com/es6).

2
ReactDOM.render()와 유사하게, 컴포넌트 클래스의 render() 메서드는 엘리먼트 하나만 반환한다.
여러 개의 동일 계층 엘리먼트를 반환하려면, <div>나 <span> 요소처럼 스타일에 영향을 주지 않
는 엘리먼트로 감싸야 한다. 브라우저에서 실행한 결과는 그림 2-6과 같다.

1 ECMAScript 6 호환성 표(https://kangax.github.io/compat-table/es6)
2 역주 React 버전 16부터는 문자열이나 숫자, 배열에 담은 여러 개의 React 엘리먼트(fragments)도 render() 메서드의 반환값으로 사용
할 수 있도록 변경되었다.
•https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings
•https://reactjs.org/docs/react-component.html#render

072

리액트 교과서(본문)최종.indd 72 2018-05-09 오전 12:32:55