단계별로 세기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 24번째.
setter는 어떤 새로운 값이든 받을 수 있습니다. 1을 더하는 것에만 국한되지 않습니다. 5를 더하거나, 두 배로 늘리거나, 0으로 재설정할 수 있습니다:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);서로 다른 금액을 위한 버튼들은 그저 동일한 상태에 대한 서로 다른 핸들러일 뿐입니다:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
챌린지
쉬움게임에서 코인당 5점을 줍니다.
- 0으로 시작하는
points상태를 추가하고id="points"인 span에 표시하세요. Collect coin버튼(id="coin")은 클릭할 때마다 5점씩 추가합니다.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.