Page 15 -

이 장은 React를 다루는 기초적인 단계로, 뒤에 이어질 내용을 이해하기 위한 기초를 다진다.

React의 엘리먼트나 컴포넌트 같은 개념을 이해하는 것이 중요하다. 간단히 말해 엘리먼트는 컴포넌
트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 엘리먼트를 어떻게 그리고 왜 사용할까? 지금부터
살펴보자!

Note 이 장의 예제 코드는 https://github.com/gilbutITbook/006961 또는 https://github.com/azat-
co/react-quickly/tree/master/ch02에서 확인할 수 있다(깃허브 저장소 https://github.com/azat-co/
react-quickly의 ch02 폴더다).

2.1 엘리먼트 중첩 R E A C T

1장에서 React 엘리먼트를 생성할 때 React.createElement()를 사용하는 것은 이미 살펴봤다.
다음 예제에서 다시 한 번 확인해보자. <a> 태그로 링크를 만들었다.

let linkReactElement = React.createElement('a',
{href: 'http://webapplog.com'},
'Webapplog.com'
)

문제는 대부분의 UI가 여러 개의 HTML 요소로 이루어져 있다는 점이다. 메뉴 내부에 링크가 있

는 것처럼 말이다. 예를 들어 그림 2-1을 보면 한 영역 안에 버튼 여러 개, 비디오 썸네일, 유튜브
플레이어가 있다.

계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다. 1장에서는 h1
React 엘리먼트를 생성하고 ReactDOM.render()를 사용해서 실제 DOM에 렌더링하는 첫 번째
React 코드를 구현했다.

let h1 = React.createElement('h1', null, 'Hello world!')
ReactDOM.render(
h1,
document.getElementById('content')
)

066

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