React Render

React의 렌더링 과정은 크게 초기 렌더링(Initial Rendering)과 조화 과정(Reconciliation)으로 나눌 수 있다.

1. 초기 렌더링 (Initial Rendering)

이 단계는 React 애플리케이션에서 컴포넌트가 처음으로 실제 DOM에 생성되는 과정.

• React 컴포넌트의 render() 메서드가 호출되면, 반환하는 JSX를 바탕으로 가상 DOM 트리를 만듭니다. 이 가상 DOM 트리는 실제 DOM을 추상화한 것입니다.
• 이렇게 생성된 Virtual DOM (가상DOM) 트리는 최초에 한 번만 실제 DOM에 반영됩니다. 즉, React 요소들이 실제로 화면에 그려지게 됩니다.

render(){...}

이 함수는 html 형식의 문자열을 반환하지 않고 '뷰가 어떻게 생겼고 어떻게 동작하는지'에 대한 정보가 담긴 객체(JSX)를 반환한다.

2. 조화 과정 (Reconciliation)

초기 렌더링 후, 상태(state)나 속성(props)의 변경 등으로 인해 컴포넌트가 업데이트되어야 할 때, reconciliation 과정이 시작된다.

• 상태나 속성의 변경으로 render() 메서드가 다시 호출되면, 새로운 JSX를 반환하여 새로운 가상 DOM 트리를 만듭니다.
• 이 새로운 가상 DOM 트리와 이전의 가상 DOM 트리를 비교. 여기서 '비교'라 함은 diffing 알고리즘을 의미하며, 이 알고리즘은 두 개의 트리 간 차이점을 찾아내는 방법이다.
• 차이점을 발견하면 그 부분만 실제 DOM에서 업데이트합니다. 이 방식을 'partial rendering' 혹은 'incremental rendering'이라 한다.

React는 위와 같은 방식으로 성능 최적화를 한다. 전체 페이지를 매번 다시 그릴 필요 없이 변한 부분만 업데이트하기 때문에 리소스 사용량을 줄일 수 있다.