리액트 React | React 엘리먼트(Element)

 

✅ React 엘리먼트(Element) 

💡 React 엘리먼트(Element)

리액트 애플리케이션에서 엘리먼트(Element)는 가장 기본적인 구성 요소입니다. 엘리먼트는 JSX 문법을 사용하여 일반 JavaScript 객체로 생성할 수 있습니다. JSX 문법은 XML과 유사한 문법을 사용하여 리액트 컴포넌트를 작성하는 방식입니다. 엘리먼트는 사용자 인터페이스의 다양한 부분을 나타내기 위해 사용됩니다.

 

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

---

이렇게 생성된 엘리먼트는 화면에 표시되기 위해 렌더링 되어야 합니다.

 

💡 가상 DOM(virtual DOM)

https://www.snugarchive.com/blog/react-jsx-and-elements/

리액트에서는 가상 DOM(virtual DOM)을 사용하여 실제 DOM을 대신하여 UI를 관리합니다. 가상 DOM은 메모리 상에 존재하는 자바스크립트 객체로, 리액트 엘리먼트를 사용하여 가상 DOM을 구성합니다. JSX 문법을 사용하여 리액트 엘리먼트를 작성하고, JSX 태그를 사용하여 엘리먼트의 구조, 속성, 자식 엘리먼트를 지정할 수 있습니다.

---

실제 DOM을 변경하기 전에 리액트는 가상 DOM을 사용하여 변경 내용을 사전에 준비합니다. 개발자는 리액트 엘리먼트를 사용하여 가상 DOM에서 변경하고자 하는 부분만 수정하면, 리액트는 변경된 부분에 대응하는 실제 DOM 부분만 업데이트합니다. 이를 통해 초기 렌더링 이후에 필요한 부분만 갱신하여 반응성과 부드러운 페이지 전환을 제공할 수 있습니다.

 

💡 DOM에 엘리먼트(Element) 렌더링 하기

React 앱은 일반적으로 하나의 루트 DOM 노드를 가지며, 이를 루트(root) DOM 노드라고 합니다. 루트 DOM 노드는 애플리케이션의 최상위 컴포넌트를 감싸는 역할을 합니다.

<div id="root"></div>

---

React 엘리먼트를 실제 DOM에 렌더링 하기 위해서는 먼저 ReactDOM.createRoot() 메서드를 사용하여 루트 DOM 노드를 지정해야 합니다. 그런 다음, root.render() 메서드를 사용하여 React 엘리먼트를 렌더링 합니다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

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

root.render(element);

 

💡 렌더링 된 엘리먼트(Element) 업데이트하기

React 엘리먼트는 불변 객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 직접 변경할 수 없습니다. 대신, 업데이트를 위해서는 새로운 엘리먼트를 생성하고 이를 root.render()에 전달해야 합니다.

---

일반적으로 React 앱에서는 setInterval()과 같은 타이머나 이벤트 핸들러를 사용하여 엘리먼트를 주기적으로 업데이트합니다. 다음 예제는 1초마다 현재 시간을 포함하는 엘리먼트를 생성하여 루트 DOM 노드에 렌더링 하는 예입니다. 이렇게 하면 매초마다 새로운 엘리먼트가 생성되어 화면에 표시되며, 시간이 업데이트됩니다.

 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

 

💡 변경된 부분만 업데이트하기

React DOM은 엘리먼트와 그 자식 엘리먼트를 이전 상태와 비교하고, 변경된 부분만 실제 DOM에 업데이트합니다. 이를 통해 효율적인 UI 업데이트가 가능합니다. 예를 들어, 텍스트 노드만 변경되었을 때는 해당 부분만 업데이트하고 나머지는 그대로 유지합니다.

https://ko.legacy.reactjs.org/docs/rendering-elements.html

---

React의 가상 DOM은 변경 사항을 추적하고 최소한의 DOM 조작만 수행하여 성능을 최적화합니다. 이를 통해 React 앱은 빠른 업데이트와 부드러운 사용자 경험을 제공할 수 있습니다.

 

✅ React 엘리먼트(Element) 이벤트 처리하기

React에서 엘리먼트의 이벤트를 처리하는 방식은 HTML에서 이벤트를 처리하는 방식과 유사하지만, 몇 가지 문법적인 차이가 있습니다.

 

💡 이벤트 이름

React에서 이벤트 이름은 소문자 대신 캐멀 케이스(camelCase)로 작성됩니다. HTML에서의 onclick은 React에서는 onClick으로 작성됩니다.

---

HTML

<button onclick="activateLasers()">
  Activate Lasers
</button>

---

React

<button onClick={activateLasers}>
  Activate Lasers
</button>

 

💡 이벤트 핸들러

React에서는 이벤트 핸들러를 함수 형태로 전달합니다. 이벤트가 발생했을 때 호출될 함수를 직접 전달하는 방식입니다.

---

React

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>
  Click Me
</button>

 

💡 기본 동작 방지

HTML에서는 이벤트 핸들러에서 return false를 반환하여 기본 동작을 방지할 수 있습니다. 하지만 React에서는 이 방식이 동작하지 않습니다. 대신에 명시적으로 preventDefault를 호출하여 기본 동작을 방지해야 합니다.

---

React

function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>