diff --git a/README.md b/README.md index e3ee5a24..1a205cbc 100644 --- a/README.md +++ b/README.md @@ -1 +1,89 @@ # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편 + + +--- + +# 구현 목록 + +## step 1 + +- 결과 링크를 참고하여 상세 페이지 및 상품 결제 페이지의 UI를 구현한다. + - [x] 이 과정에서 UI를 chakra-ui 사용해서 구현한다. (단, 직접 구현해도 무방하나 다른 UI 라이브러리 사용은 금지) + - [x] 이번 과제는 Form을 다루는 것이 중점이기 때문에 UI 구현에 어려움을 겪는다면 임의로 변경해도 됨 +- [x] 상세 페이지에서 첨부된 oas.yaml 파일의 /api/v1/products/{productId}/detail, /api/v1/products/{productId}/options를 참고하여 API를 구현한다. +- [x] 없는 상품의 경우 메인 페이지로 연결되도록 한다. +- [x] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 이동한다. +- [x] React Hook Form 등의 라이브러리를 사용하지 않으며 React의 form, ref, state만 사용하여 구현한다. + + +## step 2 + +- [x] 상품 상세 페이지에서 상품의 개수를 option API의 giftOrderLimit을 초과한 경우 선택이 불가하게 해요. +- 결제 페이지의 Form을 validation 해요. (4주차 미션 결과물 참고) + - [x] 카드 메시지를 입력하지 않으면 메시지를 입력하라고 안내해요. + - [x] 카드 메시지가 100글자가 넘어가면 100자 이내로 입력하라고 안내해요. + - [x] 현금 영수증 checkbox 클릭 시 현금영수증 번호가 입력되었는지 확인해요. + - [x] 현금 영수증 입력은 숫자만 입력하도록 안내해요. + + +## step 3 + +- [x] 기존에 만든 form / input을 react-hook-form으로 변경해요. +- [x] validate 또한 react-hook-form 기능을 적극적으로 활용해요. (이 과정에서 zod를 사용해도 좋아요.) + +--- + +# 질문 답변 + +## **질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.** + +### 제어 컴포넌트 + +- 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다. + - 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 `setState()` 로 값을 저장하는 방식 +- React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 된다. +- 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 한다. +- 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화 된다. +- 사용자가 입력을 하는 액션을 취할 때 마다 리렌더링을 발생 + +### 비제어 컴포넌트 + +- 폼을 제출할 때 요소 내부의 값을 얻어온다. +- `useRef()` 를 사용해서 값을 얻는다. + - useRef()는 heap영역에 저장되는 일반적인 자바스크립트 객체, 매번 렌더링 할 때 동일한 객체를 제공한다. → 어플리케이션이 종료되거나 가비지 컬렉팅 될 때 까지, 참조할 때마다 같은 메모리값 → 자바스크립트의 === 연산이 항상 true를 반환한다. → 변경사항을 감지할 수 없다. +- 값이 실시간으로 동기화 되지 않는다. +- 사용자가 직접 트리거 하기 전 까지는 리렌더링을 발생시키지도 않고 값을 동기화 시키지도 않는다. + +### 제어 컴포넌트는 언제 사용할까? + +- 제어 컴포넌트를 사용하기 좋은 방식은 `유효성 검사` , `유효한 데이터가 없는 경우 전송 버튼의 상태를 disabled로 표시` , `특정 입력 방식 적용` 에 유용하다 → 실시간으로 유효성 검사가 필요할 경우 + +### 궁금한 점 + +- 과제의 상황에서는 폼을 제출 할 때 alert을 띄우니까 비제어 컴포넌트가 더 맞지 않을까? +- 공식 문서에서는 폼을 구현할 때 제어 컴포넌트를 활용할 것을 권장하고 있음 + +## **질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.** + +- `text` : 한 줄의 텍스트 입력 받기 +- `textarea` : 문장 입력 받기 (여러 줄 가능) +- `password` : 비밀번호 입력 받기 (입력 문자는 별표나 작은 원으로 표시된다.) +- `radio` : 여러 개의 라디오 버튼 옵션 중에서 단 하나만의 값을 받을 수 있다. +- `checkbox` : 사용자로부터 여러 개의 체크 박스 중에서 여러 개의 옵션 값을 받을 수 있음 +- `file` : 사용자로부터 파일을 받을 수 있음 +- `select` : 여러 개의 드롭다운 리스트 중에서 한 개의 옵션을 입력받을 수 있다. +- `button` : 버튼을 나타낸다. +- `submit` : 입력 받은 데이터를 폼 핸들러로 제출하는 버튼을 생성 +- `fieldset` : form 요소와 관련된 데이터를 하나로 묶어준다. + - `legend` : fieldset 요소의 제목 + +## **질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.** + +###