y_flm's Blog

들어가기 앞서, React는 컴포넌트 기반의 UI 라이브러리이다.

컴포넌트란, 마치 레고 블록처럼 조립이 가능한 작은 UI 조각들이며,

이 컴포넌트끼리 정보를 주고받고 화면이 바뀌기도 하는데, 그때 props와 state라는 개념이 사용되는 것이다.

Props에 대해 알아보자!

Props란?

     props는 컴포넌트가 부모 컴포넌트로부터 받는 데이터 또는 설정 값을 말한다.

function Welcome(props) {
  return <h1>안녕, {props.name}!</h1>; // 화면에 "안녕, 길동!" 출력
}

<Welcome name="길동" />

Props의 특징

• 읽기 전용(Read-Only): 컴포넌트는 받은 props를 변경할 수 없음.
• 부모 → 자식 방향으로만 전달 가능
• 컴포넌트 간의 통신 수단이 될 수 있음.

[Props는 어떤 상황에서 쓰는게 좋을까?]
1) 화면에 어떤 내용을 보여줄지 부모 컴포넌트가 결정하게 하고 싶을 때
2) 재사용 가능한 컴포넌트를 만들고 싶을 때

State에 대해 알아보자!

State란?

     state는 컴포넌트 자체가 저장하고 관리하는 값이다.

     사용자의 입력, 버튼 클릭, API 호출 결과 등 변화하는 값을 저장하는데 쓰인다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

State의 특징

• 컴포넌트 내부에서만 관리
• 값이 바뀌면 자동으로 리렌더링
• 함수형 컴포넌트에서는 useState 훅을 사용해서 만듦.

[state는 어떤 상황에서 쓰는게 좋을까?]
1) 사용자 입력을 저장하고 싶을 때 (예: 입력 폼)
2) 버튼 클릭 횟수를 세고 싶을 때
3) 특정 UI의 표시 여부를 토글할 때
=> 한마디로 변화하는 값을 사용하고 싶을 때!

Props와 State 한눈에 비교하기 🔍

React의 렌더링

     먼저 React는 UI를 컴포넌트 단위라는 작은 단위로 나누어서 만든다.

     그렇기 때문에 React 렌더링은 이 컴포넌트를 보고 화면에 어떻게 보여줄지 결정한 다음, 그걸 실제로 DOM 적용하는 과정을 말한다.

그럼 React의 렌더링은 어떻게 이루어질까?

1. 컴포넌트 생성 → 가상 DOM 생성

    컴포넌트를 만들면, React는 이걸 가상 DOM으로 변환한다.

function Hello() {
  return <h1>Hello, React!</h1>;
}

이런 코드가 있다면, 화면에 h1 태그의 'Hello, React!'가 표출되어야 할 것이다.

하지만 React는 이를 바로 보여주지 않고, 내부적으로 아래와 같은 가상 DOM 객체를 만든다.

{
  type: 'h1',
  props: {
    children: 'Hello, React!'
  }
}

[개념 알고가기 🔍]
1) 가상 DOM(Virtual DOM)이란?
     가상 DOM은 실제 DOM(Document Object Model)의 가벼운 복사본으로,
     React는 이걸 메모리 상에서 유지하면서 UI 변화를 먼저 여기에 반영한다.
     즉, 실제 브라우저의 DOM을 직접 만지지 않고 모의 시뮬레이션을 해보는 느낌이다.
    (DOM은 HTML을 브라우저가 이해할 수 있게 구조화한 트리 구조의 객체들을 말한다.)

     실제 DOM은 느리기 때문에 DOM을 직접 바꾸는 작업은 브라우저에 많은 부담을 준다.
     그래서 React는 직접 DOM을 건드리지 않고가상 DOM이라는 중간 단계를 둔 것이다!

2) 가상 DOM이 실제 쓰이는 방식
    ① 컴포넌트를 처음 렌더링 할 때
         JSX를 기반으로 가상 DOM 트리를 만들고, 이걸 바탕으로 실제 DOM을 생성해서 브라우저에 보여준다.

    ② 컴포넌트가 업데이트 될 때
         변경된 내용을 반영한 새로운 가상 DOM을 만들고, 이전 가상 DOM과 새 가상 DOM을 비교(diffing)하여
         바뀐 부분만 찾아서 실제 DOM에 적용한다. (최소한의 조작)

2. 실제 DOM으로 변경 (초기 렌더링)

     처음 렌더링할 때는 React가 가상 DOM을 기반으로 실제 DOM을 생성해서 브라우저에 붙여준다.

     * 이걸 마운팅(Mounting)이라고 함.

3. 상태(state)나 props 변경 → 리렌더링 발생

const [count, setCount] = useState(0);

     위의 코드를 보면 버튼 클릭 시 setCount(1) 호출되고, React는 다시 컴포넌트를 재실행한다.

     그리고 새 가상 DOM을 만들어서 이전 가상 DOM과 비교를 시작한다.

4. Diffing (차이 비교)

     React는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 바뀐 부분만 추려낸다. (예: <span>0</span> → <span>1</span>)

     이 과정을 Diffing Algorithm이 처리한다. (효율적으로 트리 비교)

5. Reconciliation (진짜 DOM 업데이트)

     Diffing 결과를 바탕으로 실제 브라우저의 DOM에 필요한 부분만 업데이트한다.

     전체를 다시 그리지 않고, 바뀐 부분만 갱신하기 때문에 성능이 아주 좋고 부드럽다.

[요약]

컴포넌트 구현 → 가상 DOM 생성 → (초기) 실제 DOM으로 변환 → [상태 변경 발생] → 새 가상 DOM 생성
→ 이전과 비교 (Diffing) → 차이점만 실제 DOM에 반영 (Reconciliation) → 화면 업데이트 + 후처리 (useEffect 등)