React 플레이그라운드

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <button className="counter" onClick={() => setCount(count + 1)}>
            {label}: {count}
        </button>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Try useState']);
    const [text, setText] = useState('');

    const addTask = () => {
        if (!text.trim()) return;
        setTasks([...tasks, text.trim()]);
        console.log('Added:', text.trim());
        setText('');
    };

    return (
        <main className="app">
            <h1>Hello, React!</h1>
            <Counter label="Clicks" />
            <div className="row">
                <input
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addTask()}
                    placeholder="Add a task"
                />
                <button onClick={addTask}>Add</button>
            </div>
            <ul>
                {tasks.map((task, i) => (
                    <li key={i}>{task}</li>
                ))}
            </ul>
        </main>
    );
}