지우기 버튼
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 31번째.
제어된 입력(controlled-input)의 강력한 장점은 다음과 같습니다. 상태(state)가 텍스트를 소유하므로 사용자뿐만 아니라 작성한 코드가 입력 상자를 변경할 수 있습니다. 어디서나 이를 초기화할 수 있습니다:
<button onClick={() => setName('')}>Clear</button>상태를 빈 문자열로 설정하면 value={name}이 항상 상태를 표시하기 때문에 다음 렌더링 시 상자가 자동으로 비워집니다. 비제어 입력을 사용하면 DOM에 직접 접근해야 하지만, 상태를 사용하면 세터 호출 한 번으로 가능합니다.
챌린지
중급메시지 작성기를 완성하세요.
message상태로input(id="message")을 제어하도록 만드세요.- 단락(
id="draft")에 초안을 표시하세요:Draft:텍스트 뒤에 메시지가 이어집니다. 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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.