React Element
리액트가 다른 프레임워크들과 결정적으로 다른 부분은 자바스크립트 객체를 DOM 엘리먼트로 만드는 부분이다. 엘리먼트를 만들때 .createElement()
라는 리액트메소드를 사용한다. (document 메서드랑 비슷한데 조금 강화되어있다.)
import React from 'react';
import ReactDOM from 'react-dom';
//ReactDOM은 리액트로 만든 엘리먼트를 브라우저에 랜더링 한다.
const element = React.createElement('div', null, 'hello world');
const rootElement = document.getElementById('root');
ReactDOM.render(
element, rootElement
);
element
를 콘솔에 출력해보면, 여러가지 프로퍼티들을 가진 그냥 자바스크립트 객체임을 할 수 있다.
.createElement()
의 첫번째 인자는 document 메서드와 동일하게 tagName이다. 두번째 인자는 프로퍼티들을 넣을 수 있고, 세번째에는 textNode나 또 다른 리액트 엘리먼트 혹은 컴포넌트 가 들어간다.
프로퍼티를 넣을때는 {} 형태로 넣어야하며, html문서에서 사용하는 attribute명이 아니라, 자바스크립트에서 접근하는 엘리먼트의 프로퍼티 명으로 넣어야 한다. (말이 좀 이상한데?) 예를들어 for 은 htmlFor로 사용할 수 있고, class는 className로 사용한다. (HTMLDOMPropertyConfig.js 리액트에서 실제 DOM프로퍼티로 전달가능한 프로퍼티의 목록이다.)
const people = [
{name:"minwoo"},
{name:"kuma"},
{name:"nangrang"}
]
// array등을 반복자를 통해 mapping할때 연속된 엘리먼트에 key(unique)를 넣어주지 않으면
// 콘솔에 빨간 에러를 발생시켜 심기를 불편하게 만든다.
const element = React.createElement('ol', null, people.map((person, index) => {
React.createElement('li' , {key: index}, person.name );
});
JSX
React.createElement()
메소드 의 html모양 버전. 내부적으로는 여전히 .createElement()
메소드를 사용한다. jsx에서 자바스크립트요소를 사용할떄는 {}
로 묶어 사용한다.
const people = [
{name:"minwoo"},
{name:"kuma"},
{name:"nangrang"}
]
var element = <ol>
{people.map((person,index) => {
return (<li key={index}>{person.name}</li>);
})}
</ol>;
jsx를 사용할때는 하나의 루트 엘리먼트로 묶어줘야 한다. .createElement()
를 사용하는것을 인지한다면 당연한 얘기다.