엘리먼트(Element) - React 배우기

1. 엘리먼트의 정의

리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다.

• 개발자모드의 html 요소가 DOM 엘리먼트이다.
• 리액트 엘리먼트는 DOM 엘리먼트의 가장 표현으로
• 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다.

• 아래 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 리액트의 creactElement() 함수를 사용하여 엘리먼트를 생성한다.

const element = <h1>Hello, world</h1>;

2. 엘리먼트 표현

• 엘리먼트는 자바스크립트 객체 형태로 존재한다.
• 컴포넌트 유형과 속성 및 내부의 모든 자삭에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체

{
    type: 'button', // 엘리먼트의 유형
    props: { // 엘리먼트의 속성
        className: 'btn-red',
        children: { // 엘리먼트의 자식
            type: 'span',
            props: {
                children: 'Hello, world'
            }
        }
    }
}

• 위 코드는 아래와 같이 랜더링 된다.

<button class="btn-red">
    <span>Hello, world</span>
</button>

• createElement() 함수가 동작하는 과정을 코드로 살펴보면

function Button(props) {
    return (
        <button className={`btn-${props.color}`}>
            <span>{props.children}</span>
        </button>
    );
}

// 위 코드는 아래와 같이 동작한다.
const element = <Button color="red">Hello, world</Button>;

3. 엘리먼트의 특징

• 엘리먼트는 불변객체이다.
• 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
• 새로운 엘리먼트를 만들어서 대체해야 한다.

const element = <h1>Hello, world</h1>;

// 아래 코드는 에러가 발생한다.
element.type = 'h2';

4. 엘리먼트 랜더링

• 엘리먼트는 화면에 표시할 내용을 기술한다.
• 랜더링은 리액트 엘리먼트를 DOM 노드로 만드는 과정이다.

const element = <h1>Hello, world</h1>;

5. 엘리먼트 업데이트

• 새로운 엘리먼트를 만들어서 대체해야 한다.
• 엘리먼트를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render() 함수를 호출하여 전달하는 것이다.
• 아래 코드는 1초마다 ReactDOM.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);

6. 예제

• ReactDOM.render()를 이용한 시계 예제

// src/component/Clock.js
function Clock(props) {
    return <div>안녕하세요. 지금 시각은 {props.date.toLocaleTimeString()}입니다.</div>;
}

export default Clock;

// App.js
import React from "react";
import Clock from "./components/Clock";

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <Clock date={new Date()} />
    </div>
  );
}

export default App;

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

function tick() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

setInterval(tick, 1000);