입력값 출력하기

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 29번째.

입력 텍스트가 state에 저장되면, 이를 어디에든 보여주는 것은 중괄호만 있으면 됩니다. 입력하는 동안 상자를 따라가는 인사말 예시입니다:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

삼항 연산자는 어색한 Hello, ! 대신 친근한 안내 문구로 빈 상자를 처리합니다. 이 입력 및 실시간 출력 패턴은 검색창, 회원가입 폼, 에디터 등 어디에서나 사용됩니다.

챌린지

쉬움

실시간 인사를 작성하세요.

빈 문자열로 시작하는 name 상태를 추가하고 input(id="name")을 제어 컴포넌트로 만드세요: value + onChange.
문단(id="echo")은 입력 상자가 비어 있을 때 Type your name을 표시하고, 이름이 입력되면 Hello, ...! 형태로 표시합니다 (예: Ada 입력 시 → Hello, Ada!).

직접 해보기

<!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>