..

Search

9) 엘리먼트

엘리먼트

엘리먼트(element)

엘리먼트(element)는 View에 렌더링 할 내용을 React에 알려주기 위한 수단으로, React 애플리케이션을 구성하는 가장 작은 블록입니다.

React 엘리먼트
const element = <p className="greeting">Hello, World</p>

 

React 엘리먼트는 HTML 태그의 이름을 값으로 가지는 type 필드와 그 외 속성들을 값으로 전달받는 props 필드로 구성된 객체(object) 형태로 정의되며, React는 이 객체를 읽어들여 DOM을 구성하고 최신 상태로 업데이트하는데 사용합니다.

 

React 엘리먼트는 일반 객체(plain object)로 손쉽게 생성할 수 있지만, 불변 객체(immutable object)이기 때문에 일단 생성된 후에는 상태나 속성을 변경할 수 없습니다. 따라서 React에서 UI를 업데이트하는 방법은 새로운 엘리먼트를 생성하고, 이를 render() 메소드에 전달하는 것입니다.

루트 DOM 노드(Root DOM Node)

우리는 앞서 Fragment 기능에 대해 살펴보면서 다음과 같은 최종 렌더링된 HTML 코드를 본 적이 있습니다.

최종 렌더링된 HTML 코드
<div id="root">
  <h1>Hello, World!</h1>
  <p>React도 안녕!</p>
</div>

 

위와 같이 React 애플리케이션에는 id 속성값이 root인 <div>요소가 하나 존재합니다. 이를 루트 DOM 노드(Root DOM Node)라고 부르며, 이 내부에 들어가는 모든 요소들은 React DOM에서 관리하게 됩니다.

 

React 프로젝트 파일 중 public 폴더의 index.html 파일을 열어보면, <body>요소 안에 아래와 같은 루트 DOM 노드가 존재함을 확인할 수 있습니다.

Root DOM Node
<div id="root"></div>

 

React 애플리케이션은 일반적으로 하나의 루트 DOM 노드를 가지지만, 기존 애플리케이션에 React를 순차적으로 도입하려는 경우에는 원하는 만큼의 독립된 루트 DOM 노드를 포함할 수도 있습니다.

엘리먼트의 렌더링

지금까지 우리는 React 애플리케이션의 App.js 파일 만을 주로 살펴보았지만, 이번에는 index.js 파일을 열어보도록 합시다. 이 파일은 React 애플리케이션의 진입점이며, 초기 코드는 아래와 같습니다.

 

우선 루트 DOM 요소를 createRoot() 함수에 전달하여 새로운 루트 DOM 노드를 생성하여 반환합니다. 이렇게 반환된 루트 DOM 노드의 render() 메소드에 화면에 나타내길 원하는 엘리먼트들을 전달하여 View를 렌더링하게 됩니다.

index.js의 초기 코드
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

 

따라서 index.js 파일의 코드를 아래와 같이 수정하면, 새롭게 생성한 element라는 React 엘리먼트를 화면에 렌더링 할 수 있습니다.

예제(index.js)
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const element = <h1>새로운 React 엘리먼트</h1>;

root.render(element);

 

React v18부터는 기존에 사용하던 ReactDOM.render() 메소드 대신ReactDOM.createRoot() 메소드를 사용해야 합니다. 이 메소드는 “react-dom/client” 패키지에서 불러와 사용할 수 있습니다.

연습문제