diff --git a/README.md b/README.md index 7df33bfd..3196f75a 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,34 @@ - [x] 현금 영수증 checkbox 클릭시 현금영수증 번호가 입력되었는지 확인 - [x] 현금 영수증 입력은 숫자만 입력하도록 안내 -## 👓 3단계 - React Hook Form를 사용하여 기존의 form을 리팩터링 해요. +## ⚒️ 3단계 - React Hook Form를 사용하여 기존의 form을 리팩터링 해요. - [x] 기존에 만든 form / input을 react-hook-form으로 변경 -- [x] validate 또한 react-hook-form 기능을 활용 (이 과정에서 zod를 사용해도 좋음.) \ No newline at end of file +- [x] validate 또한 react-hook-form 기능을 활용 (이 과정에서 zod를 사용해도 좋음.) + + +## 🤔 4단계 - 질문의 답변을 README에 작성 +### 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 +제어 컴포넌트는 React의 state를 통해 입력값을 관리하고 제어하는 방식으로, 입력값의 실시간 업데이트와 유효성 검사가 필요할 때 사용됩니다.\n +제어 컴포넌트 사용의 예시로서는 실시간 폼 유효성 검사에 사용하기 적합합니다.\n +비제어 컴포넌트는 DOM 요소 자체에 값을 저장하며, 기본 HTML 폼 요소와 같이 동작합니다. 사용의 예시로서는 주로 파일 업로드 입력하기에 적합합니다. + +### 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요. +text 타입은 일반 문자열 입력을 위해 사용되며, 이름이나 주소 입력과 같은 경우에 적합합니다. +password 타입은 입력한 텍스트를 숨김 처리하여 비밀번호와 같은 민감한 정보를 보호합니다. +email 타입은 이메일 형식의 입력값을 검증하여, 사용자가 올바른 이메일 주소를 입력했는지 확인합니다. +number 타입은 숫자만 입력할 수 있도록 하며, min, max, step 속성을 통해 입력값의 범위와 증감 단위를 설정할 수 있습니다. +date 타입은 달력 UI를 제공하여 사용자가 쉽게 날짜를 선택할 수 있게 합니다. +checkbox 타입은 다중 선택이 가능하며, 여러 항목을 선택할 수 있는 경우에 사용됩니다. +반면 radio 타입은 단일 선택만 가능하며, 같은 그룹 내에서 하나의 옵션만 선택할 수 있도록 합니다. +file 타입은 사용자가 로컬 파일 시스템에서 파일을 선택할 수 있게 하며, accept 속성을 통해 허용하는 파일 타입을 지정할 수 있습니다. +submit 타입은 폼 제출 버튼으로, 클릭 시 폼 데이터를 서버에 전송합니다. +reset 타입은 폼 초기화 버튼으로, 클릭 시 폼의 모든 입력값을 초기 상태로 되돌립니다. +tel 타입은 전화번호 입력에 사용되며, 일부 모바일 키보드는 전화번호 입력에 최적화된 키보드를 표시합니다. +url 타입은 URL 형식의 입력값을 검증하며, +search 타입은 검색 입력 필드로, 검색어 입력에 최적화된 스타일이 적용될 수 있습니다. +color 타입은 색상 선택 입력으로, 색상 선택 UI를 제공하여 사용자가 색상을 선택할 수 있습니다. +range 타입은 범위 슬라이더 입력으로, 숫자 범위를 슬라이더로 조정할 수 있습니다. + +### 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요. +label 태그는 폼 요소와 연결되어 사용자 접근성이 향상됩니다. +label로 input 필드를 감싸거나 for 속성을 사용해 연결하면, label을 클릭했을 때 해당 input이 포커스되도록 동작합니다. \ No newline at end of file