12. Form(입력폼)
1. Form이란?
Form은 사용자에게 데이터를 입력받는 화면입니다.
예를 들어
로그인
회원가입
예약하기
문의하기
게시글 작성
모두 Form입니다.
React에서는 Form 데이터를 State(useState) 로 관리합니다.
2. HTML Form
기존 HTML에서는
<form>
<input>
<button>
</form>
처럼 작성합니다.
사용자가 Submit을 누르면
페이지가 새로고침됩니다.
3. React Form
React에서는
const [name,setName]=useState("");
처럼 State를 만들어 관리합니다.
입력창
<input
value={name}
onChange={(e)=>setName(e.target.value)}
/>
입력할 때마다
State가 변경됩니다.
4. Controlled Component
React에서는 대부분
Controlled Component를 사용합니다.
의미
input
↓
State
↓
화면
즉
State가 입력창을 관리합니다.
5. value
<input
value={name}
/>
value는
현재 입력창에 보여지는 값입니다.
예를 들어
const [name,setName]=useState("홍길동");
이라면
입력창에는
홍길동
이 표시됩니다.
6. onChange
사용자가 입력하면
onChange
가 실행됩니다.
예제
<input
value={name}
onChange={(e)=>{
setName(
e.target.value
)
}}
/>
입력
홍
↓
State 변경
홍
↓
입력
홍길
↓
State 변경
홍길
계속 반복됩니다.
7. 여러 입력 관리
실무에서는 객체를 많이 사용합니다.
const [form,setForm]=useState({
name:"",
phone:"",
course:""
});
8. handleChange()
const handleChange=(e)=>{
const {name,value}=e.target;
setForm({
...form,
[name]:value
});
}
이 함수 하나로
모든 입력창을 처리할 수 있습니다.
9. input 연결
<input
name="name"
value={form.name}
onChange={handleChange}
/>
전화번호
<input
name="phone"
value={form.phone}
onChange={handleChange}
/>
코스
<select
name="course"
value={form.course}
onChange={handleChange}
>
<option>
EAST
</option>
</select>
handleChange 하나만 사용합니다.
10. textarea
문의하기
<textarea
name="memo"
value={form.memo}
onChange={handleChange}
/>
11. select
예약 코스 선택
<select
name="course"
value={form.course}
onChange={handleChange}
>
<option>
EAST
</option>
<option>
WEST
</option>
<option>
VALLEY
</option>
</select>
12. onSubmit
폼 제출
<form
onSubmit={submit}
>
함수
const submit=(e)=>{
e.preventDefault();
}
React에서는
페이지 새로고침을 막기 위해
거의 항상
e.preventDefault();
를 사용합니다.
13. 유효성 검사
예제
if(
form.name===""
){
alert(
"이름 입력"
);
return;
}
또는
if(
!form.phone
){
alert(
"전화번호 입력"
);
}
14. 예약 성공
const [success,setSuccess]=useState(false);
예약
setSuccess(true);
화면
{
success
?
<p>
예약 완료
</p>
:
<form>
...
</form>
}
15. 동부산CC 예제
const [form,setForm]=useState({
name:"",
phone:"",
course:"EAST COURSE",
date:"",
people:"4"
});
입력
↓
handleChange()
↓
State 변경
↓
화면 변경
↓
예약
↓
onSubmit()
↓
예약 완료
16. localStorage 저장
예약 완료
localStorage.setItem(
"reserve",
JSON.stringify(form)
);
다시 불러오기
useEffect(()=>{
const data=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
},[]);
17. React 실행 흐름
사용자 입력
↓
onChange
↓
handleChange
↓
State 변경
↓
React 렌더링
↓
화면 변경
↓
Submit
↓
onSubmit
↓
예약 완료
18. Form에서 많이 사용하는 이벤트
이벤트 설명
onChange 입력 변경
onSubmit 제출
onFocus 입력 시작
onBlur 입력 종료
onKeyDown 키 입력
19. Form에서 많이 사용하는 태그
태그 용도
input 한 줄 입력
textarea 여러 줄 입력
select 목록 선택
option 선택 항목
button 버튼
정리
React에서는 Form 데이터를 State(useState) 로 관리합니다.
입력창은 value와 onChange를 연결하여 Controlled Component 방식으로 구현하며,
폼 제출은 onSubmit과 preventDefault()를 사용합니다.
실무에서는 여러 입력값을 하나의 객체(State)로 관리하고 handleChange 함수 하나로 처리하는 방식이 가장 많이 사용됩니다.
동부산CC 프로젝트에서는 예약하기, 문의하기, 회원가입 등의 기능을 모두 이러한 Form 구조로 구현할 수 있습니다.
1. Form이란?
Form은 사용자에게 데이터를 입력받는 화면입니다.
예를 들어
로그인
회원가입
예약하기
문의하기
게시글 작성
모두 Form입니다.
React에서는 Form 데이터를 State(useState) 로 관리합니다.
2. HTML Form
기존 HTML에서는
<form>
<input>
<button>
</form>
처럼 작성합니다.
사용자가 Submit을 누르면
페이지가 새로고침됩니다.
3. React Form
React에서는
const [name,setName]=useState("");
처럼 State를 만들어 관리합니다.
입력창
<input
value={name}
onChange={(e)=>setName(e.target.value)}
/>
입력할 때마다
State가 변경됩니다.
4. Controlled Component
React에서는 대부분
Controlled Component를 사용합니다.
의미
input
↓
State
↓
화면
즉
State가 입력창을 관리합니다.
5. value
<input
value={name}
/>
value는
현재 입력창에 보여지는 값입니다.
예를 들어
const [name,setName]=useState("홍길동");
이라면
입력창에는
홍길동
이 표시됩니다.
6. onChange
사용자가 입력하면
onChange
가 실행됩니다.
예제
<input
value={name}
onChange={(e)=>{
setName(
e.target.value
)
}}
/>
입력
홍
↓
State 변경
홍
↓
입력
홍길
↓
State 변경
홍길
계속 반복됩니다.
7. 여러 입력 관리
실무에서는 객체를 많이 사용합니다.
const [form,setForm]=useState({
name:"",
phone:"",
course:""
});
8. handleChange()
const handleChange=(e)=>{
const {name,value}=e.target;
setForm({
...form,
[name]:value
});
}
이 함수 하나로
모든 입력창을 처리할 수 있습니다.
9. input 연결
<input
name="name"
value={form.name}
onChange={handleChange}
/>
전화번호
<input
name="phone"
value={form.phone}
onChange={handleChange}
/>
코스
<select
name="course"
value={form.course}
onChange={handleChange}
>
<option>
EAST
</option>
</select>
handleChange 하나만 사용합니다.
10. textarea
문의하기
<textarea
name="memo"
value={form.memo}
onChange={handleChange}
/>
11. select
예약 코스 선택
<select
name="course"
value={form.course}
onChange={handleChange}
>
<option>
EAST
</option>
<option>
WEST
</option>
<option>
VALLEY
</option>
</select>
12. onSubmit
폼 제출
<form
onSubmit={submit}
>
함수
const submit=(e)=>{
e.preventDefault();
}
React에서는
페이지 새로고침을 막기 위해
거의 항상
e.preventDefault();
를 사용합니다.
13. 유효성 검사
예제
if(
form.name===""
){
alert(
"이름 입력"
);
return;
}
또는
if(
!form.phone
){
alert(
"전화번호 입력"
);
}
14. 예약 성공
const [success,setSuccess]=useState(false);
예약
setSuccess(true);
화면
{
success
?
<p>
예약 완료
</p>
:
<form>
...
</form>
}
15. 동부산CC 예제
const [form,setForm]=useState({
name:"",
phone:"",
course:"EAST COURSE",
date:"",
people:"4"
});
입력
↓
handleChange()
↓
State 변경
↓
화면 변경
↓
예약
↓
onSubmit()
↓
예약 완료
16. localStorage 저장
예약 완료
localStorage.setItem(
"reserve",
JSON.stringify(form)
);
다시 불러오기
useEffect(()=>{
const data=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
},[]);
17. React 실행 흐름
사용자 입력
↓
onChange
↓
handleChange
↓
State 변경
↓
React 렌더링
↓
화면 변경
↓
Submit
↓
onSubmit
↓
예약 완료
18. Form에서 많이 사용하는 이벤트
이벤트 설명
onChange 입력 변경
onSubmit 제출
onFocus 입력 시작
onBlur 입력 종료
onKeyDown 키 입력
19. Form에서 많이 사용하는 태그
태그 용도
input 한 줄 입력
textarea 여러 줄 입력
select 목록 선택
option 선택 항목
button 버튼
정리
React에서는 Form 데이터를 State(useState) 로 관리합니다.
입력창은 value와 onChange를 연결하여 Controlled Component 방식으로 구현하며,
폼 제출은 onSubmit과 preventDefault()를 사용합니다.
실무에서는 여러 입력값을 하나의 객체(State)로 관리하고 handleChange 함수 하나로 처리하는 방식이 가장 많이 사용됩니다.
동부산CC 프로젝트에서는 예약하기, 문의하기, 회원가입 등의 기능을 모두 이러한 Form 구조로 구현할 수 있습니다.
#12. Form(입력폼)