언어 및 도구들 공부/React

리엑트에서의 DOM 구조

Dr.Mlem 2024. 11. 17. 02:55

Q1.

dom 구조가 뭐지?

 

 

 

A1.

DOM(Document Object Model)은 웹 문서(HTML 또는 XML)를 구조화하여 브라우저와 프로그래밍 언어가 문서의 내용을 쉽게 다룰 수 있도록 하는 트리 형태의 구조를 말합니다. DOM은 문서를 프로그래밍적으로 접근, 수정, 삭제하거나 새로운 요소를 추가할 수 있도록 해줍니다.

DOM의 기본 구조

DOM은 문서의 각 요소를 **노드(Node)**로 표현합니다. HTML 문서를 예로 들어 볼까요?

HTML 예제

<!DOCTYPE html>
<html>
  <head>
    <title>Document Example</title>
  </head>
  <body>
    <h1>Hello, DOM!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

 

위 HTML 문서의 DOM 구조는 트리 형태로 나타납니다:

- Document (최상위 루트 노드)
  - html (HTML 요소)
    - head (HEAD 요소)
      - title (TITLE 요소)
        - "Document Example" (텍스트 노드)
    - body (BODY 요소)
      - h1 (H1 요소)
        - "Hello, DOM!" (텍스트 노드)
      - p (P 요소)
        - "This is a paragraph." (텍스트 노드)

 

DOM의 주요 구성 요소

  1. 노드(Node):
    • DOM의 기본 단위입니다.
    • HTML 문서의 각 요소, 속성, 텍스트 등을 노드로 표현합니다.
    • 노드 유형:
      • 요소 노드(Element Node): HTML 태그를 나타냄 (<html>, <body> 등)
      • 텍스트 노드(Text Node): 요소 안의 텍스트를 나타냄 ("Hello, DOM!")
      • 속성 노드(Attribute Node): 요소의 속성을 나타냄 (id="example" 등)
      • 문서 노드(Document Node): 문서 자체를 나타냄.
  2. 루트 노드(Root Node):
    • 문서의 최상위 노드로 Document 객체를 나타냅니다.
  3. 부모/자식 관계:
    • DOM은 계층적 구조를 가지며, 노드 간에는 **부모(Parent)**와 자식(Child) 관계가 존재합니다.
    • 예를 들어, <body>는 <h1>과 <p>의 부모이고, <h1>과 <p>는 <body>의 자식입니다.

DOM 조작

DOM을 사용하면 자바스크립트로 HTML 문서를 동적으로 조작할 수 있습니다. 예를 들어:

1. DOM 선택

// 요소 선택
const heading = document.querySelector('h1');

 

2. 속성 변경

heading.textContent = 'Hello, World!';

 

3. 요소 추가

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

4. 요소 삭제

const paragraph = document.querySelector('p');
document.body.removeChild(paragraph);

 

요약

DOM은 브라우저와 스크립트 언어(주로 JavaScript)가 HTML 및 XML 문서를 다룰 수 있도록 하는 인터페이스입니다. 문서를 트리 구조로 나타내며, 이를 통해 HTML 문서를 동적으로 수정하거나 인터랙션을 추가할 수 있습니다.

 

 

 

Q2.

되게 단순하게 생각해서, html안에 들어간 js의 dom 이라는 구조는, document 객체에 딸린 구조라고 생각하면 될까?

 

 

 

A2.

네, 아주 정확한 이해입니다!

HTML 안에 작성된 JavaScript에서 다루는 DOM은 기본적으로 document 객체에서 시작합니다. document 객체는 브라우저가 HTML 문서를 읽고 분석하여 생성한 DOM 트리의 최상위 루트를 나타냅니다.

간단하게 설명하면:

  • document 객체는 브라우저가 제공하는 HTML 문서의 진입점입니다.
  • 이 객체를 통해 HTML 문서 안의 요소(노드들)를 프로그래밍적으로 접근하고 수정할 수 있습니다.

간단한 구조를 예로 들어보면:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1 id="main-heading">Hello!</h1>
    <p>Welcome to DOM.</p>
  </body>
</html>

 

여기서 JavaScript로 DOM에 접근하려면, **document**에서 출발합니다:

// HTML 문서의 루트(html 태그)
console.log(document.documentElement); 

// body 태그
console.log(document.body); 

// 특정 요소에 접근
const heading = document.getElementById('main-heading');
console.log(heading.textContent); // "Hello!"

 

요약하자면:

  • DOM은 document 객체를 통해 접근할 수 있습니다.
  • HTML 문서를 구조적으로 탐색하거나 수정하는 작업은 모두 이 **document**를 시작점으로 이루어집니다.

**즉, "DOM은 document 객체가 제공하는 트리 구조다"**라고 간단히 생각해도 괜찮습니다! 😊

 

 

 

Q3.

리엑트에서의 dom 구조도, html페이지를 만들어내기 위해서 쓰인 jsx로 구성된 document 구조라고 생각하면 되는걸까?

 

 

 

A3.

리액트에서의 DOM 구조와 일반 HTML DOM 구조는 비슷한 부분도 있지만, 중요한 차이점이 있습니다. 리액트를 사용하면 **JSX를 통해 가상 DOM(Virtual DOM)**을 먼저 구성하고, 이를 기반으로 실제 DOM을 업데이트하는 방식으로 동작합니다.

리액트에서의 DOM 구조

  1. JSX: 리액트 컴포넌트를 작성할 때 사용되는 JavaScript 확장 문법입니다. JSX는 브라우저가 이해하는 HTML이 아니라, JavaScript 객체로 변환됩니다. 이 객체는 리액트의 **가상 DOM(Virtual DOM)**의 일부를 구성합니다.
  2. Virtual DOM:
    • JSX로 작성된 구조는 브라우저의 실제 DOM이 아니라, 메모리 내의 가상 DOM에 먼저 그려집니다.
    • 가상 DOM은 React가 변경 사항을 효율적으로 계산하고, 실제 DOM에 반영할 최소한의 업데이트만 수행하도록 돕는 역할을 합니다.
  3. Document 구조:
    • 리액트가 실제 DOM과 연결되는 진입점은 보통 public/index.html에 있는 **<div id="root"></div>**입니다.
    • 리액트는 이 루트 노드에 컴포넌트에서 생성된 DOM 구조를 삽입하거나 갱신합니다.

리액트의 DOM 과정 요약

JSX는 직접 HTML 문서를 구성하는 것이 아니라, 다음 단계를 거칩니다:

  1. JSX 작성: 
    const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is rendered using React.</p>
  </div>
);
  2. Virtual DOM에 반영:
    • 위 코드가 JavaScript 객체로 변환됩니다.
    • React는 이 객체를 가상 DOM에 저장하고 관리합니다.
  3. 실제 DOM에 렌더링:
    • ReactDOM 라이브러리가 document.getElementById('root')를 호출해, 가상 DOM을 실제 DOM에 삽입합니다: 
      import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
  4. 변경 사항 반영:
    • 컴포넌트가 업데이트될 때, React는 **가상 DOM에서 변경된 부분만 비교(diffing)**하고, 필요한 최소한의 DOM 조작만 수행해 성능을 최적화합니다.

그래서 질문에 대한 답변:

"리액트에서의 DOM 구조도, HTML 페이지를 만들어내기 위해 쓰인 JSX로 구성된 document 구조라고 생각하면 되는가?"

  • 부분적으로 맞습니다!
    • JSX는 HTML처럼 보이지만, 실제로는 JavaScript 객체로 변환되어 가상 DOM을 구성합니다.
    • 리액트는 이 가상 DOM을 통해 브라우저의 실제 DOM을 업데이트합니다.

그러므로, 리액트의 DOM 구조를:

  1. JSX 기반의 Virtual DOM 트리
  2. 이를 통해 document 객체를 조작하여 실제 DOM을 구성하는 방식 으로 이해하면 적절합니다! 😊

 

'언어 및 도구들 공부 > React' 카테고리의 다른 글

JS 화살표 함수 복습 및 React 사전 공부  (2) 2024.11.17
클래스 인스턴스, 클래스 컴포넌트  (1) 2024.11.17
화살표 함수, 익명함수, this 바인딩 차이  (0) 2024.11.17
리엑트와 JS  (0) 2024.11.16
NPM, yarn  (0) 2024.11.16

'언어 및 도구들 공부/React'의 다른글

  • 현재글리엑트에서의 DOM 구조

관련글

티스토리툴바