[리액트] 컴포넌트 라이프사이클, DOM 정리 ✨

참고자료: 컴포넌트 라이프 사이클, DOM

DOM은 정확히 무엇일까? | WIT블로그

최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 What, exactly, is the DOM? 문서를 번역해 보았습니다.

wit.nts-corp.com

[React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서

컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가

koras02.tistory.com

⭐️ 컴포넌트 라이프사이클

- 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트
- 리액트 컴포넌트는 라이프사이클을 갖는다
- 크게 세가지 카테고리로 나뉘며 개괄적인 그림은 다음과 같음

📚 컴포넌트 라이프 사이클 메서드 알아보기

✨ 1. Mounting

- 컴포넌트의 인스턴스가 생성 돼 DOM 상에 삽입되는 단계
- 마운팅은 라이프사이클이 종료될 때까지 한 번만 일어남
- 아래 메서드들은 이 단계에서 순서대로 호출

✅ 메서드 단계
- constructor : 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드 호출
- render: 화면에 표시될 JSX 반환하고 화면에 그림
- componentDidMount: 컴포넌트가 화면에 모두 그려진 이루 호출됨

📚 componentDidMount란 ❓
- componentDidMount 메서드는 첫 렌더링 이후 실행
- 엔드포인트에서 클라이언트로 데이터를 불러야 하는 경우 API 호출을 하기 위한 좋은 위치
- 데이터를 받아올 때 setState메서드를 이용해 컴포넌트를 업데이트 할 수 있음

✨2. Updating

- props 또는 state가 변경 돼 컴포넌트가 업데이트되는 단계
- 아래와 같이 순서대로 호출

✅ 메서드 단계
- static GetDerivedStateFromProps
- shouldComponentUpdate
- render: 데이터가 변경되면 자동으로 호출
- getSnapshotBeforeUpdate
- componentDidUpdate: 화면이 다시 그려진 후 호출

✨3. Unmounting

- 컴포넌트가 DOM 상에서 제거되는 단계

✅ 단계
- compnentWillUnmount : 컴포넌트가 화면에서 제거되기 전에 호출

⭐️ 여기서 DOM이란❓

- 웹 브라우저가 원본 HTML 문서를 읽은 후, 스타이을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지 과정을 "Critical Rendering Path"
- 웹 페이지에 대한 인터페이스
- 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API 제공

✅ 크게 두가지 단계

1. 브라우저에서 받아들인 문서를 파싱하여 최종으로 어떤 내용을 페이지에 렌더링할 지 결정
- 이 과정에서 렌더 트리 생성
- 웹 페이지에 표시될 HTML 요소들과 관련된 스타일 요소 구성
- 브라우저는 렌더트리를 생성하기 위해 다음과 같은 두 모델이 필요함
- DOM(Document Object Model) - HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Object Model) - 요소들과 연관된 스타일 정보의 구조화된 표현

2. 렌더링 수행

📚 어떻게 생성될까? ( 어떻게 보여질까?)

- DOM은 원본 HTML 문서의 객체 기반 표현 방식
- HTML과 DOM의 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있음
- DOM의 개체 구조는 "노드 트리"로 표현
- 하나의 부모 줄기가 여러 개의 자식 나뭇가지로 갖고 있고, 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조라서
- 루트 요소인 <html>은 "부모 줄기", 루트요소에 내포된 태그들은 "자식 나뭇가지", 요소 안의 컨텐츠는 "잎"

📚 DOM이 아닌 것

- DOM은 마치 HTML 문서와 1 대 1 매핑이 되는 것처럼 보이지만, 차이점이 있음

✅ 1. DOM은 HTML이 아니다
- DOM은 HTML 문서로 부터 생성되지만 동일하진 않음
- DOM이 원본 HTML 소스와 다를 수 있는 두가지 케이스가 있음

📌 작성된 HTML 문서가 유효하지 않을 때
- DOM은 유효한 HTML 문서의 인터페이스
- DOM이 생성되는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정함

<html>
Hello, world!
</html>

문서에 유효한 HTML 규칙의 필수 사항인 <head>와 <body>요소가 빠짐
- 하지만 생성된 DOM 트리에서 교정함

📌 자바스크립트에 의해 DOM이 수정될 때
- DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있음

✅ 2. DOM은 브라우저에 보이는 것이 아님
- 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합
- 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과는 다름
- 달리 말하면, 렌더링되는 요소만이 관련있기 때문에 시각적으로 보이지 않는 요소는 제외

<p style="display: none;">How are you?</p>

-💡 ) display: none 스타일 속성이 있을 때, DOM은 <p> 요소를 포함 시키지만, 렌더 트리에 해당하는 뷰 포트에 <p> 요소를 포함하지 않음

✅ 3. DOM은 개발도구에서 보이는 것이 아님
- 개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공
- 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함
- 💡 ) CSS 가상 요소 : ::before과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성
- 하지만, 기술적으로 DOM의 일부가 아님. DOM은 오직 원본 HTML 문서로부터 빌드되고, 요소에 적용되는 스타일을 포함하지 않음

📚 요약 정리

- DOM은 HTML 문서에 대한 인터페이스
- 첫째로 뷰 포트( 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역)에 무엇을 렌더링할지 결정하기 위해 사용
- 둘째로 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용

✅ DOM은 원본 HTML 문서 형태와 비슷하지만 차이점이 있음
- 항상 유효한 HTML 형식
- 자바스크립트에 수정될 수 있는 동적 모델
- 가상 요소를 포함하지 않음(예: ::after)

❓ 가상요소란 ❓
-가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용
- HTML에 존재하지 않는 요소를 CSS가 임의로 생성해서 스타일링

✅ 가상 요소 종류

::before => 특정 요소 content 바로 앞에 샆입

::after => 특정 요소 content 바로 뒤에 삽입

::first-letter => 요소의 첫 글자를 선택

::first-line => 요소의 첫 번째 줄을 선택

::marker => marker 목록 항목의 마커를 선택

::selection => 해당 요소에서 사용자가 선택한 요소 부분을 선택

::placeholder => input 필드 안 텍스트를 선택

- 보이지 않는 요소를 포함 (예: display: none)

'React의 고수 🟢' 카테고리의 다른 글

[리액트] 훅(hook) 정리 ✨ (0)	2024.01.18
[리액트] component와 props 정리 ✨ (0)	2023.09.24
[리액트] element 정리 (0)	2023.09.24
[리액트] JSX 문법 (0)	2023.09.24
[리액트] forms 정리 ✨ (0)	2023.09.23

⭐️ 컴포넌트 라이프사이클

📚 컴포넌트 라이프 사이클 메서드 알아보기

✨2. Updating

⭐️ 여기서 DOM이란❓

'React의 고수 🟢' 카테고리의 다른 글

티스토리툴바