React

[02] 리액트 동작 원리

BGK97 2024. 4. 10. 23:38

02-1 가상 DOM 이해하기

리액트 프레임워크를 구성하는 기본 3요소

  • 가상 DOM
  • JSX 구문
  • 컴포넌트

가상 DOM

  • 해당 명령어를 입력하여 새 Project 생성

  • 04행의 App은 리액트 프레임워크에서 컴포넌트라고 불림
  • 07~14행은 리액트의 핵심기능을 모두 보여줌
  • 11행의 React.StrictMode 는 코드가 잘못된 것인지 판단하여 오류메세지를 보여주는 컴포넌트
  • 17버전과 다르게, 서버쪽의 렌더링 기능이 향상되었음

React와 React-DOM 패키지

  • 리액트 프로젝트는 항상 React와 React-DOM 패키지가 필요
  • React는 리액트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공하는 패키지
  • React-DOM, 렌더러라고 불리는 패키지는 앱이 동작하는 환경에 종속적인 기능을 제공하는데 특화된 패키지임

  • 리액트는 공통으로 들어가고, CSR방식, SSR방식, 모바일 등에 따라 사용하는 React-DOM이 다름
  • 이 가운데 가상 DOM이라는 메커니즘이 자리를 잡고 있음

XML 마크업 언어

  • 마크업언어란, 컴퓨터도 그 의미를 쉽게 파악할 수 있는 텍스트를 의미
  • 예시로 HTML이 있다.
  • 웹 분야에서 문서는, 마크업 언어로 작성한 텍스트가 담긴 파일 또는 인터넷 망을 통해 전송되는 스트림을 의미
  • XML 형식으로 작성되면 XML 마크업, HTML 형식으로 작성되면 HTML 마크업
  • 이 두개의 형식을 따르지 않는 파일 또는 스트림은 문서라고 칭하지 않음

XML 및 HTML의 요소

  • html, head, meta, body, div 등...
  • 웹 브라우저는 HTML 문서의 여러 요소들을 트리구조로 파악(계단 구조)
  • 요소 기준으로 자신의 아래에 있으면 자식 요소, 위에 있으면 부모 요소라고 함

문서 객체 모델

  • 웹 브라우저가 HTML 형식의 문자열을 화면에 나타내려면, 문자열 분석 후 JS 객체로 변환해야 함
  • 이 때 JS 객체는 자신의 특징에 맞는 인터페이스를 구현, 이를 문서 객체 모델이라 부름
  • 웹 브라우저의 자바스크립트 엔진은 window라는 이름의 전역 변수를 기본 제공
  • window는 특정 웹 페이지를 의미
  • 브라우저 객체 모델, BOM

document 객체

  • 웹 페이지가 HTML문서를 화면에 출력시, window객체는 document라는 속성 객체로 HTML을 사용할 수 있도록 함
  • window.document === html 요소
  1. document.head, document.body (객체)
    • html 요소는 head와 body태그를 1개씩만 가질 수 있음
    • 이런 조건에 맞추어 각각에 맞는 속성 객체를 제공
  2. document.createElement (메서드)
    • 대부분의 프로그래밍 언어에서, 인터페이스는 객체가 제공해야할 여러 기능을 구체적으로 정의한 규약임
    • 이 때 웹 브라우저는 DOM의 다양한 인터페이스를 각각의 목적에 맞게 구현한 객체로 생성하게 document.createElement 메서드를 제공HTMLElement 인터페이스
  • 일부 요소는 HTML을 상속한 자신들의 인터페이스를 구현
  • 이때, 가운데에 들어가 있는 것이 그 객체의 타입임(ex : HTMLInputElement => input)

HTMLElement의 부모 요소 상속 구조

  • EventTarget => Node => Element => HTMLElement
  • Node 타입의 appendChild는 마지막에 자식요소를 하나 추가하는 것인데, 코드 사용시 화면에 출력이 됨
  • 예시 document.body.appendChild(...)

물리 DOM 객체 사용

  • index.tsx에서,

  • 해당 코드를 작성 한후 npm start를 실행, 개발자 모드에서 Elements 탭을 가보면

  • 이와 같이 아까 추가했던 p 태그형식의 pPhysical이 body 태그 아래 있는 것을 확인
  • 이는 리액트를 사용하지 않고 사용한 방법임

리액트를 사용한 가상 DOM 객체 사용

  • 동일하게 createElement라는 함수를 사용
  • React.createElement('p', null, 'Helloworld')를 입력하면 p태그의 선택매개변수 없이, 그 뒤에 값이 입력이 된다는 뜻

  • 해당 코드 작성 시, 화면에 표시되기는 하나, Element에는 보이지 않는다. (body태그 밑 자식으로 추가 안해서 그런가봄)

root.render 메서드

  • 물리 DOM 객체에서는 자식으로 직접 추가하여 트리에 추가가 된 상태이기 때문에 Elements 탭에 표시가 되지만 가상 DOM을 사용한 것은 트리에 추가되지 않은 상태이다.
  • 그러나, appendChild는 가상 DOM을 이해할 수 없다. 따라서 나타내려면 root.render 함수를 통해 가상 DOM을 물리DOM으로 전환해주는 기능을 한다. (이전에 화면에 표기된 것 처럼 render를 통해 ...)
  • root.render 메서드는 변환한 가상 DOM을 부착할 물리 DOM 객체가 필요함
  • 참고! : Element 인터페이스는 문자열 타입의 id속성을 제공하는데, 이 때 속성값이 root인 div요소가 ReactDOM.createRoot가 필요로 하는 역할을 수행한다.

document.getElementById 메서드

  • 이 메서드는 이미 생성된 특정 물리 DOM 객체를 찾아주는 역할
  • 메서드를 사용하면, 해당 속성값을 가진 DOM 객체를 찾아줌

  • div id = 'root' 태그에서 가상 DOM이 메서드에 의해 물리 DOM으로 변경

  • React.createElement 함수로 다양한 HTML요소를 가상 DOM 트리 구조로 구현하고, render 메서드가 호출되는 순간 가상 트리를 물리 트리로 변환해줌