[리액트] Form

이지민·2025년 5월 30일

공부기록 리액트

리액트

목록 보기

13/15

1. Form이란?

사용자가 선택해야 하는 모든 것을 의미
사용자로부터 입력을 받기 위해 사용

HTML Form vs React Form

React는 컴포넌트 내부에서 state를 통해 데이터를 관리
HTML Form은 Element 내부에 각각의 state가 존재
HTML Form 예시

<form>
  <label>
    이름:
    <input type = "text" name = "name" />
  </label>
  <button type = "submit">제출</button>
</form>

<!-- HTML Form은 자바스크립트 코드를 통해 
사용자가 입력한 값에 접근하기에는 불편한 구조 --!>

2. Controlled Component (제어 컴포넌트)

사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트
값이 리액트의 통제(접근 및 제어)를 받는 Input Form Element

HTML Form은 각 element가 자체적으로 state를 관리
→ 자바스크립트 코드를 통해 각각의 값에 접근하여 제어하기 어려움
Controlled Component는 모든 데이터를 state에서 관리, state값을 변경시 setState()함수를 사용
→ React에서 모든 값을 통제할 수 있음.
함수 컴포넌트에서는 useState() hook을 사용하여 state를 관리

HTML Form 예시를 Controlled Component로 변환한 코드

function NameForm(props){
	const [value, setValue] = useState('');
	
	const handleChange = (event) => {
		setValue(event.target.value);
	}
	
	const handleSubmit = (event) =>{
		alert('입력한 이름: ' + value);
		event.preventDefault();
	}

	return(
		<form onSubmit = {handleSubmit}>
			<label>
				이름:
				<input type="text" value={value} onChange={handleChange} />	
			</label>
			<button type = "submit">제출</button>
		</form>
	)
}

Controlled Component를 사용하면 입력 값이 React Component의 state를 통해 관리된다.
→ 사용자의 입력을 직접적으로 제어할 수 있음( == 입력 양식의 값을 원하는 대로 조정할 수 있음)
- 입력 양식의 초기값을 원하는 대로 넣어줄 수 있으며,
- 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있음.

Controlled Component를 이용해 사용자의 입력을 원하는 대로 조정하는 예시

// 모든 입력값을 대문자로 변환
const handleChange = (event) => {
		setValue(event.target.value.toUpperCase());
}

// 모든 입력값을 소문자로 변환
const handleChange = (event) => {
		setValue(event.target.value.toLowerCase());
}

// 모든 입력값에서 공백 제거
const handleChange = (event) => {
		setValue(event.target.value.Trim());
}

3. 다양한 Forms

Textarea 태그

여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그

Select 태그

Drop-down 목록을 보여주기 위한 HTML 태그

input, textarea, select 태그 한눈에 보기

input, textarea, select 태그를 Controlled Component로 만드는 방법은 모두 비슷함.
- value attribute를 통해 state 값을 전달하고,
- 값을 변경할 때는 onChange에서 setValue()를 사용하여 값을 업데이트
- 위 방식은 실제로 사용자 입력을 받는 컴포넌트를 만들 때 사용!

File input 태그

디바이스의 저장 장치로부터 하나 or 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그
File input 태그는 값이 읽기 전용이기 때문에, React의 통제를 받지 않는 UnControlled Component로 분류된다.

Multiple Inputs (하나의 컴포넌트에서 여러 개의 입력을 다루기)

여러 개의 state를 선언하여 각각의 입력에 대해 사용하면 된다.

Multiple Inputs 예시
- 아래의 함수 컴포넌트는 아침 식사 여부와 방문객 수가 별도의 useState() hook로 선언되어 있음
- 함수 컴포넌트에서는 각 state의 변수마다 set 함수가 따로 존재
  → 각각의 set 함수를 사용하여 값을 구현 및 업데이트한다.

Input Null Value

value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶을 때?
→ 값에 undefined 혹은 null을 넣어줌.
Input Null Value 예시
- 초기값이 hi로 정해진 값을 바꿀 수 없는 입력 불가 상태 → 1초후에 value가 null인 input 태그가 렌더링 되면서 입력 가능한 상태로 바뀜.