Wanted Challenge_React의 가상돔(Virtual DOM)과 state의 개념

정윤숙·2024년 4월 3일

TIL

목록 보기

191/192

📒 오늘의 공부

1. React 기초 - React의 가상돔(Virtual DOM)과 state의 개념

Wanted Frontend Challenge - React 강의 내용 정리_1

1. React의 가상돔(Virtual DOM)

React가 UI를 빠르고 효율적으로 렌더링하기 위한 핵심 개념 중 하나
리액트는 항상 렌더링 이전의 화면 구조와 렌더링 이후의 화면구조를 가진 두 개의 가상 돔 객체를 유지
이 두 가상 돔을 비교하여 변경된 부분만 실제 DOM에 반영
React는 어디까지나 UI를 효율적으로 보여주기 위한 라이브러리
React의 역할 = 컴포넌트와 state를 관리

💡 DOM(Document Object Model)이란?
- HTML문서를 브라우저가 이해할 수 있도록 만든 tree형태의 자료구조
- HTML의 계층적 구조와 정보를 표현, DOM을 제어할 수 있는 API 제공
- 코드스테이츠 - 문서 객체 모델 DOM 과 자바스크립트 JavaScript

2. state의 개념

state

컴포넌트 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체
변할 수 있는 값 = 변수

props

컴포넌트 사이에서 전달되는 데이터(=인자)
읽기 전용 값으로 맘대로 변경할 수 없음

state를 사용하는 이유

일반 변수 사용 시
- let, const 등으로 선언된 변수는 재할당해도 화면이 다시 그려지지 않음 = 리렌더링 X
- 재할당은 되나 새로고침을 해야 화면에 반영됨
- 값을 읽기만 하고 업데이트 안 하는 경우에 사용
상태(state) 사용 시
- 상태가 변경되면 자동으로 화면이 다시 그려짐
- 새로고침을 하지 않아도 화면이 변경 됨
- 사용자는 자연스럽고 스무스한 화면을 볼 수 있음
- 자주 변경이 일어나거나, 동적으로 렌더링해야하는 경우 사용
💡 컴포넌트(화면)이 재렌더링 되는 3가지 경우
- setState 메서드를 통해 상태가 변경/업데이트될 때
- 부모 컴포넌트로부터 전달받은 프로퍼티가 변경될 때
- 상위(부모) 컴포넌트가 재렌더링 될 때 자식 컴포넌트도 재렌더링

3. 수업 관련 질문에 답변하기

DOM과 가상돔(Virtual DOM)의 차이
- DOM의 경우에는 변경이 있을 때마다 렌더링이 발생한다. 예를 들어, 변화가 10개 발생하면 10번의 렌더링이 이루어진다.
- React에서 Virtual DOM의 경우 상태가 변경되면 먼저 이전 가상돔과 새로운 가상돔을 비교하여 변경된 부분만을 실제 돔에 적용한다. 따라서 변화가 10개 발생하더라도 실제 돔에 한 번만 변경사항을 반영하기 때문에 불필요한 렌더링을 최소화하고 성능을 향상시킨다.
state를 직접 바꾸지 않고 useState를 사용하는 이유
- React에서는 상태의 변경을 감지하여 해당 컴포넌트를 리렌더링하기 때문에 상태의 불변성을 유지하는 것이 중요하다.
- 상태를 직접 변경하여 객체를 수정하면 React는 변경된 부분을 인식하지 못하고 전체 객체를 변경된 것으로 간주하여 모든 하위 컴포넌트를 다시 렌더링하기 때문에 불필요한 렌더링이 발생할 수 있다.
- useState는 상태를 관리하기 위한 훅(Hook) 중 하나로, 상태를 변경할 때에는 해당 상태의 새로운 값을 반환하는 함수를 사용하여 상태의 불변성을 유지한다.
```
    // count 상태와 count를 변경할 수 있는 함수를 생성
  const [count, setCount] = useState(0);

  // count를 증가시키는 함수
  const increment = () => {
    // 이전 상태를 가져와서 새로운 상태를 생성하여 반환
    setCount(prevCount => prevCount + 1);
  };
```
- 이를 통해 React가 상태의 변경을 효율적으로 추적하고 관리할 수 있으며, 불필요한 리렌더링을 방지하여 성능을 최적화할 수 있다.