react

리액트 엘리먼트 렌더링이란?

2023. 2. 3. 16:36
목차
  1. 🙄 엘리먼트는 뭔데요
  2. 🙄root DOM 노드

🙄 엘리먼트는 뭔데요

리액트 공식 문서에 따르면 엘리먼트는 리액트 앱의 가장 작은 단위를 뜻합니다.
리액트를 공부하다보면 컴포넌트라는 개념을 만나게되는데

엘리먼트는 컴포넌트의 "구성요소"라고 알고 있으면 되겠네요!
엘리먼트가 모여서 컴포넌트가 되는 이미지입니다.

브라우저의 DOM 엘리먼트와 달리 Reach 엘리먼트는 일반 객체이고
쉽게 생성할 수 있으며 리액트 DOM은 리액트 엘리먼트와 일치하도록
DOM을 업데이트 해준다고 합니다.

또한 리액트 엘리먼트는 불변객체입니다. 따라서 엘리먼트를 생성한 이후에는 수정이 불가능해요
그럼 어케 수정함?
새로운 엘리먼트를 생성하고 이걸 root.render()에 전달하는 걸로 업데이트합니다.

🙄root DOM 노드

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

 


리액트로 구현된 애플리케이션은 하나의 root DOM 노드가 있습니다.
리액트 엘리먼트를 렌더링하기 위해서는
DOM엘리먼트를 ReactDOM.createRoot()에 전달한 다음
root.render()에 전달해야해요

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

DOM에서 id가 root인 엘리먼트를 취득해서 ReactDOM.createRoot()에 전달해주네요

그 다음에 element 를 root.render()에 전달하면 element가 화면에 나타나는거군요


 

반응형
저작자표시 비영리 (새창열림)

'react' 카테고리의 다른 글

React 프로젝트 시작 전 환경 세팅하기  (0) 2023.03.01
함수형과 클래스형 컴포넌트의 차이를 자세히 설명해주세요  (0) 2023.02.05
함수 컴포넌트와 useState  (1) 2022.12.28
클래스형 컴포넌트와 state  (0) 2022.12.28
컴포넌트와 Props  (0) 2022.12.27
  1. 🙄 엘리먼트는 뭔데요
  2. 🙄root DOM 노드
'react' 카테고리의 다른 글
  • React 프로젝트 시작 전 환경 세팅하기
  • 함수형과 클래스형 컴포넌트의 차이를 자세히 설명해주세요
  • 함수 컴포넌트와 useState
  • 클래스형 컴포넌트와 state
냠냠맨
냠냠맨
프론트엔드 개발 전반을 다루는 기술 블로그입니다.
냠냠맨
React와 TypeScript를 좋아하는 개발자
냠냠맨
전체
오늘
어제
  • all category (433)
    • CMC (0)
    • best (11)
    • 년간회고 (1)
    • cheetsheet (15)
    • 프로젝트 회고 (3)
    • 서평 (3)
    • SEO Study (1)
    • 프로젝트 진행기 (10)
    • testcode (9)
    • yarnberry (7)
    • css (21)
    • typescript (15)
    • redux (7)
    • react (43)
    • Next.js (9)
    • Nestjs (3)
    • javascript (44)
    • programmers (67)
    • leetcode (41)
    • frontend (41)
    • backjoon (1)
    • Next.js Beta Docs 번역 (12)
    • TIL (15)
      • html (3)
    • Network (12)
      • 간단 정리 시리즈 (2)
      • 질답 준비 (0)
    • 자료구조와 알고리즘 (2)
    • CS (4)
      • OS (1)
    • 취업준비 (2)
    • zoom websocket (2)
    • talk (6)
    • 면접대비 (1)
    • 코드스테이츠 프론트 (5)
    • 간헐적 회고 (17)

블로그 메뉴

  • leetcode
  • programmers
  • javascript
  • html
  • css

공지사항

인기 글

태그

  • 테오의스프린트
  • CSS
  • 말풍선
  • 개발
  • 개발자
  • border말풍선
  • LeetCode
  • 테오의스프린트17기
  • JavaScript
  • frontend
  • 코드스테이츠 #프론트엔드
  • 주니어개발자
  • teosprint
  • 프론트엔드

최근 댓글

최근 글

hELLO · Designed By 정상우.
냠냠맨
리액트 엘리먼트 렌더링이란?
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.