React에서 `useState` 이해하기

Source: Dev.to

useState가 해결하는 문제는 무엇인가요?

React 이전에는 화면에 무언가를 업데이트하려면 다음과 같은 작업이 필요했습니다:

• HTML 요소 찾기
• 직접 업데이트하기
• 다른 부분이 깨지지 않도록 확인하기

React는 이를 완전히 바꿉니다. 이렇게 말합니다:

“주어진 상태에 대해 UI가 어떻게 보여야 하는지 알려주면, 나는 업데이트를 처리할게요.”

이를 위해 React는 변하는 데이터를 저장할 방법이 필요합니다. 여기서 **useState**가 등장합니다.

useState

useState는 컴포넌트가 다음을 할 수 있게 해주는 React Hook입니다:

• 데이터를 저장
• 그 데이터를 업데이트
• 데이터가 변할 때 UI를 자동으로 다시 렌더링

쉽게 말해, useState는 React가 값을 기억하는 방법입니다.

import { useState } from "react";

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

  return (
    <>
      {count}
      setCount(count + 1)}>+
    </>
  );
}

const [count, setCount] = useState(0); 라인이 하는 일

1. 상태 변수 생성 → count
2. 그 변수를 업데이트할 함수 생성 → setCount
3. 초기값 설정 → 0

백엔드 코드에 비유하면 다음과 같습니다:

let count = 0;

function setCount(newValue) {
  count = newValue;
}

하지만 React는 UI도 자동으로 업데이트합니다.

직접 변이와의 차이점

❌ 이 코드는 올바르게 동작하지 않습니다:

count = count + 1;   // 직접 변이

✅ 이것이 올바른 방법입니다:

setCount(count + 1); // setter 사용

왜일까요?
React는 상태 변화를 setter 함수를 통해 추적합니다. 직접 변이를 하면 React를 우회하게 되므로 재렌더링이 일어나지 않습니다.

useState를 언제 사용해야 할까요?

다음과 같은 경우에 useState를 사용합니다:

• 사용자 상호작용에 따라 데이터가 변할 때
• 그 데이터가 변하면 UI도 업데이트되어야 할 때

전형적인 예시:

• 폼 입력
• 토글 스위치
• 카운터
• 로딩 상태
• 모달 열기/닫기

useState를 사용하면 컴포넌트가 데이터를 기억하고 변화에 반응할 수 있습니다. 이 개념을 먼저 마스터하면 나머지는 그 위에 쌓아올릴 수 있습니다.