DOM에 엘리먼트 렌더링하기
엘리먼트는 React 앱의 가장 작은 단위로서 화면에 표시할 내용을 기술합니다.
브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다.
React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.
React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다.
렌더링 된 엘리먼트 업데이트하기
React 엘리먼트는불변객체입니다.
엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.
엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.
지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것입니다.
다음은 현재 시간을 setInterval(실행할 함수, 시간) 1초 단위로 반복해서 출력하는 예시입니다.
|
setInterval(tick, 1000);
|
setInterval(실행할 함수, 시간) 콜백을 이용해 초마다 root.render()를 호출합니다.
다음은 완성된 전체 코드 입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 008</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
let root = ReactDOM.createRoot(document.querySelector('#app'));
let tick = () => {
const element = (
<div>
<h2>Hello world! Hello React!!!</h2>
현재 날짜 : {new Date().toLocaleDateString()}
<br/>
현재 시간 : {new Date().toLocaleTimeString()}
</div>
);
root.render(element);
}
window.onload = () => {
setInterval(tick, 1000);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
변경된 부분만 업데이트하기
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다.
개발자 도구를 이용해 살펴보면 이를 확인할 수 있습니다. 매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트했습니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 09] HTML로 시작해보는 React Component 속성 (1) | 2024.10.15 |
|---|---|
| [React Exam 08] HTML로 시작해보는 React Component (2) | 2024.10.15 |
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
| [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 (0) | 2024.10.15 |
| [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 (0) | 2024.10.15 |
