경북대 FE_정서현 4주차 과제 Step3 ~ 4 #97
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 21, 2024
Comment on lines
+19
to
+66
| const onSubmit: SubmitHandler<FormValues> = (data) => { | ||
| const { number, message } = data; | ||
|
|
||
| // 카드 메시지가 100자를 초과할 경우 경고 표시 | ||
| if (message && message.length > 100) { | ||
| alert('카드 메시지는 100자 이내로 입력해 주세요!'); | ||
| return; | ||
| } | ||
|
|
||
| // 현금 영수증 신청을 한 경우 (체크 박스 활성화 상태) | ||
| if (check) { | ||
| if (number && message) { | ||
| if (isNaN(Number(number))) { | ||
| alert('현금 영수증 전화번호는 숫자만 입력 가능합니다!'); | ||
| } else { | ||
| alert('주문이 완료되었습니다.'); | ||
| } | ||
| } else if (!message) { | ||
| alert('선물과 함께 보낼 카드 메시지를 작성해 주세요!'); | ||
| } else if (!number) { | ||
| alert('현금 영수증에 필요한 전화번호를 입력해주세요!'); | ||
| } | ||
| } | ||
|
|
||
| // 현금 영수증 신청을 하지 않은 경우 (체크 박스 비활성화 상태) | ||
| else { | ||
| if (message) { | ||
| alert('주문이 완료되었습니다.'); | ||
| } else if (!message) { | ||
| alert('선물과 함께 보낼 카드 메시지를 작성해 주세요!'); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| <Grid | ||
| templateColumns={{ base: '1fr', md: '2fr 1fr' }} | ||
| gap={6} | ||
| maxWidth={1200} | ||
| mx="auto" | ||
| p={4} | ||
| > | ||
| <GridItem> | ||
| <VStack align="start" spacing={10}> | ||
| <Box> | ||
| <Text fontSize="2xl" fontWeight="bold">나에게 주는 선물</Text> | ||
| <form onSubmit={handleSubmit(onSubmit)}> |
There was a problem hiding this comment.
handleSubmit의 첫번째 인자는 validation 성공시 동작하는 콜백입니다. 유효하지 않은 값일 경우에 필요한 동작은 두번째 인자로 넘겨주면 어떨까요~?
공식 문서를 한 번 확인해보세요!
There was a problem hiding this comment.
그리고 현재 form의 범위가 잘못되어 정상적으로 validation이 동작하지 않네요. submit이 되고있는지 확인해 보실래요?
| <Input | ||
| backgroundColor="gray.100" | ||
| placeholder="선물과 함께 보낼 메시지를 적어보세요" | ||
| {...register('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주차 질문
🤔 1. 제어 컴포넌트와 비 제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form 을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명하시오.
제어 컴포넌트 (Controlled Components)
제어 컴포넌트는 React 상태 (State) 로 입력 값이 관리되는 컴포넌트이다. 모든 Form 요소 (input, textarea, select 등) 의 값은 컴포넌트의 상태를 통해 제어된다.
특징으로는 입력 값이 상태에 의해 관리되며 상태 변경에 따라 입력 값이 업데이트 된다. 또, 입력 값 변경 이벤트 (onChange) 를 통해 상태가 업데이트 된다.
비 제어 컴포넌트 (Uncontrolled Components)
비 제어 컴포넌트는 DOM 자체가 입력 값의 소스를 관리하는 컴포넌트이다. Ref 를 사용하여 DOM 노드에 직접 접근하고 값을 읽어온다.
특징으로는 입력 값이 DOM 자체에 의해 관리된다. Ref 를 사용하여 입력 값에 접근한다. 상태 관리가 필요하지 않다.
제어 컴포넌트로 Form 을 만들어야 하는 경우는 다음과 같다.
ex) 사용자 이름을 입력받고, 입력 값에 따라 인사 메시지를 실시간으로 업데이트 하는 Form
🤔 2. Input type 의 종류와 각각 어떤 특징을 가지고 있는지 설명하시오.
textpasswordurlsearchdatecheckboxsubmitbutton🤔 3. label 태그는 어떤 역할을 하며 label 로 input 필드를 감싸면 어떻게 동작하는지 설명하시오.
위 예시에서 Username 텍스트를 클릭하면 태그 내부에 있는 input 요소가 포커스를 받는다.