리액트에서 텍스트 입력 값 동적으로 업데이트하는 방법

 

React의 useState를 활용해 사용자가 입력한 텍스트를 실시간으로 화면에 반영할 수 있다.

 

코드 설명

1. useState로 상태 선언

• text라는 상태 변수와 이를 업데이트 하는 setText함수 생성

2. onChange이벤트 핸들러

• <input> 요소에서 발생하는 입력 이벤트를 처리해 상태를 업데이트

3. 출력

• 입력한 텍스트를 <p> 태그에 즉시 반영

---

 

사용예시

function TextInputExample() {
  const [text, setText] = useState("");

  const handleChange = (e) => setText(e.target.value);

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력 값: {text}</p>
    </div>
  );
}