React 렌더링 과정이 어떻게 되나요?

React의 렌더링 과정은 다음과 같습니다:

1. 초기 렌더링(Initial Rendering):

• ReactDOM.render() 함수나 React의 컴포넌트를 사용하여 초기 렌더링을 시작합니다.
• 루트 컴포넌트가 ReactDOM.render() 함수로 전달되면 해당 컴포넌트의 렌더링이 시작됩니다.

2. 가상 DOM(Virtual DOM) 생성:

• React는 컴포넌트의 렌더링 결과물을 가상 DOM으로 표현합니다.
• 가상 DOM은 실제 DOM과 동기화되는 일종의 가벼운 복사본입니다.

3. 이전 가상 DOM과의 비교:

• 이전 렌더링 시 생성된 가상 DOM과 현재 렌더링 결과물로 생성된 가상 DOM을 비교합니다.
• 이전 가상 DOM과 현재 가상 DOM은 트리 구조로 이루어져 있으며, 이를 비교하여 변경된 부분을 찾습니다.
• 이 과정을 "재조정(Reconciliation)" 이라고 합니다.

4. 변경된 부분 식별:

• React는 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 식별합니다.
• 변경된 부분은 컴포넌트의 상태(state)나 속성(props)의 변경으로 인해 발생할 수 있습니다.

5. 실제 DOM 업데이트:

• 변경된 부분이 식별되면 React는 이를 실제 DOM에 반영합니다.
• React는 최소한의 DOM 조작을 통해 변경된 부분만을 업데이트합니다.
• 이를 통해 성능을 향상시키고 불필요한 리렌더링을 방지합니다.

6. 컴포넌트 라이프사이클 실행:

• 렌더링이 완료되면 React는 컴포넌트의 라이프사이클 메서드를 호출합니다.
• 이를 통해 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 필요한 작업을 수행할 수 있습니다.

위의 과정은 React의 가장 기본적인 렌더링 과정을 설명한 것입니다. React는 가상 DOM과 재조정 과정을 통해 효율적인 렌더링을 지원하며, 필요한 부분만 업데이트하여 성능을 최적화합니다.