리액트의 컴포넌트 트리 생성/ 리액트가 시스템 뒷편에서 동작하는 방식
강의에서다룬 것
- 리액트는 어떻게 DOM을 업데이트하는가
- 리액트는 사용자가 보는 화면을 어떻게 업데이트하는가
- 컴포넌트 함수들이 어떻게 실행되는가
- 리액트가 어떻게 컴포넌트를 확인하는지, 그리고 어떻게 실제 DOM을 그 컴포넌트들로부터 불러오는지
컴포넌트를 화면에 렌더링한다: 리액트가 먼저 컴포넌트 함수들을 실행한다
예를 들어 App 컴포넌트는 이 프로젝트의 App 컴포넌트 함수로 시작한다.
왜냐하면 App 컴포넌트가 가장 첫 번째 컴포넌트이자, 유일하게 메인 파일(main.jsx)에 참조되어 있는 컴포넌트이기 때문에 가장 먼저 실행됨
모든 컴포넌트 함수들을 렌더링 될 수 있는 것들만 반환해야 한다. JSX 코드는 결과적으로 자바스크립트 코드로 변환되어야 하고 화면에 렌더링될 수 있는 실제 요소로 변환되어야 한다.
리액트는 컴포넌트 트리를 생성한다.
JSX 코드가 어떻게 화면에 나타나는지
페이지를 새로고침하거나 처음 방문했을 때
컴포넌트 함수가 실행되고 JSX 코드가 반환되면 컴포넌트 트리가 생성되고 최종적으로는 네이티브 HTML 요소들로 끝난다. 그리고 이 HTML 코드가 DOM에 삽입된다.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Behind the Scenes</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>index.html을 불러오게 되는데 div 하나와 script 하나를 불러온다. 사실 전체 리액트 앱은 <div id="root"></div> 여기에 담겨 있다.
// App.jsx
import { useState } from 'react';
import Counter from './components/Counter/Counter.jsx';
import Header from './components/Header.jsx';
import { log } from './log.js';
import ConfigureCounter from './components/Counter/ConfigureCounter.jsx';
function App() {
log('<App /> rendered');
const [chosenCount, setChosenCount] = useState(0);
function handleSetCount(newCount) {
setChosenCount(newCount);
}
return (
<>
<Header />
<main>
<ConfigureCounter onSet={handleSetCount}/>
<Counter initialCount={chosenCount} />
</main>
</>
);
}
export default App;
이 컴포넌트 트리와 그 트리로 생성된 HTML이 렌더링된다.
리액트는 가상 DOM을 사용해서 실제 DOM의 어떤 부분들이 업데이트되는지 찾고 그
가상 DOM을 사용하면 이는 메모리 안에서만 존재하고 실제 DOM을 사용하는 것보다 빠르다.
가상 DOM이 동작하는 방식
a. 페이지를 새로고침하거나 전체 리액트 앱이 시작됐을 때
1단계: 리액트는 컴포넌트 트리를 만든다.
2단계: 렌더링되어야 하는 실제 HTML 코드를 그 컴포넌트 트리로부터 전달한다. 그리고 가상 DOM snapshot을 생성한다. 이것은 실제 DOM이 어떻게 보여야 하는지 가상으로 나타낸 것이다. 3단계: 리액트는 생성되었던 마지막 가상 DOM 스냅샷과 비교한다(old snapshot과 new snapshot을 비교). 리액트는 바뀐 것들을 전부 확인하고 실제 DOM에 변동 사항들을 적용한다. 즉, 전체 가상 DOM이 실제 DOM으로 삽입된다.
b. 버튼을 클릭해서 웹사이트 UI를 업데이트하는 상황
1단계: 컴포넌트 트리를 만든다. 이때 트리에서 바뀐 부분들 또는 실행된 컴포넌트 함수들만 찾아낸다. memo를 사용하는지도 파악한다.
2단계: 이전 가상 DOM snapshot과 새 가상 DOM snapshot을 비교해서 바뀐 부분들을 찾아내고 업데이트된 HTML 코드를 전달한다.
3단계: 변동사항들만 실제 DOM에 적용한다.
컴포넌트 함수가 실행되고 JSX 코드가 나온다고 해서 이 코드가 실제 DOM에 삽입되거나 업데이트 되는 것이 아니다. 실제 DOM 동작들은 성능적으로 무리가 많이 가기 때문에 리액트는 실제 DOM을 매번 바꾸지 않는다. 대신, 이 스냅샷을 만들어서 비교하고 꼭 필요한 변동사항들을 적용시켜 원하는 결과를 얻는다.
