[React] state와 리렌더링

✅ 왜 state가 필요한가?

HTML이나 React에서 UI는 기본적으로 정적인 구조이다.

그런데 UI는 사용자 입력, 네트워크 응답, 타이머 등 외부 자극에 따라 바뀌어야 한다.

• 버튼을 클릭하면 숫자가 증가해야 함
• 로그인하면 사용자 이름이 보여야 함
• 서버에서 데이터를 받아오면 리스트가 바뀌어야 함

 

수동 렌더 방식

상태가 바뀔 때마다 직접 함수를 호출하여 수동으로 렌더링을 할 수도 있다.

let count = 0;

function handleClick() {
  count++;
  document.getElementById("value").textContent = count;
}

이 방식을 이용하면 렌더 타이밍을 판단하고 값을 추적해야한다. 또한 DOM을 수동으로 조작한다.
만약 count에 의존하는 다른 UI 요소나 로직이 있으면, 동기화가 누락되어 버그가 발생할 수 있다.

 

React의 state를 이용하면 count라는 상태 하나만 관리하면 React가 UI를 자동으로 업데이트해주기 때문에 안전하고 효율적이다.

 

✅ Vanilla JS의 DOM 수정과 React의 가상 DOM 비교

브라우저가 DOM을 렌더링하는 5단계

일반적으로 브라우저는 HTML/CSS/JS를 받아 아래 순서대로 화면을 구성한다.

1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 트리 생성
3. DOM + CSSOM → 렌더 트리(Render Tree) 생성
4. Layout (Reflow) → 각 요소의 위치, 크기 계산
5. Paint (Repaint) → 실제 픽셀을 화면에 칠함

이걸 합쳐서 렌더링 파이프라인 또는 렌더 트리 생성 및 화면 출력이라고 부른다.

 

일반 JavaScript (Vanilla JS)의 문제점

• DOM을 직접 수정할 때마다 이 파이프라인이 전체 혹은 일부 재실행된다.
• 특히 Layout & Paint 단계가 빈번하게 발생하면 성능 저하가 생기고, 애니메이션, 클릭 반응이 느려지는 렌더링 병목(bottleneck)이 생긴다.

document.getElementById("item").style.width = "200px";
document.getElementById("item").style.height = "300px";

두 번 모두 layout & paint가 발생한다.

 

React는 어떻게 최적화할까?

React는 Virtual DOM(가상 DOM)이라는 구조를 도입해 이 문제를 해결한다.

 

가상 DOM

• 실제 DOM을 메모리상에 복제해 만든 가벼운 트리 구조
• 상태(state)가 바뀌면, React는 가상 DOM을 먼저 업데이트함
• 이전 가상 DOM과 변경된 가상 DOM을 비교해서 차이점만 계산(diffing)

변경점만 실제 DOM에 반영

• 계산이 끝나면 가장 최소한의 DOM 수정만 적용(batch update / 일괄 처리)
• 렌더링 횟수 최소화 → 성능 최적화 효과

 

✅ state

state는 컴포넌트 안에서 동적으로 변하는 값을 저장하고 관리하기 위해 사용한다.
컴포넌트는 state가 바뀌면 자동으로 다시 렌더링되며, 사용자 상호작용, 비동기 응답 등 다양한 이유로 state가 변경될 수 있다.

useState 훅

함수형 컴포넌트에서 state를 사용하기 위해 React가 제공하는 훅이다.

const [state, setState] = useState(initialValue);

• initialValue: state의 초기값. 숫자, 문자열, 객체, 배열, 함수 등 어떤 자료형도 가능함.
• state: 현재 상태 값
• setState: 상태를 변경하는 함수 (modifier)

 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <span>현재 값: {count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

 

 

state를 변경하는 2가지 방식

직접 할당 방식

setCount(count + 1);

• count가 현재 클로저 안에 있는 값이라면, 이걸 기반으로 새 값을 직접 계산해서 넣는 방식
• 상태 업데이트가 비동기적이기 때문에, 여러 번 연속 호출 시 값 꼬일 수 있음
• 새로운 값이 기존 상태와 무관할 때 사용

 

함수형 업데이트 방식

setCount(prev => prev + 1);

• 함수의 첫 번째 인자 prev는 현재 상태 값을 뜻함
• 이 방식은 React가 최신 상태 값을 자동으로 넣어주기 때문에 여러 번 연속 호출하거나 비동기 상황에서도 안정적임
• 기존 상태를 기반으로 계산/변형할 때 사용

 

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

<button onClick={() => setCount(count + 1)}>+1</button>

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

<button onClick={() => setCount(prev => prev + 1)}>+1</button>