[React] useState

📝 리액트의 useState란?

리액트에서 컴포넌트의 **상태(state)**를 관리하는 데 사용하는 훅(Hook)인 useState는, 컴포넌트 내에서 동적으로 변할 수 있는 데이터를 다루기 위한 핵심 도구입니다. 상태란 컴포넌트가 가진 값으로, 사용자 입력, 버튼 클릭, 서버 응답 등 다양한 동작에 따라 값이 변할 수 있습니다.

🔑 useState 기본 사용법

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 상태 변수와 갱신 함수

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

📌 코드 설명

1. 초기값 설정: useState(0)에서 0은 상태의 초기값입니다. 여기서는 count라는 상태 변수의 값이 처음에 0으로 설정됩니다.
2. 상태 변수와 상태 갱신 함수: const [count, setCount] = useState(0);에서 count는 상태 변수이고, setCount는 상태를 업데이트하는 함수입니다.
3. 상태 갱신: 버튼을 클릭하면 onClick={() => setCount(count + 1)}가 실행되어 count의 값이 1씩 증가합니다. 이때, setCount 함수는 상태를 변경하고, 리액트는 화면을 자동으로 업데이트하여 변경된 값을 보여줍니다.
4. 자동 리렌더링: 상태가 바뀌면 리액트는 해당 상태를 사용하는 컴포넌트만 다시 렌더링하여, 성능을 최적화하고 효율적으로 화면을 갱신합니다.

🎯 useState의 특징

• 상태 값을 변경하면 리액트가 자동으로 해당 컴포넌트를 재렌더링합니다.
• useState는 상태 값뿐만 아니라, 이 값을 변경할 수 있는 함수도 반환합니다.
• 상태 변경은 비동기적으로 처리되며, 리액트는 최적화된 방식으로 화면을 갱신합니다.

💡 요약

useState는 리액트에서 상태를 관리하는 기본적인 방법으로, 컴포넌트의 데이터를 동적으로 관리할 수 있게 도와줍니다. 사용자가 상호작용할 때마다 상태 값을 바꾸고, 리액트는 이를 반영하여 화면을 업데이트합니다.