[React] ๐Ÿ“จ React์—์„œ ํผ ์ œ์ถœ ์ฒ˜๋ฆฌํ•˜๊ธฐ โ€“ preventDefault()๋กœ ์ƒˆ๋กœ๊ณ ์นจ ๋ง‰๊ธฐ

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 =&gt; ({
      ...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()๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ๋˜์ง€ ์•Š์•„์š”
  • ์ œ์ถœ ์‹œ ์ž…๋ ฅ๊ฐ’์„ ์ €์žฅํ•˜๊ฑฐ๋‚˜ ์„œ๋ฒ„๋กœ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๐Ÿ–ผ๏ธ ํผ ์ œ์ถœ ์ฒ˜๋ฆฌ ํ๋ฆ„๋„

์ž…๋ ฅ โ†’ ์ƒํƒœ ์ €์žฅ โ†’ ์ œ์ถœ โ†’ ๊ธฐ๋ณธ ๋™์ž‘ ๋ง‰๊ธฐ โ†’ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ํ๋ฆ„์„ ์•„๋ž˜ ๊ทธ๋ฆผ์œผ๋กœ ์ •๋ฆฌํ•ด๋ณด์„ธ์š”.

๋‹ต๊ธ€ ๋‚จ๊ธฐ๊ธฐ

์ด๋ฉ”์ผ ์ฃผ์†Œ๋Š” ๊ณต๊ฐœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•„์ˆ˜ ํ•ญ๋ชฉ์€ *(์œผ)๋กœ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค