form action 과 onSubmit
58
작성한 질문수 2
진행중에 form 에 action 과 onSubmit 을 섞어서 사용하셨는데
form action 과 onSubmit 을
어느상황에 어떤걸 선택해서 사용해야하는 기준이 있을까요? 어떤 기준에 따라 왜 사용하는지 정리가 안되서요 🤔
답변 2
1
안녕하세요!
강의에서 action과 onSubmit을 함께 사용한 이유는,
하나의 애플리케이션을 만들어가는 과정에서 다양한 구현 방법이 존재한다는 점을 보여드리기 위함입니다.
실제 애플리케이션을 개발하실 때는action만 사용하셔도 되고, onSubmit만 사용하셔도 됩니다. 😊
0
안녕하세요, 인프런 AI 인턴입니다. you.na.joo0님.
form 요소의 action 속성과 onSubmit 이벤트 핸들러는 HTML과 JavaScript에서 각각 다른 역할을 합니다. 이를 이해하시면 언제 무엇을 사용할지를 더 잘 판단할 수 있습니다.
form action과 onSubmit의 차이점:
form action 속성:
- 기본 동작: form의 데이터를 서버의 특정 URL로 전송할 때 사용됩니다. 보통 서버 쪽에서 데이터를 받기 위한 URL을 지정합니다.
- 페이지 리다이렉션: form이 제출되면 페이지가 리다이렉트되면서 URL로 데이터가 전송되기 때문에, 이 경우 화면이 새로고침됩니다.
- 기본 동작: form의 데이터를 서버의 특정 URL로 전송할 때 사용됩니다. 보통 서버 쪽에서 데이터를 받기 위한 URL을 지정합니다.
onSubmit 이벤트 핸들러:
- JavaScript 처리: JavaScript를 사용하여 form 제출 시 추가 작업을 수행할 수 있습니다. 예를 들어, 유효성 검사, AJAX 요청으로 서버에 데이터 전송 등입니다.
- 페이지 새로고침 방지:
e.preventDefault()를 사용하여 기본 동작인 페이지 새로고침을 막을 수 있습니다. 이는 SPA(Single Page Application)와 같이 동적인 웹 어플리케이션에서 주로 사용됩니다.
- JavaScript 처리: JavaScript를 사용하여 form 제출 시 추가 작업을 수행할 수 있습니다. 예를 들어, 유효성 검사, AJAX 요청으로 서버에 데이터 전송 등입니다.
어떤 상황에 각각 사용해야 하는지:
- form action은 정적인 사이트나 서버로 데이터를 그대로 제출할 때 주로 사용됩니다. 데이터 제출 후 서버에 의해 즉시 화면 전환이 이뤄져야 할 경우 유용합니다.
- onSubmit 이벤트 핸들러는 React와 같은 프런트엔드 라이브러리에서 사용자 입력을 처리하고, 동적으로 서버와 상호작용할 때 적합합니다. 특히, 비동기 작업(예: 데이터 Fetching)을 수행하여 화면이 깜빡이지 않고 동작해야 할 때 사용됩니다.
추가 참고 자료:
제가 제공한 정보가 you.na.joo0님의 학습에 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
cloudinary 관련
0
37
3
useOptimistic 실전-1 useState
0
56
2
discord 초대장 갱신이 필요한거같습니다.
0
59
1
할일 관리 앱(메모이제이션)
0
79
2
Web 플랫폼 등록
0
96
2
함수 정의 기준
0
76
2
fetch는 사용되는가
0
74
2
전역상태 관리 선택 기준
0
82
2
tailwind css는 언제 사용되는가 또 다른 css와의 차이
0
146
2
카카오 web플랫폼 등록
0
134
2
컴포넌트 그리고 폴더 구조에 대해
0
58
2
152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요
0
40
1
폼테그 다른 태그를 하나의 상태 객체로 묶기
0
43
2
class를 className으로 전부 수정하실 때
0
41
2
JWT에 대한 개념도 학습할 수 있나요?
0
63
2
수업자료 다운로드
0
50
2
리액트 객체의 타입을 알기위하여 마우스를 올렸을 때 나오는 형식이 강의와 다른 부분 문의 드립니다.
0
64
2
useState 자동생성 하실때 누른 키보드가 궁금합니다.
0
51
1
타입스크립트 타입이 불일치하는데 에러가 안납니다.
0
74
3
default format >> prettier 이 실행이 안됩니다.
0
65
2
윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?
0
334
3
리렌더링 관련 문의
0
56
2
공부 방향에 대해서
0
62
2
카카오로그인 에러
0
72
3