요약: 폼과 입력
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 32번째.
챌린지
중급단원 요약. 전체 제어 컴포넌트(controlled-input) 루프를 사용하여 닉네임 선택기를 작성합니다: 입력(type), 실시간 피드백 확인, 지우기(clear).
- 빈 문자열로 시작하는
nick상태(state)로 입력 필드(id="nick")를 제어 컴포넌트로 만드세요. - 문단(
id="meter")은N of 12형태로 표시해야 하며, 여기서 N은 닉네임의 현재 길이입니다 (예:Coddy입력 시 →5 of 12). 이 값은 상태로 저장하지 않고 파생되어야 합니다. id="clear"버튼은 닉네임과 입력 상자를 비웁니다.
직접 해보기
<!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>