[개발 공부 70일차] DOM과 React의 작동 원리, 가비지 컬렉터

< 목차 >
1. 엘리먼트(Element)와 노드(Node)의 차이점
2. DOM(Document Object Model) 요소와 React의 작동 원리
2-1) DOM(Document Object Model)
2-2) React의 작동 원리
3. 가비지 컬렉터(Garbage Collector)
4. 금일 소감

 

1. 엘리먼트(Element)와 노드(Node)의 차이점

엘리먼트와 노드는 웹 개발에서 중요한 개념이며, 둘은 HTML 문서의 구조와 콘텐츠를 정의하고 설명하는 데 중요한 역할을 한다. 그러나 이 둘은 서로 다른 의미를 가지고 있다.

 

 

TL;DR

• 노드(Node): HTML 문서의 기본 단위로, 엘리먼트 노드, 텍스트 노드, *어트리뷰트 노드 등 다양한 종류가 포함됨
• 엘리먼트(Element): HTML 태그로 정의된 문서의 구성 요소로, '노드의 한 종류'! 엘리먼트는 다른 노드(텍스트, 속성 등)를 포함함

 

예시로 보는 차이점

<div id="container">Hello, <span>world</span>!</div>

 

이 HTML 구조에서

1. 엘리먼트: <div>, <span>
2. 노드
   • 엘리먼트 노드: <div>, <span>
   • 텍스트 노드: Hello, , world, !
   • *어트리뷰트 노드: id="container"

 

 

*어트리뷰트(Attribute)?

: HTML 요소에 추가적인 정보를 제공하는 속성

 

어트리뷰트는 태그 내부에 작성되며, 요소의 동작이나 외형을 정의하거나 수정하는 데 사용된다. HTML 요소의 태그 이름 뒤에 위치하며, 속성명과 속성값으로 구성된다. 속성값은 큰따옴표(")로 감싸야 한다. 여러 어트리뷰트를 사용할 때는 공백으로 구분한다. HTML 요소는 여러 개의 어트리뷰트를 가질 수 있으며, 일반적으로 이름-값(name-value) 쌍으로 표현된다.

 

 

종류

1. 기본 어트리뷰트

• id: 요소의 고유 식별자를 지정
• class: 요소에 하나 이상의 클래스 이름을 지정하여 CSS 스타일을 적용하거나 JavaScript로 조작할 수 있게 함
• style: 인라인 CSS 스타일을 적용
• title: 요소에 대한 추가 정보를 제공하며, 마우스를 올려놓으면 툴팁(Tooltip, 클릭 또는 마우스를 특정 구성 요소에 가져갔을 때(hover) 상황에 맞는 도움말이나 정보를 표시)으로 표시됨

 

2. 링크와 미디어 어트리뷰트

• href: 앵커(a) 태그에서 링크의 URL 지정
• src: 이미지(img) 태그에서 이미지 파일의 경로 지정
• alt: 이미지가 로드되지 않을 때 표시할 대체 텍스트 지정

 

3. 폼 관련 어트리뷰트

• type: 입력 요소(input)의 타입 지정
• placeholder: 입력 필드에 기본으로 표시할 힌트 텍스트 지정
• value: 입력 요소의 초기값 지정

 

 

[Reference]

1. [MDN Web Docs] HTML attributes - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
2. [W3Schools] HTML Attributes - https://www.w3schools.com/html/html_attributes.asp
3. [FreeCodeCamp] An Introduction to HTML for Beginners - https://www.freecodecamp.org/news/introduction-to-html

 

 

노드(Node)

: DOM(문서) 트리의 기본 단위

HTML 문서의 각 부분을 나타내며, 여러 종류의 노드가 있다.

 

노드의 종류

1. 엘리먼트 노드 (Element Node): HTML 태그로 정의된 요소들 (<div>, <p>, <a> 등)
2. 텍스트 노드 (Text Node): 요소의 텍스트 콘텐츠
3. 어트리뷰트 노드 (Attribute Node): 요소의 속성 (class, id, style 등)
4. 주석 노드 (Comment Node): HTML 주석 (<!-- comment -->)

 

예시

<div id="example">Hello, World!</div>

 

위 HTML 구조는 다음과 같은 노드로 구성된다.

• 엘리먼트 노드: <div>
• 텍스트 노드: Hello, World!
• 어트리뷰트 노드: id="example"

 

엘리먼트(Element)

: HTML 문서의 구성 요소

엘리먼트는 태그를 사용하여 문서의 구조와 콘텐츠를 정의한다. 엘리먼트 노드는 HTML 태그로 정의된 요소로, '노드의 한 종류'다.

 

엘리먼트의 속성

• 태그 이름 (Tag Name): 엘리먼트를 정의하는 HTML 태그 이름 (div, p, a 등)
• 속성 (Attributes): 엘리먼트의 추가 정보를 제공 (class, id, style 등)
• 자식 노드 (Child Nodes): 엘리먼트 내부에 포함된 다른 노드들 (텍스트 노드, 다른 엘리먼트 노드 등)

 

예시

<a href="https://www.example.com" class="link">Visit Example</a>

 

 

위 HTML 엘리먼트는 다음과 같은 속성을 가진다.

• 태그 이름: a
• 속성: href="https://www.example.com", class="link"
• 자식 노드: (텍스트 노드) Visit Example

 

 

2. DOM(Document Object Model) 요소와 React의 작동 원리

 

React와 DOM 요소의 관계

React는 DOM 요소를 효율적으로 관리하기 위해 다음과 같은 방법을 사용한다.

1. 컴포넌트 기반 구조: UI를 작은, 재사용 가능한 컴포넌트로 분리하여 관리
2. 가상 DOM: 상태 변화 시 전체 UI를 가상 DOM에 렌더링하고, 실제 DOM과 비교하여 최소한의 변경만 적용
3. 상태 관리: 컴포넌트의 상태 변화를 감지하고, 해당 변화를 기반으로 UI를 업데이트

이러한 방식을 통해 React는 DOM 조작을 최적화하고, 빠르고 효율적인 사용자 인터페이스를 제공할 수 있다.

 

 

2-1) DOM(Document Object Model)

: HTML, XML 문서의 구조화된 표현을 제공하며, 문서 내의 콘텐츠와 구조를 변경하거나 접근할 수 있게 해주는 인터페이스

 

DOM 요소는 문서의 개별 구성 요소를 나타내며, 각 요소는 노드 트리의 한 부분을 구성한다. React는 이 DOM을 효율적으로 관리하고 업데이트하기 위해 여러 기술을 사용한다.

 

 

이제 DOM 요소의 개념과 React의 작동 원리를 연결하여 봐보자.

 

DOM 요소

• 정의: DOM 요소는 HTML 문서 내의 태그들을 나타내며, 각 요소는 노드로 표현된다.
• 구성: DOM 요소는 태그 이름, 속성, 자식 노드 등으로 구성된다.
• 역할: 웹 페이지의 구조와 콘텐츠를 정의하며, JavaScript를 통해 동적으로 조작될 수 있다.

 

예시

<div id="container">
  <p>Hello, <span>world</span>!</p>
</div>

 

이 HTML 구조는 다음과 같은 DOM 요소로 구성된다.

• <div id="container">
  • <p>
    • 텍스트 노드: Hello, 
    • <span>
      • 텍스트 노드: world

 

 

2-2) React의 작동 원리

: UI를 구성하는 데 사용하는 JavaScript 라이브러리

React는 DOM과의 상호작용을 효율적으로 처리하기 위해 가상 DOM(Virtual DOM) 개념을 도입한다.

 

 

(1) 가상 DOM(Virtual DOM)

 

1. 정의: 실제 DOM의 가벼운 사본으로, 메모리 내에 존재함
2. 역할: 실제 DOM 조작은 비용이 많이 드는 작업이다. 실제 DOM 요소의 변경은 브라우저의 레이아웃 재계산과 리플로우, 리페인트 과정을 유발하기 때문이다. 상태 변화가 발생할 때마다 전체 UI를 가상 DOM에 렌더링하고, 실제 DOM과 비교하여 최소한의 변경 사항만 실제 DOM에 반영함 (Batch Update)
3. 장점: 업데이트 성능이 향상되고, 불필요한 DOM 조작을 줄여 효율적인 렌더링이 가능함

 

 

가상 DOM을 사용 이유와 장점 정리

 

이유

• 성능 최적화: 실제 DOM 조작은 비용이 많이 들고 느리기 때문에, 가상 DOM을 사용하여 최소한의 변경만 실제 DOM에 반영함
• 효율적인 업데이트: 가상 DOM에서 변경 사항을 한 번에 모아서 실제 DOM에 적용함으로써, 불필요한 리렌더링을 방지함

 

장점

1. 빠른 렌더링: 변경 사항을 가상 DOM에서 먼저 처리하여 빠른 렌더링을 제공함
2. 배치 업데이트: 여러 변경 사항을 한 번에 처리하여, 실제 DOM 업데이트 횟수를 줄임
3. 간결한 코드 유지: 복잡한 DOM 조작을 추상화하여 개발자가 더 간결한 코드를 작성할 수 있게 함
4. 크로스 브라우저 호환성: 다양한 브라우저에서 일관된 성능을 보장함

 

 

(2) React의 작동 흐름

1. 초기 렌더링
   1. React 컴포넌트는 초기 상태를 기반으로 가상 DOM을 생성함
   2. 가상 DOM은 실제 DOM으로 변환되어 브라우저에 렌더링됨
2. 상태 변화
   1. 상태(state)나 속성(props)에 변화가 발생하면, React는 해당 컴포넌트를 다시 렌더링함
   2. 새로운 가상 DOM 트리가 생성되고, 이전 가상 DOM과 비교(diffing)됨
3. DOM 업데이트
   1. 비교 결과를 기반으로 변경된 부분만 실제 DOM에 반영함
   2. 이 과정은 Reconciliation(= React에서 가상 DOM(Virtual DOM)과 실제 DOM(Real DOM)을 동기화하는 과정)이라고 부름

 

 

예시

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

 

1. 초기 렌더링
   1. Counter 컴포넌트가 처음 렌더링될 때, count는 0으로 초기화됨
   2. 가상 DOM에 <div>, <p>, <button> 요소들이 생성되고, 실제 DOM에 반영됨
2. 상태 변화
   1. Increment 버튼을 클릭하면 count가 1 증가함
   2. 상태 변화로 인해 Counter 컴포넌트가 다시 렌더링되고, 새로운 가상 DOM이 생성됨
3. DOM 업데이트
   1. 새로운 가상 DOM과 이전 가상 DOM이 비교됨
   2. 변경된 부분(텍스트 노드 Count: 1)만 실제 DOM에 업데이트됨

 

[Reference]

1. [F-Lab] 리액트의 가상 DOM 이해하기 - https://f-lab.kr/insight/understanding-react-virtual-dom
2. [F-Lab] 리액트의 가상 돔과 리렌더링 최적화 전략 - https://f-lab.kr/insight/react-virtual-dom-and-re-rendering-optimization
3. [FreeCodeCamp] What is the DOM? The Document Object Model Explained in Plain English - https://www.freecodecamp.org/news/what-is-the-dom-explained-in-plain-english
4. [MDN Web Docs] - Introduction to the DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
5. [Blog] JavaScript Node Vs Element - https://blog.webdevsimplified.com/2021-05/node-vs-element
6. [FreeCodeCamp] The JavaScript DOM Manipulation Handbook - https://www.freecodecamp.org/news/the-javascript-dom-manipulation-handbook
7. [W3Schools] JavaScript HTML DOM Elements (Nodes) - https://www.w3schools.com/js/js_htmldom_nodes.asp
8. [W3Schools] What is the HTML DOM? - https://www.w3schools.com/whatis/whatis_htmldom.asp

 

 

3. 가비지 컬렉터(Garbage Collector)

 

: 프로그래밍 언어에서 더 이상 사용되지 않는 메모리 공간을 자동으로 회수하는 시스템

가비지 컬렉터를 통해 개발자는 메모리 관리에 신경 쓰지 않고 프로그램을 작성할 수 있다. 가비지 컬렉터의 작동 방식과 목적을 알아보자.

 

 

TL;DR

• 가비지 컬렉터: 프로그래밍 언어에서 더 이상 사용되지 않는 메모리 공간을 자동으로 회수하는 시스템
• 메모리 누수를 방지하고 프로그램의 성능을 유지하는 데 중요한 역할
• 다양한 가비지 컬렉션 기법이 있으며, 각 기법은 장단점을 가지고 있어 특정 상황에 맞는 방법을 선택하여 사용한다. 이를 통해 개발자는 메모리 관리에 신경 쓰지 않고 더 생산적으로 코딩할 수 있다.

 

왜 가비지 컬렉터가 필요한가?

프로그램이 실행되면서, 변수와 객체를 생성하면 메모리를 사용하게 된다. 사용이 끝난 변수와 객체를 메모리에서 제거하지 않으면 메모리 누수가 발생하여 시스템 성능이 저하될 수 있다. 가비지 컬렉터는 이러한 메모리 누수를 방지하기 위해, 더 이상 사용되지 않는 메모리 공간을 자동으로 회수한다.

 

 

 

가비지 컬렉터의 작동 원리

가비지 컬렉터는 다음과 같은 과정을 통해 메모리를 관리한다.

1. 할당: 프로그램이 변수를 생성하거나 객체를 만들 때 메모리를 할당
2. 사용: 할당된 메모리는 프로그램이 변수나 객체를 사용할 때 점유
3. 회수: 더 이상 사용되지 않는 메모리를 회수하여 재사용할 수 있도록 함

 

주요 가비지 컬렉션 기법

1. 참조 계산(Reference Counting)

• 작동 방식: 각 객체가 참조된 횟수를 카운트함. 참조 카운트가 0이 되면 객체는 더 이상 사용되지 않는다고 판단하여 메모리를 회수함
• 장점: 단순하고 구현이 쉬움
• 단점: 순환 참조 문제를 해결하지 못함. 예를 들어, 두 객체가 서로를 참조하면 참조 카운트가 0이 되지 않아 메모리가 회수되지 않음

 

2. 마크 앤 스위프(Mark and Sweep)

• 작동 방식: 모든 객체를 대상으로 검사하여, 도달할 수 있는 객체(사용 중인 객체)를 마크함. 마크되지 않은 객체는 회수함
• 단점: 모든 객체를 검사하기 때문에 시간이 오래 걸릴 수 있음. 또한, 메모리 단편화가 발생할 수 있음

 

3. 복사(Copying)

• 작동 방식: 메모리를 두 개의 영역으로 나누고, 사용 중인 객체를 한 영역에서 다른 영역으로 복사함. 복사되지 않은 객체는 회수됨
• 장점: 메모리 단편화를 방지하고, 복사하는 과정에서 객체를 효율적으로 정리함
• 단점: 사용 가능한 메모리의 절반만 사용할 수 있다는 단점이 있음

 

4. 세대별 가비지 컬렉션(Generational Garbage Collection)

• 작동 방식: 객체를 생성된 시기에 따라 세대별로 분류함. 젊은 세대(Young Generation)는 자주 회수하고, 오래된 세대(Old Generation)는 덜 자주 회수함
• 장점: 객체의 생존 기간이 짧다는 일반적인 프로그래밍 특성을 이용하여 효율적으로 메모리를 관리함. 대부분의 객체는 짧은 시간 내에 사용되지 않기 때문에, 젊은 세대에서 빈번하게 가비지 컬렉션을 수행함으로써 효율성을 높임

 

 

자바스크립트의 가비지 컬렉션 기법

: 주로 마크 앤 스위프(Mark and Sweep) 기법 사용

 

 

마크 앤 스위프(Mark and Sweep) 기법의 메모리 관리 과정

1. 루트(Root) 객체 설정: 루트 객체는 전역 객체(window 또는 global)와 같이 항상 접근 가능한 객체
2. 마크 단계(Mark Phase): 가비지 컬렉터는 루트 객체에서 시작하여, 도달 가능한 모든 객체를 마크함. 즉, 참조 체인을 따라가며 접근할 수 있는 모든 객체를 표시함
3. 스위프 단계(Sweep Phase): 마크되지 않은 객체는 더 이상 접근할 수 없는 것으로 간주되어 메모리에서 회수됨. 이로써 불필요한 메모리 사용 방지

 

 

[Reference]

1. [Wikipedia] Garbage collection (computer science) - https://en.wikipedia.org/wiki/Garbage_collection_%28computer_science%29
2. [FreeCodeCamp] Garbage Collection in Java – What is GC and How it Works in the JVM - https://www.freecodecamp.org/news/garbage-collection-in-java-what-is-gc-and-how-it-works-in-the-jvm
3. [FreeCodeCamp] A Guide to Garbage Collection in Programming - https://www.freecodecamp.org/news/a-guide-to-garbage-collection-in-programming
4. [Microsoft Learn] Fundamentals of garbage collection - https://learn.microsoft.com/en-us/dotnet/standard/garbage-collection/fundamentals

 

 

4. 금일 소감

전에 튜터님께서 DOM 요소를 공부하면 React의 작동 원리에 대해 알 수 있다고 말씀하신 게 떠올라서 React 작동 원리와 DOM을 엮어서 알아보았다. 뭔가를 알아가다 보면 새로운 개념을 알아야 이해 가능하거나 어떤 개념으로 파생되는 경우가 많아서 공부하다 정확히 모르겠는 개념은 함께 공부했다.

 

생각해 보니 가비지 컬렉터는 한 번도 알아본 적이 없는 것 같아서 정리해봤는데 생각보다 여러 기법이 있어 흥미롭고, 재미있었다. 새로운 개념은 약간 놀랍거나 다소 충격적인 의미거나 하는 기억에 남을 만한 감정이 느껴지지 않으면 보통 여러 번 봐야 더 잘 이해되고 자연스레 외워지는 듯하다. 그러니 여러 번 봐야지 오늘 공부한 내용도.. ㅋㅋㅋㅋㅋㅋ

 

그래도 공부할 게 많아서 더 재밌는 것 같다. 좀 공부하다 보면 더 이상 팔 게 없을 때, 진짜 재미없다고 느끼는 편인데 개발은 공부해도 끝없이 공부할 게 있어서 흥미롭다. 다음 포스트는 React 스터디 내용 정리해야겠다.