클릭 카운터

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 23번째.

상태(State)를 변경하려면 보통 이벤트와 같은 트리거가 필요합니다. onClick을 사용하여 함수를 버튼에 연결하고 그 내부에서 상태를 변경하세요:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

루프를 따라 한 번의 클릭을 추적해 봅시다: 클릭 → setCount(count + 1) → React 리렌더링 → 단락에 새로운 수량이 표시됨. 화살표 함수를 주의해서 보세요: onClick={() => setCount(count + 1)}는 나중에 호출할 함수를 전달합니다. onClick={setCount(count + 1)}와 같이 작성하면 렌더링하는 동안 즉시 호출되므로 전형적인 버그가 발생합니다.

챌린지

쉬움

클래식 카운터를 생성하세요.

state 추가: count의 초깃값을 0으로 설정합니다 (import는 준비되어 있습니다).
id="count"인 span 내부에 현재 카운트를 표시합니다.
+1 버튼을 클릭할 때마다 카운트가 1씩 증가하도록 만드세요.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>