경북대 FE_이은경 4주차 step3~4 #102
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sjoleee
approved these changes
Jul 20, 2024
Comment on lines
+49
to
+53
| - 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요. | ||
| text : 텍스트 입력 | ||
| password: 입력된 텍스트가 보이지 않도록 마스킹 | ||
| tel: 전화번호 입력. 전화번호 형식의 검증은 없지만, 모바일 기기에서는 전화번호 키패드가 표시됨. | ||
| hidden: 사용자에게 보이지 않는 숨겨진 입력. 폼 데이터에 포함됨 |
There was a problem hiding this comment.
input의 type은 훨씬 많습니다 ㅎㅎ 개인적으로는 작성해주신 것들보다 radio, file, range, checkbox를 자주 쓰는 것 같아요
Comment on lines
+33
to
+48
| if (data.cashReceipt && !data.cashReceiptNumber) { | ||
| alert('현금영수증 번호를 입력해주세요!'); | ||
| return; | ||
| } | ||
| if (!data.message) { | ||
| alert('카드 메시지를 입력해주세요!'); | ||
| return; | ||
| } | ||
| if (data.message.length > 100) { | ||
| alert('카드 메시지는 100자 이내로 입력해주세요!'); | ||
| return; | ||
| } | ||
| if (data.cashReceiptNumber && !/^\d*$/.test(data.cashReceiptNumber)) { | ||
| alert('현금 영수증 번호는 숫자만 입력해주세요!'); | ||
| return; | ||
| } |
There was a problem hiding this comment.
handleSubmit의 첫번째 인자는 성공시 동작할 함수, 두번째 인자는 실패시 동작할 함수입니다.
validation을 통과하지 못한 경우는 두 번째 인자로 넘겨보시면 좋을 것 같아요~
Comment on lines
+116
to
+121
| {...register('cashReceiptNumber', { | ||
| pattern: { | ||
| value: /^\d*$/, | ||
| message: '현금 영수증 번호는 숫자만 입력해주세요!', | ||
| }, | ||
| })} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
4주차 질문
제어 컴포넌트는 React 컴포넌트의 상태(state)가 폼 요소의 값을 관리합니다. 폼 요소의 값이 컴포넌트의 상태에 의해 제어됩니다.
예시로는
폼 데이터를 실시간으로 검증하거나 포맷팅해야 할 때
폼 요소의 값에 따라 동적으로 UI를 변경해야 할 때
폼 제출 전에 데이터를 가공하거나 확인해야 할 때
비제어 컴포넌트 (Uncontrolled Component)
이 경우는 폼 요소가 자체적으로 상태를 관리합니다. React의 ref를 사용하여 DOM 요소에 직접 접근하여 값을 가져옵니다.
text : 텍스트 입력
password: 입력된 텍스트가 보이지 않도록 마스킹
tel: 전화번호 입력. 전화번호 형식의 검증은 없지만, 모바일 기기에서는 전화번호 키패드가 표시됨.
hidden: 사용자에게 보이지 않는 숨겨진 입력. 폼 데이터에 포함됨
label 태그는 HTML 폼에서 input, textarea 등의 폼 요소에 대한 설명을 제공하는 역할을 합니다. 사용자가 입력 필드를 쉽게 이해하고 접근할 수 있도록 돕습니다.
for 속성 사용: label 태그의 for 속성이 입력 필드의 id 속성과 일치하면, label을 클릭할 때 해당 입력 필드가 포커스를 받습니다.
입력 필드를 감쌈: label 태그가 입력 필드를 감싸고 있으면, label의 어느 부분을 클릭해도 내부의 입력 필드가 포커스를 받습니다.
step3 과제를 하면서 2처럼 alert로 나타나도록 했지만 계속 나오지 않아서 애를 먹었는데.. react-hook-form의 validation이 우선적으로 작동되어서 handleSubmit 함수가 작동되기 전에 유효성검사를 해서 onSubmit함수가 호출되지 않는 것이 맞는지 질문드립니다!
감사합니다!