Page 18 -
P. 18
이 점을 알고, createElement()를 사용해서 <div>와 자식 엘리먼트 <h1> 두 개를 생성해보자
(ch02/hello-world-nested/index.html). 2
예제 코드 2.1 <h1> 엘리먼트 두 개를 자식으로 가진 <div> 엘리먼트 생성 React 첫걸음
let h1 = React.createElement('h1', null, 'Hello world!') createElement( )의 세 번째 매개
ReactDOM.render( 변수가 문자열이면, 이는 생성하는
엘리먼트의 텍스트 값이다.
React.createElement('div', null, h1, h1),
document.getElementById('content') 세 번째 또는 그 이후의 매개변수가 문자열이 아니라면,
) 이는 새로 생성하는 엘리먼트의 자식 엘리먼트다.
HTML 코드는 1장에서 작성한 Hello World 예제와 같다. React와 ReactDOM 라이브러리,
content 노드가 필요하다(ch02/hello-world-nested/index.html).
예제 코드 2.2 React 코드를 제외한 중첩 엘리먼트 예제의 HTML
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
...
</script>
</body>
</html>
지금까지는 createElement()의 첫 번째 매개변수로 문자열만 입력했다. 사실 첫 번째 매개변수
로 두 가지 자료형을 입력할 수 있다.
● 문자열로 작성한 일반적인 HTML 태그. 예를 들면 ‘h1’, ‘div’, ‘p’처럼 화살괄호가 없는
문자열이다. 이름은 소문자로 작성한다.
● React 컴포넌트 클래스 객체. HelloWorld를 예로 들 수 있다. React 컴포넌트 클래스의 이
름은 대문자로 시작한다.
069
리액트 교과서(본문)최종.indd 69 2018-05-09 오전 12:32:55
