React Hello World : react.js 와 react dom.js

Hello-World 출력하기

...
<div id='content'></div>
<script>
var h1 = React.createElement('h1', null, 'Hello-World!')
ReactDom.render(
  h1,
  document.getElementById('content')
)
</script>
...

ReactJS 를 처음 접하는 입장에서 두 함수를 먼저 이해하자.

하나는, html 의 element를 생성하는 react 함수

• React.createElement()

하나는, 생성된 element 를 html의 특정 element 의 하위에 rendering 하는 함수

• ReactDom.render()

react.js 라이브러리의 React.createElement()

• 인자

React.createElement(elementName, data, child)

1. elementName : HTML 태그명 또는 직접 작성한 컴포넌트 클래스 객체
2. data : 속성이나 상위 컴포넌트에 받는 값 : null 또는 {name: 'Azat', class: 'my-class'} 와 같은 형태로 전달
3. child : 변수일 경우 자식 엘리먼트 : 문자열일 경우 내부 텍스트로 전달

• 예제

React.createElement('h1', null, 'Hello-World!') 의 경우 HTML에 렌더링 될 때는

<h1> Hello-World! </h1>

식으로 렌더링

• 응용

<h1> Hello-World! </h1>
<h1> Hello-World! </h1>
<h1> Hello-World! </h1>
<h1> Hello-World! </h1>
<h1> Hello-World! </h1>

처럼 여러번 렌더링 하고 싶을 때는 어떻게 할까?

createElement() 의 elementName 인자는 한번만 전달 할 수 있다

즉, 한번 createElement() 함수 실행에 여러개의 *<*h1> 요소를 생성할 수 없다는 얘기 이럴 때 상위 요소의 자식요소로 *<*h1> 요소를 여러개 넣는 것은 가능하다 createElement() 의 마지막 인자인 child 는 가변인자로써 복수개 전달 가능하다

솔루션

var MyElement = React.createElement('h1', null, 'Hello-World!')
React.createElement('div', null, MyElement, MyElement, MyElement, MyElement, MyElement)

결과

<div>
  <h1> Hello-World! </h1>
  <h1> Hello-World! </h1>
  <h1> Hello-World! </h1>
  <h1> Hello-World! </h1>
  <h1> Hello-World! </h1>
</div>

react-dom.js 라이브러리의 ReactDom.Render()

앞서 createElement() 함수 실행에 대한 렌더링 결과에 대해 알아봤지만, 사실 createElement() 함수만으로는 실제 렌더링이 되지 않는다 최종적으로 렌더링을 위해서는 ReactDom.Render() 함수를 실행해야함

• 인자

ReactDom.Render(element, container)

1. element : createElement() 로 생성된 요소를 전달 : 미리 변수에 저장해두고 해당 변수를 전달
2. container : 렌더링 되고자 하는 container 역할 하는 요소

• 예제

var h1 = React.createElement('h1', null, 'Hello-World!')
ReactDom.render(
  h1,
  document.getElementById('content')
)

여기서 id='content' 의 속성을 갖는 상위 요소가 이미 렌더링할 목표 html 파일에 존재하여야 함

<div id='content'>
 <!-- 여기에 렌더링 됨 -->
</div>

마찬가지로 render() 함수 역시 한번에 한가지의 요소만 렌더링 가능함 여러개의 hello-world 요소를 한번에 렌더링 하고자 한다면 앞서 상위 요소로 감싼 div 요소를 렌더링 하여야 함