[React] <form>

🔍 Form이란?

• HTML에서 사용자가 입력한 데이터를 서버로 전송하거나, 클라이언트에서 처리하기 위한 입력 인터페이스

---

✅ 기본 구조

<form action="/submit" method="POST">
  <input type="text" name="username" />
  <input type="submit" value="전송" />
</form>

• 이 구조에서 폼은 submit을 누르면 서버에 데이터를 전송
• 하지만 React에서는 기본 동작을 막고, JavaScript로 직접 처리하는 경우가 대부분

---

✅ React에서의 Form 사용

<form>을 통해 사용자의 입력을 받고 onSubmit 이벤트를 사용해 데이터를 처리

1. 폼 제출 시 기본 동작 차단 (e.preventDefault())
2. 입력값을 state로 관리하거나, DOM에서 직접 추출
3. 유효성 검사 후 데이터 처리
4. 필드 초기화 및 focus 재설정

---

✅ 코드 예시 분석

<form className="p-2" onSubmit={onFormSubmit}>
  <input
    className="border p-2 rounded"
    type="text"
    placeholder="할일을 입력해주세요."
    name="content"
  />
  <input className="border p-2 rounded ml-2" type="submit" value="등록" />
</form>

• 폼은 텍스트를 입력받아 onFormSubmit 함수를 실행함.

const onFormSubmit = (e) => {
  e.preventDefault(); // 기본 제출 동작 막기

  const form = e.target;
  form.content.value = form.content.value.trim(); // 공백 제거

  if (form.content.value.length == 0) {
    alert("할일을 입력해주세요.");
    form.content.focus();
    return;
  }

  addTodo(form.content.value); // 할일 추가
  form.content.value = "";     // 입력창 초기화
  form.content.focus();        // 다시 포커스
};

• e.preventDefault(): 기본 동작 차단 (새로고침 방지)
• form.content.value: DOM을 통해 입력값에 접근
• form.content.focus(): 사용자 경험 향상을 위한 포커스 제어

---

💻 예제: 할 일 리스트 추가, 삭제

https://codepen.io/joyewon0705/pen/jEPYqEY