처음 만난 리액트 문서
11.3 textarea 태그
<textarea>태그는 여러줄에 걸쳐서 나올정도로 긴 텍스트를 입력받기 위한 HTML 태그입니다. HTML에서는 아래와 같이 텍스트를 태그가 감싸는 형태로 사용합니다. 즉, <textarea>태그의 children으로 텍스트가 들어가는 형태입니다.
<textarea>
안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.
</textarea>
반면에 리액트에서는 <textarea>태그에 value라는 속성을 사용하여 텍스트를 표시합니다. 이 방식은 위에서 배운 Controlled Component방식인데, 값을 컴포넌트의 state를 사용해서 다룰 수 있습니다. 아래 예시 코드를 한 번 보도록 하겠습니다.
function RequestForm(props) {
const [value, setValue] = useState('요청사항을 입력하세요.');
const handleChange = (event) => {
setValue(event.target.value);
}
const handleSubmit = (event) => {
alert('입력한 요청사항: ' + value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
요청사항:
<textarea value={value} onChange={handleChange} />
</label>
<button type="submit">제출</button>
</form>
)
}
위 코드는 고객들로부터 요청사항을 입력받기 위한 RequestForm이라는 컴포넌트입니다. state로는 value가 있고, 이 값을 <textarea>태그의 value라는 속성에 넣어줌으로써 화면에 나타나게 됩니다. 여기에서는 value를 선언할 때 초기값을 넣어줬기 때문에, 처음 렌더링이 될 때부터 <textarea>에 텍스트가 나타나게 됩니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page