TIL: React | [공식문서 읽기] 엘리먼트 렌더링 - 221206

Lumpen·2022년 12월 6일
0

React 공식문서

목록 보기
3/13

엘리먼트 렌더링

엘리먼트는 React의 가장 작은 단위로 화면에 표시할 내용을 기술한다

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

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체로 쉽게 생성할 수 있다
React DOM 은 엘리먼트와 일치하도록 DOM 을 업데이트 한다

엘리먼트는 React 컴포넌트를 구성하는 구성 요소로 사용되고
컴포넌트는 하나의 기능 단위로써의 React 엘리먼트의 집합이다

렌더링 하기

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

div 내부의 모든 엘리먼트를 React DOM 에서 관리하기 때문에
root DOM 노드라고 부른다

일반적으로 루트 노드는 하나
기존 애플리케이션에 리액트를 추가할 경우에는 여러 루트 노드를 갖기도 한다

아래와 같이 작성된 엘리먼트를 렌더링 할 수 있다

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

렌더링 된 엘리먼트 업데이트

React 엘리먼트는 불변 객체로
생성 이후 해당 엘리먼트의 자식이나 속성을 변경할 수 없다

지금까지의 방법으로 엘리먼트를 업데이트 하기 위해서는
새로운 엘리먼트를 생성 후 root.render()로 전달하는 것
하지만 대부분 리액트 앱은 root.render()를 한 번만 호출한다

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글