이벤트 처리 — 클릭, 입력, 폼 다루기

// HTML
<button onclick="handleClick()">클릭</button>

// React (camelCase, 함수 참조)
<button onClick={handleClick}>클릭</button>

import { MouseEvent } from "react";

function ButtonExample() {
    // 이벤트 객체 없이
    function handleSimpleClick() {
        console.log("클릭됨");
    }

    // 이벤트 객체 사용
    function handleClick(e: MouseEvent<HTMLButtonElement>) {
        console.log("클릭 위치:", e.clientX, e.clientY);
        e.preventDefault();  // 기본 동작 방지
    }

    // 인라인 + 추가 데이터
    return (
        <div>
            <button onClick={handleSimpleClick}>단순 클릭</button>
            <button onClick={handleClick}>이벤트 사용</button>
            {[1, 2, 3].map(id => (
                <button key={id} onClick={() => console.log(id)}>
                    항목 {id}
                </button>
            ))}
        </div>
    );
}

import { ChangeEvent, useState } from "react";

function InputExample() {
    const [value, setValue] = useState("");

    function handleChange(e: ChangeEvent<HTMLInputElement>) {
        setValue(e.target.value);
    }

    return (
        <div>
            <input
                type="text"
                value={value}          // 제어 컴포넌트
                onChange={handleChange}
                placeholder="입력하세요"
            />
            <p>입력값: {value}</p>
            <p>글자 수: {value.length}</p>
        </div>
    );
}

// 제어 컴포넌트: React가 상태 관리 (권장)
<input value={value} onChange={e => setValue(e.target.value)} />

// 비제어 컴포넌트: DOM이 상태 관리
const inputRef = useRef<HTMLInputElement>(null);
<input ref={inputRef} defaultValue="초기값" />
// 값 읽기: inputRef.current?.value

import { FormEvent, useState } from "react";

interface LoginForm {
    email: string;
    password: string;
}

function LoginForm() {
    const [form, setForm] = useState<LoginForm>({ email: "", password: "" });
    const [error, setError] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState(false);

    function handleChange(e: ChangeEvent<HTMLInputElement>) {
        const { name, value } = e.target;
        setForm(prev => ({ ...prev, [name]: value }));
    }

    async function handleSubmit(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();  // 페이지 새로고침 방지

        if (!form.email || !form.password) {
            setError("이메일과 비밀번호를 입력하세요.");
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            await login(form);
            alert("로그인 성공!");
        } catch (err) {
            setError("로그인에 실패했습니다.");
        } finally {
            setIsLoading(false);
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="email"
                type="email"
                value={form.email}
                onChange={handleChange}
                placeholder="이메일"
            />
            <input
                name="password"
                type="password"
                value={form.password}
                onChange={handleChange}
                placeholder="비밀번호"
            />
            {error && <p className="error">{error}</p>}
            <button type="submit" disabled={isLoading}>
                {isLoading ? "로그인 중..." : "로그인"}
            </button>
        </form>
    );
}

import { KeyboardEvent } from "react";

function SearchInput() {
    const [query, setQuery] = useState("");

    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
        if (e.key === "Enter") {
            performSearch(query);
        }
        if (e.key === "Escape") {
            setQuery("");
        }
    }

    return (
        <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Enter로 검색"
        />
    );
}