요약: 상태와 이벤트
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 27번째.
챌린지
중급단원 요약. 책상 스탠드 제어판 만들기: 하나의 컴포넌트 안에서 나란히 작동하는 카운터와 토글 버튼입니다.
- 두 개의 독립적인 상태를 추가합니다:
0으로 시작하는brightness와false로 시작하는on. id="level"인 span에 밝기를 표시합니다.id="brighter"인 button은 클릭할 때마다 1씩 더합니다.id="power"인 button은on을 토글합니다. 켜져 있을 때id="status"및Lamp is on텍스트를 가진<p>를 표시합니다. 그렇지 않으면null을 render합니다.
직접 해보기
<!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>