# useState를 사용해야만 렌더링되는 이유

React에서 useState를 사용해야만 컴포넌트가 다시 렌더링되는 이유는 React의 렌더링 메커니즘과 밀접한 관련이 있습니다. 이를 이해하기 위해 몇 가지 핵심 개념을 살펴보겠습니다.

1. React의 렌더링 원칙

React는 다음 두 가지 경우에 컴포넌트를 다시 렌더링합니다:

1. 컴포넌트의 state가 변경될 때
2. 부모 컴포넌트가 리렌더링될 때

2. 일반 변수 vs useState

일반 변수를 사용하여 상태를 관리하려고 하면, React는 이 변화를 감지하지 못합니다.

function Counter() {
  let count = 0;  // 일반 변수

  const increment = () => {
    count++;  // 이 변경은 리렌더링을 트리거하지 않습니다
    console.log(count);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위 예제에서 버튼을 클릭해도 화면에 표시되는 숫자는 변하지 않습니다. 콘솔에서는 숫자가 증가하는 것을 볼 수 있지만, React는 이 변화를 인식하지 못해 컴포넌트를 다시 렌더링하지 않습니다.

3. useState의 역할

useState 훅은 두 가지 중요한 역할을 합니다:

1. 상태 값을 저장합니다.
2. 상태 업데이트 함수를 제공하여 React에게 상태 변경을 알립니다.

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

  const increment = () => {
    setCount(count + 1);  // 이 호출은 리렌더링을 트리거합니다
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

이 예제에서 setCount를 호출하면 React는 상태 변경을 인식하고 컴포넌트를 다시 렌더링합니다.

4. 왜 useState인가?

1. 상태 추적: React는 useState를 통해 관리되는 상태를 추적할 수 있습니다.
2. 최적화: React는 어떤 상태가 변경되었는지 정확히 알기 때문에, 필요한 부분만 효율적으로 업데이트할 수 있습니다.
3. 일관성: 함수형 컴포넌트에서 상태를 관리하는 표준화된 방법을 제공합니다.
4. 비동기 업데이트 처리: React는 상태 업데이트를 비동기적으로 처리하며, useState는 이를 올바르게 다룰 수 있게 해줍니다.

결론

useState를 사용하면 React의 상태 관리 시스템과 연동되어 컴포넌트의 상태 변화를 정확히 추적하고 필요할 때 리렌더링을 트리거할 수 있습니다. 이는 React 애플리케이션의 성능과 일관성을 유지하는 데 중요한 역할을 합니다.