글자 수 카운터
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 30번째.
텍스트가 상태(state)이기 때문에 매 렌더링 시마다 텍스트를 계산할 수 있습니다. 트위터 스타일의 글자 수 카운터는 한 줄이면 됩니다:
<p>{message.length} characters</p>추가적인 상태가 필요하지 않습니다: message.length는 기존 상태에서 파생되며, 키를 누를 때마다 자동으로 다시 계산됩니다. 기본 원칙: 이미 가지고 있는 상태로부터 계산할 수 있다면, 그것을 상태에 저장하지 마세요.
챌린지
쉬움실시간 글자 수 측정 기능이 있는 바이오 상자를 생성하세요.
- 입력 필드(
id="bio")를bio상태로 제어되도록 만드세요 (빈 값으로 시작). - 단락(
id="length")에는N characters를 표시합니다. 여기서 N은 현재 bio의 길이입니다 (저장하지 않고 계산함).
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.