Page 20 -

그림 2-5 <div> 요소를 직접 렌더링하는 대신 사용자 정의 컴포넌트 클래스를 사용하는 경우
2
ReactDOM.render()

HelloWorld React 첫걸음

div

h1 h1

흥미롭게도, ES6 문법을 이용하면 React.Componenet 클래스를 상속받아서 React 컴포넌트 클래
스를 생성할 수 있다. class CHILD extends PARENT 같은 형식으로 작성한다. 예제 코드 2.3처럼

HelloWorld 컴포넌트를 생성하는 경우에는 class HelloWorld extends React.Component라고
작성한다.
새로운 컴포넌트 클래스를 구현할 때는 render() 메서드를 반드시 작성해야 한다. 이 메서드는

다른 사용자 정의 컴포넌트 클래스나 HTML 태그로 만든 React 엘리먼트를 반환해야 한다. 엘리
먼트를 중첩하는 것도 가능하다.

예제 코드 2.3(ch02/hello-world-class/js/script.js)은 예제 코드 2.1에서 살펴본 중첩된 Hello
World 예제를 어떻게 하면 HelloWorld 컴포넌트로 리팩토링할 수 있는지를 보여준다. 사용자 정
의 클래스를 사용하면 UI 재사용을 더 잘 할 수 있다. HelloWorld 컴포넌트의 render() 메서드

도 이전 예제와 마찬가지로 <div> 엘리먼트를 반환한다. HelloWorld 사용자 정의 클래스를 생성
한 후, ReactDOM.render()에 문자열이 아닌 사용자 정의 클래스 객체를 전달할 수 있다.

예제 코드 2.3 React 컴포넌트 클래스 생성하고 렌더링하기

let h1 = React.createElement('h1', null, 'Hello world!')
class HelloWorld extends React.Component { React 컴포넌트 클래스 정의(이름은 대문자로 시작한다.)
render() { 엘리먼트 하나를 반환하는 함수인 render( ) 메서드를 생성한다.
return React.createElement('div', null, h1, h1) return 문에는 React 엘리먼트를 반환하도록
구현하여 React 클래스가 render( )를 실행
}
하면 두 개의 <h1> 엘리먼트를 감싼 <div>
} 엘리먼트를 받을 수 있다.
ReactDOM.render( React 엘리먼트를 ID가 content인 실제 DOM에 넣어준다.
React.createElement(HelloWorld, null), 첫 번째 인자로 HelloWorld 클래스를 전달하여 엘리먼트를
document.getElementById('content') 생성한다. 이때 HelloWorld 클래스는 문자열이 아닌 객체다.
)

071

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