리액트 렌더링 과정 순서에 따라 간단한 설명을 공식 문서와 함께 덧붙였습니다.
총 1~8 단계로 정리했습니다.
1. 컴포넌트와 JSX
■ 컴포넌트 : 레고 블록처럼 UI를 구성하는 작은 단위입니다. 재사용 가능한 코드로, 웹 페이지의 특정 부분을 담당합니다. (예: 버튼, 입력창, 메뉴 등)
- https://react.dev/reference/react/Component
■ JSX : HTML처럼 생긴 문법으로, JavaScript 코드 안에서 UI를 쉽게 작성할 수 있게 도와줍니다. 브라우저는 JSX를 이해하지 못하므로, JavaScript 코드로 변환해야 합니다.
- https://react.dev/learn/writing-markup-with-jsx
■ React.createElement() : JSX는 React.createElement()라는 함수를 호출하는 형태로 변환됩니다. 이 함수는 리액트 엘리먼트 트리를 만드는 역할을 합니다.
- https://react.dev/reference/react/createElement
2. 리액트 엘리먼트 트리 (Virtual DOM)
■ 리액트 엘리먼트 : JSX 코드가 React.createElement() 함수를 통해 생성한 JavaScript 객체입니다. 실제 DOM 요소는 아니고, Virtual DOM에 존재하는 가상의 DOM 요소입니다.
- https://react.dev/docs/glossary#react-elements
■ Virtual DOM : 실제 DOM과 똑같이 생긴 가상의 DOM입니다. 실제 DOM 조작은 비용이 많이 들기 때문에, Virtual DOM에서 먼저 변경 사항을 계산하고, 최소한의 변경만 실제 DOM에 적용하여 성능을 높입니다.
- https://react.dev/docs/faq-virtual-dom
3. 렌더링 (마운트)
■ ReactDOM.render() : (React 18 이전) 컴포넌트 트리를 Virtual DOM에 그리고, Virtual DOM을 실제 DOM에 마운트하는 역할을 합니다. 즉, 리액트 앱이 시작되는 지점입니다.
- https://react.dev/reference/react-dom/render
■ createRoot() : (React 18부터) ReactDOM.render()를 대체하는 새로운 API입니다. React 18의 새로운 기능들을 사용하기 위해서는 createRoot()를 사용해야 합니다.
- https://react.dev/reference/react-dom/client/createRoot
4. 업데이트 (Diffing)
■ Reconciliation : 컴포넌트의 state나 props가 변경되면, 리액트는 변경된 내용을 바탕으로 새로운 Virtual DOM 트리를 만듭니다. 그리고 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교(Diffing)하여 변경된 부분만 찾아냅니다.
- https://react.dev/docs/reconciliation
■ Diffing 알고리즘 : 리액트는 효율적인 Diffing 알고리즘을 사용하여 변경된 부분을 빠르게 찾아냅니다. 이 알고리즘은 몇 가지 규칙을 통해 불필요한 비교를 줄이고, 최소한의 DOM 조작으로 UI를 업데이트합니다.
- https://react.dev/docs/reconciliation#matching-dom-elements
5. Reconciliation
■ Reconciliation은 Diffing 알고리즘을 통해 찾아낸 변경된 부분을 실제 DOM에 적용하는 과정입니다. 리액트는 변경된 부분만 정확하게 업데이트하여 성능을 최적화합니다.
- https://react.dev/docs/reconciliation
6. 생명주기 (Lifecycle)
■ Component : (클래스 컴포넌트) 컴포넌트가 생성, 업데이트, 제거되는 특정 시점에 호출되는 함수들입니다. (예: componentDidMount는 컴포넌트가 처음 마운트될 때 호출됩니다.)
- https://react.dev/reference/react/Component
■ Hooks : (함수형 컴포넌트) 클래스 컴포넌트의 생명주기 메서드를 대체하는 기능입니다. useEffect Hook을 사용하면 컴포넌트가 마운트, 업데이트, 제거될 때 특정 작업을 수행할 수 있습니다.
- https://react.dev/reference/react/useState
7. Hooks
■ Hooks API : 함수형 컴포넌트에서 state와 side effect를 사용할 수 있도록 해주는 기능입니다. useState는 컴포넌트의 state를 관리하고, useEffect는 side effect (예: DOM 조작, API 호출)를 처리합니다.
- https://react.dev/reference/react
■ Hooks FAQ : Hooks에 대한 궁금증을 해결해주는 문서입니다.
- https://react.dev/docs/hooks-faq
8. 성능 최적화
■ 성능 최적화 : 리액트 앱의 성능을 향상시키는 다양한 방법들을 의미합니다.
- https://react.dev/docs/optimizing-performance
■ memo : 컴포넌트의 props가 변경되지 않았을 때 불필요한 렌더링을 방지합니다.
- https://react.dev/reference/react/memo
■ useMemo : 계산된 값을 재사용하여 불필요한 계산을 방지합니다.
- https://react.dev/reference/react/useMemo
■ useCallback : 함수를 재사용하여 불필요한 렌더링을 방지합니다.
- https://react.dev/reference/react/useCallback
React Reference Overview – React
React Reference Overview – React
The library for web and native user interfaces
react.dev
리액트 레퍼런스 문서를 참고하여 작성했습니다.
'위클리 페이퍼' 카테고리의 다른 글
| 리액트에서 Virtual DOM, 왜 사용할까 (0) | 2025.02.19 |
|---|---|
| 렉시컬 스코프의 개념과 특성 (0) | 2025.02.17 |
| 자바스크립트에서 this 키워드의 사용과 특성 (0) | 2025.02.17 |
| var, let, const를 설명하기 (모던 자바스크립트) (1) | 2025.02.04 |
| 브라우저의 동작 방식 요약 (MDN Docs) (1) | 2025.02.04 |