리액트 + 타입스크립트 기초 2단계: useState & 이벤트 처리

 

1. 상태 관리 (useState) 기본

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

✅ useState<number>(0) 처럼 제네릭으로 타입을 명시해주는 것이 중요합니다.

---

2. 문자열 입력 상태 관리

function NameInput() {
  const [name, setName] = useState<string>('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input value={name} onChange={handleChange} />
      <p>안녕하세요, {name}님!</p>
    </div>
  );
}

✅ e: React.ChangeEvent<HTMLInputElement> → 이벤트 타입 명시가 핵심입니다.

---

3. 객체 상태 다루기

interface User {
  name: string;
  age: number;
}

function UserForm() {
  const [user, setUser] = useState<User>({ name: '', age: 0 });

  return (
    <div>
      <input
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
      <input
        type="number"
        value={user.age}
        onChange={(e) =>
          setUser({ ...user, age: Number(e.target.value) })
        }
      />
      <p>{user.name}님의 나이는 {user.age}세입니다.</p>
    </div>
  );
}

---

4. 이벤트 핸들러 타입 정리

상황 타입

input 변경	React.ChangeEvent<HTMLInputElement>
form 제출	React.FormEvent<HTMLFormElement>
버튼 클릭	React.MouseEvent<HTMLButtonElement>

---

📌 요약

• useState<Type>()로 상태 타입 명시
• 이벤트 핸들러에도 React.XXXEvent<T> 타입 지정
• 객체나 배열 상태를 다룰 땐 불변성(immutability)을 유지해야 함 (...spread 사용)