함수형 컴포넌트를 코딩할 때 JSX로 만듭니다. 이렇게 만들어진 컴포넌트는 프로그램이 실행되면 가상 돔(Virtual Dom)에 탑재되는데요. 이것을 렌더링(Rendering)이라고 합니다.
가상 돔에 탑재된 컴포넌트는 실제 돔(Real Dom, HTML DOM)에 커밋(Commit)되어 사용자가 볼 수 있게 됩니다.
※ React에서는 가상 돔의 컴포넌트가 실제 돔에 출력되는 것을 커밋(Commit)이라고 합니다.
※ Bable: JSX를 JS(Javascript) 파일로 변환하는 JSX 컴파일러입니다.
[용어 정리]
가상 돔에 컴포넌트가 생성되는 것을 '렌더링'이라고 했습니다.
그리고, 가상 돔의 컴포넌트가 실제 돔에 적용하는 것을 '커밋' 외에 '업데이트' 또는 '렌더링'이라고도 합니다.
이렇게 되면 '렌더링'이라는 용어가 중복 사용되는데요, 이를 명확하게 구분하기 위해서 가상 돔에 렌더링 되는 것을
'가상 돔 렌더링(Virtual DOM Rendering)'이라고 하고 실제 돔에 렌더링 되는 것을 '실제 돔 렌더링(Real DOM Rendering)'이라고 합니다.
만약 컴포넌트의 상태(State)가 변경되면 컴포넌트는 새로운 가상 돔을 만들어서 재 렌더링합니다. 물론 재 렌더링된 컴포넌트는 실제 돔에 커밋됩니다.
컴포넌트의 상태(State)가 변경되면 재 렌더링 된다고 했는데요, 이 때 React는 성능 최적화를 고려해서 Diffing과 Minimal Updates를 이용합니다.
Diffing는 컴포넌트의 상태가 변경됐을 때 기존 가상 돔과 새로운 가상 돔의 차이점을 파악는 과정입니다.
Minimal Updates는 Diffing과정에서 파악된 변경된 부분만 새로운 가상 돔에 반영하고 나머지는 재활용 하는 과정입니다.
그리고 이렇게 Diffing과 Minimal Updates과정을 통해서 돔의 변경을 최소화하는 것을 리컨실리에이션(Reconciliation)이라고 합니다.
그럼 컴포넌트의 상태가 변경될 때 자식 컴포넌트들은 어떻게 될까요? 부모 컴포넌트가 재 렌더링 되면 모든 자식 컴포넌트도 재 렌더링 됩니다.
가상 돔과 실제 돔에 대해서 알아봤는데요, 그럼 가상 돔과 실제 돔은 어디에 존재할까요?
컴퓨터 프로그램이기 때문에 기본적으로 메모리 존재하는데요, 가상 돔과 실제 돔이 사용하는 메모리가 다릅니다.
우선 가상 돔은 힙 메모리(heap memory)에 탑재됩니다. 다시 말해 Javascript가 사용하는 메모리의 힙 메모리 영역을 사용합니다.
반면 실제 돔은 브라우저 메모리에 탑재됩니다. 다시 말해 사용자가 사용하는 브라우저(Chrome, Firefox 등)의 엔진 메모리를 사용합니다.
※참고. Chrome 브라우저의 엔진은 'Blink'이고, Firefox의 엔진은 'Gecko'입니다. 그리고 브라우저 엔진은 HTML DOM을 관리합니다.
이렇게 돔을 나누고 사용 메모리를 구분하는 이유는 '가상 돔'은 React가 효율적인 렌더링을 위해 javascript 메모리에서 관리하고, '실제 돔'은 브라우저가 화면에 표시하는 것과 관련이 있어 브라우저 엔진 메모리를 사용하는 것이 좋기 때문입니다.
이번 시간에는 리액트에서 가장 중요한 컴포넌트와 렌더링에 대해서 살펴봤습니다. 다음 시간에는 컴포넌트 마운트에 대해서 살펴보겠습니다.
리액트 컴포넌트 마운트란?
지난 시간에는 '렌더링'에 대해서 살펴봤습니다. 리액트 컴포넌트 렌더링이란?함수형 컴포넌트를 코딩할 때 JSX로 만듭니다. 이렇게 만들어진 컴포넌트는 프로그램이 실행되면 가상 돔(Virtual Dom
hoazzinews.tistory.com
'react' 카테고리의 다른 글
| 리액트 프로젝트 기본 구조 이해하기 (1) | 2024.12.06 |
|---|---|
| 리액트 프로젝트 생성하기 (1) | 2024.12.06 |
| 리액트 state(상태)란? (1) | 2024.12.05 |
| 리액트 컴포넌트 마운트란? (1) | 2024.12.04 |