Page 19 -

첫 번째 방법은 표준 HTML 요소를 렌더링하는 것이다. React는 표준 HTML 요소를 탐색해서

일치하는 것이 있으면 해당 React 엘리먼트의 유형으로 사용한다. 예를 들어 ‘p’를 넘겼다면 p는
문단 태그이므로 이에 일치하는 것을 찾을 수 있다. 이렇게 해서 React 엘리먼트를 렌더링하면
DOM에 <p>가 생성된다.

createElement()의 첫 번째 매개변수로 문자열 외에도 사용자 정의 컴포넌트 클래스도 사용할
수 있다. 사용자 정의 컴포넌트 클래스의 생성과 전달 방법에 대해서 알아보자.

2.2 React 컴포넌트 클래스 생성 R E A C T

React 엘리먼트를 중첩하고 나면, 곧 입력할 엘리먼트가 굉장히 많다는, 다음 문제를 발견하
게 될 것이다. 1장에서 설명한 것처럼 컴포넌트 기반 아키텍처를 활용해야 한다. 컴포넌트 클래스

(component class)를 이용하면 기능을 느슨하게 결합된 부분으로 분리하여 코드를 재사용할 수 있다.
컴포넌트 클래스는 컴포넌트(component)라고 부르기도 한다(웹 컴포넌트와 혼동하지 않기 바란다).

표준 HTML 태그를 블록이라고 생각해보자. React 컴포넌트 클래스를 구성하는데, 이 블록들을
사용해서 클래스의 인스턴스인 사용자 정의 엘리먼트를 생성할 수 있다. 사용자 정의 엘리먼트를
이용하면 이식 가능한 클래스(구성할 수 있고, 재사용할 수 있는 컴포넌트)에 논리를 추상화하고
캡슐화할 수 있다. 이런 추상화는 여러 팀이 거대하고 복잡한 애플리케이션에 UI를 재사용하는

것은 물론이고, 다른 프로젝트에서도 재사용할 수 있게 해준다. 자동완성 컴포넌트, 도구상자, 메
뉴 등을 예로 들 수 있다.

createElement('h1', null, 'Hello World!') 메서드를 사용해서 ‘Hello world!’를 HTML
태그에 담아 렌더링하는 것은 어렵지 않았다. 그렇다면 그림 2-5처럼 HelloWorld를 별도의 클래
스로 분리하려면 어떻게 해야 할까? 서로 다른 프로젝트 열 개에 HelloWorld를 사용해야 한다고
가정해보자! (HelloWorld 컴포넌트를 이렇게 여러 번 사용할 가능성은 크지 않겠지만, 잘 만든 자

동완성 컴포넌트라면 분명 재사용될 것이다.)

070

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