HTML ํผ์ ๊ธฐ๋ณธ์ ์ผ๋ก submit ์ ์๋ก๊ณ ์นจ์ด ๋ฐ์ํด์. ํ์ง๋ง ๋ฆฌ์กํธ๋ SPA(Single Page Application)์ด๊ธฐ ๋๋ฌธ์, ์๋ก๊ณ ์นจ์ด ์ผ์ด๋๋ฉด ์ ๋ฉ๋๋ค.
์ด๋ฅผ ๋ง๊ธฐ ์ํด ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฐ๋ก preventDefault()
์์.
1. โ ๊ธฐ๋ณธ ๋์์ ๋ง๋ ์ด์
์๋์ฒ๋ผ ์์ฑํ๋ฉด, ํผ์ ์ ์ถํ์ ๋ ์ ์ฒด ํ์ด์ง๊ฐ ๋ฆฌ๋ก๋๋ฉ๋๋ค.
<form onSubmit={handleSubmit}>
<input />
<button type="submit">์ ์ถ</button>
</form>
๐ ์ด๋ handleSubmit ํจ์์์ e.preventDefault()
๋ฅผ ๊ผญ ํธ์ถํด์ค์ผ ํฉ๋๋ค.
2. โ ๊ธฐ๋ณธ ์์ ์ฝ๋
import { useState } from 'react';
function SignupForm() {
const [form, setForm] = useState({
name: '',
email: ''
});
function handleChange(e) {
const { name, value } = e.target;
setForm(prev => ({
...prev,
[name]: value
}));
}
function handleSubmit(e) {
e.preventDefault(); // ์๋ก๊ณ ์นจ ๋ฐฉ์ง
console.log('ํผ ์ ์ถ๋จ:', form);
alert(`${form.name}๋, ๊ฐ์
์ด ์๋ฃ๋์์ต๋๋ค!`);
}
return (
<form onSubmit={handleSubmit}>
<input
name="name"
value={form.name}
onChange={handleChange}
placeholder="์ด๋ฆ"
/>
<input
name="email"
value={form.email}
onChange={handleChange}
placeholder="์ด๋ฉ์ผ"
/>
<button type="submit">๊ฐ์
ํ๊ธฐ</button>
</form>
);
}
3. ๐ ํต์ฌ ์์ฝ
form
ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋onSubmit
์ด๋ฒคํธ๋ก ์ฒ๋ฆฌํฉ๋๋คe.preventDefault()
๋ฅผ ํธ์ถํด์ผ ํ์ด์ง๊ฐ ์๋ก๊ณ ์นจ๋์ง ์์์- ์ ์ถ ์ ์ ๋ ฅ๊ฐ์ ์ ์ฅํ๊ฑฐ๋ ์๋ฒ๋ก ๋ณด๋ผ ์ ์์ต๋๋ค
๐ผ๏ธ ํผ ์ ์ถ ์ฒ๋ฆฌ ํ๋ฆ๋
์ ๋ ฅ โ ์ํ ์ ์ฅ โ ์ ์ถ โ ๊ธฐ๋ณธ ๋์ ๋ง๊ธฐ โ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ํ๋ฆ์ ์๋ ๊ทธ๋ฆผ์ผ๋ก ์ ๋ฆฌํด๋ณด์ธ์.
