[React] 엘리먼트 렌더링

kjoo0·2024년 2월 13일

React

React 자습서

목록 보기

1/3

React 자습서 - 엘리먼트 렌더링

엘리먼트

React 앱의 가장 작은 단위
화면에 표시할 내용 기술

이러한 엘리먼트를 화면에 표시하기 위해서는?

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

DOM 엘리먼트('root')를 ReactDOM createRoot에 전달
root 객체를 통해 render 해주는 것!

React의 렌더링은 한 파일에 한 개의 컴포넌트를 정의하고, 이 컴포넌트를 렌더링하는 방식으로 사용한다!
따라서 여러개의 요소를 렌더링하려면 각 요소를 별도의 컴포넌트로 분리하고,
해당 컴포넌트를 각각 렌더링해야 한다!

오류 코드

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>Hello, world</h1>;
const element2 = <div>
        <button>버튼입니다.</button>
</div>;
root.render(element);
root.render(element2);

수정 코드

// HelloWorld.js
import React from 'react';

function HelloWorld() {
  return <h1>Hello, world</h1>;
}

export default HelloWorld;
// ButtonComponent.js
import React from 'react';

function ButtonComponent() {
  return (
    <div>
      <button>버튼입니다.</button>
    </div>
  );
}

export default ButtonComponent;
// index.js (혹은 다른 진입점 파일)
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
import ButtonComponent from './ButtonComponent';

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

root.render(
  <React.Fragment>
    <HelloWorld />
    <ButtonComponent />
  </React.Fragment>
);

<기초 지식>

브라우저 DOM element vs React element (by chatGPT)

DOM 요소 (DOM Element):

HTML 문서의 실제 DOM 트리에 존재하는 요소(div나 span과 같은 HTML 요소들)
DOM 요소는 웹 페이지의 구조를 표현하고 이벤트 핸들링, 스타일 적용 등의 작업을 수행할 수 있습니다.

React 요소 (React Element):

React 애플리케이션에서 사용되는 가상의 요소로, 실제 DOM 요소와 다릅니다.
React 애플리케이션에서 UI를 구성하는 데 사용되는 요소를 말합니다.
JSX 문법을 사용하여 정의되며, React 애플리케이션에서 렌더링되기 전에 실제 DOM 요소로 변환됩니다.
React 요소는 일반 JavaScript 객체이므로, 속성과 자식 요소를 포함하고 있습니다.
React 요소는 React에서 UI를 관리하고 업데이트하는 데 사용됩니다.

***주요한 차이점

React 요소는 가상의 표현이며, React에 의해 관리되고 업데이트되는 반면, DOM 요소는 실제 HTML 문서의 일부이며, 브라우저에 의해 직접 조작될 수 있습니다. React는 이러한 DOM 요소들을 추상화하여 가상 DOM을 구성하고, 이를 효율적으로 관리하여 성능을 최적화합니다.