useState

 

🎯 useState란 무엇일까요?

useState는 컴포넌트 안에서 상태(데이터)를 저장하고 관리하는 기능이에요.
여기서 **상태(state)**란 무엇이냐면:

• 화면에 보여지는 데이터
• 버튼을 눌렀을 때 바뀌는 값

간단히 말해, 변경되면 화면이 다시 그려져야 하는 값을 상태라고 해요.
이 상태를 React에서 관리할 때 **useState**를 사용합니다.

 

🧩 왜 상태가 필요할까요?

예를 들어, 여러분이 간단한 카운터 앱을 만든다고 상상해 보세요:

• 버튼을 누를 때마다 숫자가 1씩 증가하거나 감소해야 해요.
• 이 숫자를 React에서는 **상태(state)**로 관리해야 화면에 반영될 수 있어요.

 

🛠️ useState 기본 사용법

useState를 사용하면 이렇게 코드를 작성할 수 있어요:

import React, { useState } from "react";

function Counter() {
  // useState를 사용해서 상태 만들기
  const [count, setCount] = useState(0); // 초기값: 0

  const increment = () => {
    setCount(count + 1); // count를 1 증가
  };

  const decrement = () => {
    setCount(count - 1); // count를 1 감소
  };

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

export default Counter;

 

🔍 코드 설명

1. useState 선언

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

 

• count: 상태의 값이에요. 처음 값은 0으로 설정했어요.
• setCount: 상태를 변경하는 함수예요. 이 함수를 호출하면 화면이 다시 그려집니다.
• useState(0): 상태의 초기값을 0으로 설정했어요.

2. 상태 변경하기

• setCount(count + 1)은 count 값을 1 증가시켜요.
• React는 상태가 변경되면 화면을 자동으로 다시 렌더링해서 최신 값을 보여줘요.

3. 화면에 상태 보여주기

<h1>카운터: {count}</h1> 

• 상태 값인 count를 화면에 표시해줍니다.

4. 버튼 클릭 이벤트

• 버튼을 클릭하면 increment나 decrement 함수가 실행되면서 상태가 변경돼요.

 

🏠 useState를 집안일로 비유하기

React의 상태 관리는 마치 집안 청소와 비슷해요. 🧹

1. 현재 상태를 기억하는 곳 → 방
   • React 컴포넌트는 상태를 방처럼 저장하고 관리해요.
2. 상태를 바꿀 때 → 방 청소
   • setCount를 사용하면 상태를 바꿀 수 있어요.
   • 청소를 하면 방이 깨끗해지듯, 상태가 바뀌면 화면도 바뀌어요.
3. React는 자동으로 방을 다시 보여줘요.
   • 상태가 바뀔 때 React는 화면을 새롭게 보여줍니다.

 

💡 useState를 사용할 때 꼭 기억할 점

1. setState 함수로만 상태를 변경할 수 있어요.
   • count = count + 1처럼 직접 변경하면 화면이 바뀌지 않아요.
   • 반드시 **setCount()**를 사용해야 해요!
2. 초기값을 설정해야 해요.
   • useState(0)처럼 상태의 초기값을 정해줘야 돼요.
3. 상태가 바뀌면 화면이 자동으로 업데이트돼요.
   • 이게 React의 큰 장점이에요. 😊

 

🧩 다른 예제: 입력창 상태 관리하기

useState를 사용하면 입력창의 내용을 실시간으로 관리할 수 있어요.

import React, { useState } from "react";

function NameInput() {
  const [name, setName] = useState(""); // 초기값은 빈 문자열

  const handleChange = (e) => {
    setName(e.target.value); // 입력값을 상태로 저장
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="이름을 입력하세요"
      />
      <p>당신의 이름: {name}</p>
    </div>
  );
}

export default NameInput;

🔍 코드 설명

1. useState("")
   • 상태 name의 초기값을 빈 문자열 ""로 설정했어요.
2. 입력값을 상태로 업데이트
   • onChange 이벤트를 사용해서 입력창의 값을 상태에 저장해요.
3. 화면에 상태 표시하기
   • 입력한 값이 바로 화면에 표시됩니다.

 

🚀 정리하자면!

useState는 상태를 저장하고 업데이트하는 React의 기본 훅이에요.

• 화면에 보여줄 데이터를 관리할 때 사용해요.
• 상태를 바꾸는 함수(setState)를 호출하면 화면이 자동으로 다시 업데이트돼요.