DOM과 render
DOM은 Document Object Model의 약자이며, HTML, XML 또는 다른 마크업 언어의 문서 구조를 나타내는 프로그래밍 인터페이스이다. 즉, DOM은 웹 페이지를 구성하는 요소들을 객체로 나타내어 자바스크립트 등의 스크립트 언어로 조작할 수 있게 한다.
렌더링은 웹 브라우저가 HTML, CSS 및 JavaScript 코드를 해석하여 웹 페이지를 화면에 그리는 과정을 말한다. 일반적으로 브라우저에서 렌더링은 다음과 같은 단계로 이루어진다.
-
파싱(Parsing): 브라우저가 HTML, CSS 및 JavaScript 코드를 읽어서 해석합니다.
-
DOM 생성: 브라우저는 파싱된 HTML 문서를 기반으로 DOM 트리를 생성합니다. 이 DOM 트리는 웹 페이지를 구성하는 모든 요소를 객체로 나타냅니다.
-
스타일링(Styling): 브라우저는 CSS 스타일 시트를 해석하여 DOM 요소에 적용될 스타일 정보를 계산합니다.
-
레이아웃(Layout): 브라우저는 DOM 요소를 화면에 배치하기 위한 레이아웃 정보를 계산합니다.
-
페인팅(Painting): 브라우저는 화면에 표시할 내용을 그리기 위해 그래픽 API를 사용하여 요소를 그립니다.
이러한 과정을 통해 브라우저는 사용자에게 화면에 웹 페이지를 표시합니다. 따라서 개발자들은 렌더링 성능을 최적화하고, 페이지 로딩 속도를 빠르게 만들기 위해 이러한 과정들을 이해하고 최적화하는 방법을 배워야 한다.
✨ React의 Render
이번에는 react가 render 하는 과정을 정리해보겠다.
-
컴포넌트의 상태(State)가 변경되면 React는 Virtual DOM에 새로운 컴포넌트 트리(Component Tree)를 생성합니다. Virtual DOM은 일종의 가상의 DOM 트리이며, 이전에 렌더링된 Virtual DOM과 새로 생성된 Virtual DOM을 비교함으로써 변경된 부분을 실제 DOM에 업데이트합니다.
-
Virtual DOM의 노드는 React 요소(React Element)로 변환됩니다. React 요소는 Virtual DOM에서 렌더링되는 각 컴포넌트의 속성(props)과 상태(state)를 포함하고 있는 객체입니다.
-
변환된 React 요소는 React에서 지원하는 브라우저 DOM API를 사용하여 실제 DOM 요소로 변환됩니다. 이 단계에서 React는 이전에 렌더링된 실제 DOM과 새로 생성된 실제 DOM을 비교하여 변경된 부분만 업데이트합니다.
-
변경된 부분이 실제 DOM에 반영되면 React는 이벤트 핸들러(Event Handler)와 함께 컴포넌트를 렌더링합니다. 이벤트 핸들러는 사용자 입력(클릭, 타이핑 등)과 같은 상호작용에 대한 응답으로 컴포넌트를 업데이트할 수 있습니다.
그렇다면 여기서 말하는 Virtual DOM은 무엇인가?
📌 Virtual DOM
React는 컴포넌트 기반의 UI 라이브러리로, 애플리케이션의 상태가 변경되면 가상 DOM을 사용하여 브라우저에서 실제로 DOM을 업데이트하는 것보다 빠르고 효율적인 방식으로 UI를 업데이트합니다.
가상 DOM은 React가 이전 DOM 상태와 새로운 DOM 상태를 비교하여 변경된 부분만 실제 DOM에 적용함으로써 불필요한 렌더링을 최소화합니다.
React에서는 먼저 가상 DOM을 사용하여 렌더링 결과를 계산합니다. 그리고 실제 DOM을 조작하여 이를 렌더링 결과에 일치시킵니다. 이 과정에서 변경된 부분만 실제 DOM에 적용되므로 성능을 향상시킬 수 있습니다. 가상 DOM은 React에서 렌더링 성능을 최적화하는 중요한 요소 중 하나입니다. React는 이를 통해 사용자 경험을 개선하고 빠르게 반응하는 UI를 구축할 수 있습니다.
결론적으로 가상돔을 통해서 렌더링 성능을 최적화할 수 있게되고, 이 때문에 사용자 경험을 개선하게됨!
따봉 가상돔아 고마워!
react의 state
React의 state는 클래스 컴포넌트에서 사용되는 상태 관리 메커니즘입니다. state는 컴포넌트의 상태를 저장하고, 업데이트할 수 있는 객체입니다. state를 업데이트하면 React는 변경된 state를 사용하여 컴포넌트를 다시 렌더링합니다.
하지만 React 함수형 컴포넌트는 state를 직접 사용할 수 없습니다. 대신, React Hooks 중 하나인 useState를 사용하여 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.
useState는 state 값을 저장하고, 해당 값에 대한 업데이트 함수를 반환하는 훅입니다. 이 함수를 호출하면 [state, setState] 형태의 배열이 반환됩니다. 첫 번째 요소인 state는 현재 state 값을 나타내며, 두 번째 요소인 setState는 state 값을 업데이트하는 함수입니다.
useState를 사용하면 함수형 컴포넌트에서도 state 값을 저장하고 업데이트할 수 있습니다. 이를 통해 코드를 간결하게 유지할 수 있고, 컴포넌트를 좀 더 간단하게 작성할 수 있습니다.
props
React에서 props는 "properties"의 약자로, 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터를 나타냅니다.
React에서 모든 컴포넌트는 props를 통해 데이터를 받고, 이 데이터를 사용하여 컴포넌트 내부에서 렌더링되는 값을 조작하거나 동적으로 렌더링될 수 있습니다.
props는 읽기 전용이므로, 자식 컴포넌트에서 데이터를 수정할 수 없습니다. 대신, 부모 컴포넌트에서 props를 업데이트하여 데이터를 변경할 수 있습니다.
예를 들어, 다음과 같이 부모 컴포넌트에서 props를 통해 자식 컴포넌트에게 데이터를 전달할 수 있습니다.
Copy code
function ParentComponent() {
return <ChildComponent name="React" />;
}여기서 ChildComponent는 name prop을 받아와 사용할 수 있습니다.
Copy code
function ChildComponent(props) {
return <h1>Hello, {props.name}!</h1>;
}props를 이용하여 ChildComponent에서 name 값을 가져와 렌더링하였습니다.
React에서 props는 유용한 개념으로, 컴포넌트 간의 데이터 전달을 단순화하고 재사용성을 높이는 데 도움을 줍니다.
