form action 과 onSubmit
70
작성한 질문수 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님의 학습에 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
상태(State) 가 "시간이 지남~" 에 대해 질문 있습니다.
0
34
2
import {} 중괄호 차이점
0
38
2
[ 문의]몽고DB connect 의 건
0
47
2
제공되는 react_code.zip 중에 ..
0
47
2
커리큘럼 비활성화
0
46
2
설명하시는 개념들을 잘 모르겠습니다.
0
43
2
이해가 절반 정도 되는데요.
0
56
1
styled-components(전역)
0
56
1
cloudinary 관련
0
71
3
useOptimistic 실전-1 useState
0
87
2
discord 초대장 갱신이 필요한거같습니다.
0
83
1
할일 관리 앱(메모이제이션)
0
99
2
Web 플랫폼 등록
0
142
2
함수 정의 기준
0
87
2
fetch는 사용되는가
0
88
2
전역상태 관리 선택 기준
0
110
2
tailwind css는 언제 사용되는가 또 다른 css와의 차이
0
210
2
카카오 web플랫폼 등록
0
193
2
컴포넌트 그리고 폴더 구조에 대해
0
78
2
152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요
0
52
1
폼테그 다른 태그를 하나의 상태 객체로 묶기
0
55
2
class를 className으로 전부 수정하실 때
0
50
2
JWT에 대한 개념도 학습할 수 있나요?
0
74
2
수업자료 다운로드
0
61
2