Week 4. 리액트 렌더링 방식과 Virtual DOM 및 컴포넌트

리액트의 렌더링 방식

• Virtual DOM 사용: 리액트는 메모리에서 관리되는 가상 DOM을 사용해 렌더링 최적화.
• 변경 사항 감지: 상태(State)나 속성(Props) 변경 시 Virtual DOM에서 변경 사항 계산 후 실제 DOM과 비교(diffing).
• Reconciliation: 변경 사항을 실제 DOM에 반영하는 과정으로, 최소한의 DOM 조작으로 성능 최적화.
• 렌더링 과정: 컴포넌트의 render 함수 또는 함수형 컴포넌트에서 JSX 반환 후 Virtual DOM에 반영.
• 업데이트: 상태나 속성 변경 시 필요한 컴포넌트만 다시 렌더링하여 효율적 업데이트.

 

Virtual DOM이란? 사용하는 이유

• Virtual DOM이란?
  • 리액트가 사용하는 가볍고 메모리 내에서 관리되는 가상 DOM.
  • 실제 DOM과 1:1 대응되는 가상의 구조체.
  • 렌더링 결과를 저장하고 관리하며, 실제 DOM에 반영하기 전에 변경 사항 임시 반영.
• Virtual DOM을 사용하는 이유
  • 성능 최적화: 실제 DOM은 느리고 무거움, Virtual DOM을 통해 변경 사항을 가상에서 계산하고 최소한의 변경만 실제 DOM에 반영.
  • 효율적 업데이트: 상태나 속성 변경 시 Virtual DOM에서 변경 사항 계산, 실제 DOM과 비교해 필요한 부분만 업데이트.
  • 개발 편의성: 복잡한 DOM 조작을 추상화, 개발자가 직관적이고 선언적인 방식으로 UI 구축 가능.

 

React에서 컴포넌트란? 함수형 컴포넌트와 클래스 컴포넌트의 차이점

• 컴포넌트란?
  • 리액트에서 UI를 구성하는 기본 단위.
  • 재사용 가능한 독립적인 코드 블록.
  • 화면에 표시되는 특정 요소나 기능 담당.
• 함수형 컴포넌트(Function Component)
  • 정의: 자바스크립트 함수로 정의된 컴포넌트.
  • 구조: props를 받아 JSX 반환.
  • 상태 관리: useState, useEffect 등의 리액트 훅 사용.
  • 특징: 코드 간결, 작성 쉬움, 리액트 훅 도입 이후 많이 사용됨.
• 클래스 컴포넌트(Class Component)
  • 정의: 자바스크립트 클래스 형태로 정의된 컴포넌트.
  • 구조: React.Component 상속, render() 메서드 내에서 JSX 반환.
  • 상태 관리: this.state 사용, this.setState로 상태 업데이트.
  • 생명주기 메서드: componentDidMount, componentDidUpdate 등 생명주기 메서드 사용.
  • 특징: 함수형 컴포넌트보다 복잡하고 길어질 수 있음, 리액트 훅 도입 전 주로 사용됨.
• 주요 차이점
  • 구조: 함수형 컴포넌트는 함수로, 클래스 컴포넌트는 클래스로 정의.
  • 상태 관리 및 생명주기: 함수형 컴포넌트는 리액트 훅 사용, 클래스 컴포넌트는 this.state와 생명주기 메서드 사용.
  • 코드 간결성: 함수형 컴포넌트는 간결하고 이해하기 쉬운 구조.
  • 사용 빈도: 리액트 훅 도입 이후 함수형 컴포넌트가 더 많이 사용됨.