처음에 react 프로젝트를 시작하면 위와 같이 세팅이 된다.
그런데 이것들이 무엇인지 잘 알지 못했다.
1. import react from 'react'
과연 이것은 무엇일까?
브라우저는 오직 3가지만 읽을 수 있다. (HTML, CSS, JavaScript)
그렇기에 우리가 React만 작성해서 브라우저한테 갔다주면 알지 못한다.
그럼 어떻게 해야할까?
맞다 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해줘야한다.
리액트에서 JSX문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해
JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기위해 import React from 'React' 를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다.
1. Hello world (JSX)
import React from 'react'
import ReactDOM from 'react-dom/client';
function App() {
return <h1>Hello World!</h1>
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);2. Hello world (JSX -> JS)
import React from 'react'
import ReactDOM from 'react-dom/client';
function App() {
return React.createElemet("h1",null,"Hello World");
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);JSX에서 작성한 <h1>Hello, World!</h1>가 React.createElemet("h1",null,"Hello World")로 변환된 것을 볼 수 있다.
이처럼 JSX는 React라는 객체의 메소드를 이용하여 구성요소들을 생성하기 때문에 문서의 위에 import React from ‘react’를 작성해 해당 JSX가 객체React를 받아오고 추후 Babel이라는 웹팩을 통해 React를 유효한 JavaScript로 변환할 수 있도록 해준다.
여기서 의문점은 우리가 프로젝트를 하다보면 모든 컴포넌트 위에 react를 import해주지는 않는다.
이는 작성하고 있는 컴포넌트가 상위 컴포넌트 인지 하위 컴포넌트 인지 파악하고 만약 상위 컴포넌트에 import React from 'react'가 작성되었다면 하위에서는 생략해도 작동이 된다.
But React 17 이상이라면
React 17 버전부터는 React 내부적으로 JSX transformer가 JSX를 React요소로 변환하는 작업을 거치기 때문에 모든 컴포넌트에
import React from 'react'를 작성하지 않아도 된다.
따라서 위 예제도 작성하지 않아도 된다.
하지만 위 예제는 react 18 예제이다.
여기서는 React.StrictMode 사용을 위해 작성되었다.
2. ReactDom
ReactDom에서 Dom이 무엇인지 먼저 알아보자
1) DOM
DOM에 대해 배우기전에 웹 페이지가 렌더링 되는 과정에 대해서 먼저 알아보자.
위의 그림은 이 셋이 어떻게 뭉쳐서 웹 페이지를 구성하는지 보여준다.
웹 페이지가 렌더링 되는 과정
1. HTML parser가 HTML을 바탕으로 DOM tree를 그린다.
2. CSS parser가 CSS를 바탕으로 CSSOM을 그린다.
3. DOM에 CSSOM을 적용하여 Render Tree를 그린다.
4. Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 한다.
*HTML 코드를 읽어 내려가다가
<script></script>
태그를 만나면 파싱을 잠시 중단하고 js 파일을 로드한다.
Render는 "화면에 표시한다" 라고 이해하면 쉽다.
여기까지가 웹 페이지가 렌더링 되는 과정이다
여기서 DOM 은 HTML 요소의 구조화된 표현을 나타내고
CSSOM은 요소들과 연관된 스타일 정보의 구조화된 표현을 나타낸다.
이렇게만 말하면 어려우니 자세히 알아보자.
(1) DOM
DOM(Document Object Model)은 HTML요소들의 구조화된 표현으로 객체에 해당된다.
조금 더 쉽게 설명하자면 DOM은 웹 페이지의 구조를 트리 형태로 표현한 것이다.
한마디로 웹 문서의 요소, 속성, 텍스트 등을 객체로 표현하고, 이러한 객체를 트리 구조로 연결하여 표현한다.
다시 천천히 알아보겠습니다.
웹 브라우저는 HTML 문서를 불러오면, HTML 구조를 파싱하여 DOM 트리를 생성한다.
이 DOM트리는 웹 문서의 구조를 표현하며, JavaScript나 다른 프로그래밍 언어를 사용하여 DOM 객체를 조작하여 웹 페이지의 동적 요소를 구현할 수 있다.
아직도 뭔가 어렵다. 조금 더 쉽게 이해하기 위해 그림을 통해 이해해봅시다.
웹 브라우저가 원본 HTML 문서를 파싱하여 "노트 트리"를 만드는데 그게 바로 위 그림입니다.
자 그럼 다시한번 다르게 설명해보겠습니다.
DOM은 웹 페이지(HTML 이나 XML)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.
즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.
(조금 더 자세한 DOM 설명 - 링크 )
여기서 조금 더 깊게 들어가면 얼핏 "DOM은 HTML과 사실상 같은게 아닌가?"라는 생각이 드실 수 있습니다.
허나 둘은 다릅니다.
2. DOM 과 HTML의 차이점
DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않다.
- HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴때 사용하는 설계도)
- DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)
차이점
1) 작성된 HTML 문서가 유효하지 않을 때
DOM은 유효한 HTML 문서의 인터페이스이다. DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정한다.
위의 코드에서는 문서에 유효한 HTML 규칙의 필수 사항인 <head>와 <body> 요소가 빠져있지만 아래 같이 DOM 트리에는 올바르게 교정되어 나타난 것을 볼 수 있다.
2) 자바스크립트에 의해 DOM이 수정될 때
DOM은 HTML 문서의 내용을 볼 수 잇는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있다.
위의 코드는 자바스크립트를 사용하여 DOM에 새로운 노드를 추가하는 코드이며 이 코드는 DOM을 업데이트하지만 HTML문서의 내용을 변경하지는 않는다.
3. DOM은 브라우저에서 보이는 것이 아니다.
브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합입니다. 렌더 트리는 오직 렌더링 되는 요소만 관련이 있고 스크린에 그려지는 것으로 구성되어 있어 시각적으로 보이지 않는 요소들은 제외되기 때문에 DOM과는 다릅니다.
ex) display: none 스타일 속성을 가지고 있는 요소
랜더 트리에 해당하는 뷰 포트에 표시되는 내용은 <p> 요소를 포함하지 않으며 내용은 아래와 같다.
4. DOM은 개발도구에서 보이는 것이 아닙니다.
개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하지만 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함합니다.
ex) CSS의 가상요소
::before과 ::after 선택자를 사용하여 생성된 가상 요소는 cssom과 렌더 트리의 일부를 구성하지만 DOM은 오직 원본 HTML 문서로부터 빌드되고, 요소에 적용되는 스타일을 포함하지 않기 때문에 기술적으로 DOM의 일부는 아니다.
가상 요소는 DOM의 일부가 아니기 때문에 자바스크립트에 의해 수정될 수 없습니다.
2. CSSOM(CSS Object Model)
위에서 봤던것 처럼 브라우저가 HTML을 보고 DOM을 생성하는 동안 CSS 스타일시트 링크 태그를 접하면 리소스에 대해 요청합니다.
그러면 HTML을 DOM트리로 만든 것 처럼 CSS도 브라우저가 이해하고 처리할 수 있도록 만드는 것을 CSSOM이라고 지칭합니다.
3. Render tree
간단하게 설명하면 DOM과 CSSOM을 결합하는 것을 Render tree라고 합니다.
Render tree : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리
여기에는 페이지를 렌더링하는 데 필요한 노드만 포함되어 있습니다.
자이제 DOM이 무엇인지 알았으니 React DOM에 대해 알아보기전에
Virtual Dom에 대해 알면 더 좋습니다.
virtual DOM
우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미합니다.
그럼 왜 React는 Virtual DOM을 사용할까?
"성능" 때문이다.
DOM을 자주 조작하면 성능에 영향을 끼치기 때문에 속도가 느려진다.
그렇다고 DOM이 느린것은 아니다. DOM 자체는 빠르고, DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않다.
하지만, 웹브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 다시 구성하고, 페이지를 다시 칠하는데 이 과정에서 많은 시간이 허비되어 성능이 저하가 되는 것이다.
그렇기 때문에 Virtual DOM을 사용해야 하며, 이 방식을 통해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 만들어준다.
그렇다면 Virtual DOM을 어떻게 동작할까?
virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 가상의 DOM을 사용한다.
즉, DOM의 가벼운 사본 형태라고 보면된다.
1. 데이터 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 한다.
2. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교한다. 이 과정을 "diffing"이라고 한다.
3. 그러고 나서, 바뀐 부분만 실제 DOM에 적용한다.
쉽게말해 리액트에게 UI가 어떤 상태를 원하는지 알려주고 DOM이 해당 상태와 일치하는지 확인한다고 생각하면 된다.
Virtual DOM을 사용하면 DOM보다 무조건 빠른가?
Virtual DOM을 사용하면 DOM보다 무조건 빠른가?
Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니다.
리액트에서는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축을 할때 사용을 권장하고 있다.
즉, 이 말은 리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.
자 그럼 이제 React DOM 에 대해 본격적으로 알아보겠습니다.
React 요소는 변경 불가능합니다. 한번 요소를 만들었다면 그 자식이나 속성을 변경할 수 없습니다. 요소는 영화의 단일 프레임과 같습니다. 특정한 시간대의 UI를 보여줄 뿐입니다.
이 지식을 바탕으로 하면, UI를 업데이트 할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render()로 전달하는 것입니다.
https://reactjs-kr.firebaseapp.com/docs/rendering-elements.html
https://ljtaek2.tistory.com/137
'React-JS > 개념' 카테고리의 다른 글
| [번역] : RSC From Scratch. Part 1: Server Components (0) | 2023.09.04 |
|---|---|
| [React] styled-compoents (1) | 2023.02.20 |
| [React] Hook ( useState / useEffect ) (0) | 2023.02.11 |
| [React] Function and Class Components (0) | 2023.02.11 |
| [React] create react app (0) | 2023.02.10 |
