Redering Elements
Elements는 React 애플리케이션을 만드는 가장 작은 구성요소이다.
elements는 화면에 보여주고자 하는 것에 대한 표현이다.
const element = <h1>Hello, world</h1>;
브라우저의 DOM elements와 달리 React elements는 일반적인 객체이며 생성하는데 비용이 적게 든다.
React DOM은 React elements와 일치하도록 DOM을 업데이트한다.
주의 :
elements는 더 널리 알려진 개념인 “components”와 혼동할 수 있다. components에 대해서는 다음
장에서 설명할 것이다. Elements는 component가 어떻게 구성되는지를 알려주는 요소이며 따라서 다음
장으로 넘거가기 전에 이 장을 반드시 읽을 것을 권한다.
Rendering an Element into the DOM
HTML 문서 안 어딘가에 <div>
태그가 있는 상황을 가정해보자
<div id="root"></div>
이 <div> 태그 안에 있는 모든 것들은 React DOM에 의해 관리될 것이기 때문에 “root” DOM node라 부를
것이다. React만으로 만들어지는 애플리케이션은 보통 한 개의 root DOM node를 갖게 된다. 만일 기존의
애플리케이션에 React를 통합하는 상황이라면 원하는 만큼의 각각 독립된 root DOM node를 만들 수도 있다.
root DOM node 안에 React elements를 렌더링하기 위해서는 React.render()
함수를 통해 (함수의
파라미터로) React elements와 root DOM node를 모두 전달해준다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
CodePen에서 실행해보자
위의 코드는 화면에 “Hello, world”를 표시할 것이다.
Updating the Rendered Element
React elements는 불변성을 가지고 있다. 어떤 element를 생성했다면 그 children이나 속성들을 수정할 수
없다. 하나의 element는 영화 속의 한 프레임과 같다. 그것은 특정 시점에 UI를 표현해 주는 것이다.
우리가 아는 한 UI를 업데이트하는 유일한 방법은 새로운 element를 만들어 React.render()
로 전달하는
것이다.
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
위의 코드는 매초마다 setInterval의 callback 함수에서 React.render()
를 호출한다.
주의 :
일반적으로 모든 React 애플리케이션은React.render()
를 한 번만 호출한다. 다음 장에서 이러한
코드가 어떻게 상태(state)를 포함하는 components로 캡슐화 되는지에 대해 배우게 될 것이다. 각각이
연관되는 내용이므로 주제를 건너 뛰지 않을 것을 권한다.
React Only Updates What's Necessary
React DOM은 element와 그 children을 이전 요소와 비교하여 DOM을 원하는 상태로 만드는 데 필요한
DOM 업데이트 만 적용한다.
CodePen 이용하여 마지막 예제를 확인할 수 있다.
비록 우리가 tick을 호출할때마다 전체 UI 구조를 표현할 element를 생성했다고 할지라도 실제로는 그 내용이
변경되는 text 노드만이 React DOM에 의해서 업데이트 된다.
우리의 경험에 의하면 “전체 시간 안에서 UI가 어떻게 변하는지”에 대해 생각하는 것보다 “특정한 시점에 UI가
어떻게 보여져야 하는지”에 대해 생각하는 것이 버그를 줄일 수 있는 방법이다.
'Study > React' 카테고리의 다른 글
React 살펴보기 #6 (0) | 2017.03.27 |
---|---|
React 살펴보기 #5 (0) | 2017.03.04 |
React 살펴보기 #3 (0) | 2017.02.11 |
React 살펴보기 #2 (0) | 2017.02.06 |
React 살펴보기 #1 (0) | 2017.02.06 |