강원대 FE_최서린 4주차 과제 STEP3,4

README.md

@@ -1 +1,53 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+## 4주차 과제 step4 질문 답변
+
+### 질문 1: 제어 컴포넌트와 비제어 컴포넌트의 차이와 제어 컴포넌트로 Form을 만들어야 하는 경우
+
+#### 1. 제어 컴포넌트
+
+- 제어 컴포넌트란 리액트에서 상태를 통해 입력 요소의 값을 관리하는 방식이다.
+- 입력값은 리액트의 상태(state)에 저장된다.
+
+#### 2. 비제어 컴포넌트
+
+- 비제어 컴포넌트는 리액트의 상태를 이용하지 않고, DOM 자체에서 입력 요소의 값을 관리하는 방식이다.
+- 참조(ref)를 사용해 입력 요소의 값을 직접 접근하고 제어한다.
+
+#### 제어 컴포넌트로 Form을 만들어야 하는 경우
+
+- 제어 컴포넌트를 사용하면 폼 입력 데이터를 쉽게 검증하고 조작할 수 있다.
+- 그러므로 입력 검증이 필요한 경우(실시간 유효성 검사), 입력 값에 기반한 UI 업데이트가 필요한 경우, 폼 데이터를 `Redux`나 `Context API`와 같은 전역 상태로 관리하는 경우 제어 컴포넌트를 사용하는 것이 좋다.
+
+### 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.
+
+- `text`: 단일 줄 텍스트 입력을 받는다.
+- `email`: 이메일 주소 형식의 입력을 받는다. 브라우저에서 이메일 형식 검증이 가능하다.
+- `password`: 비밀번호 입력을 받으며 입력한 문자가 가려진다.
+- `number`: 숫자 입력을 받는다. min, max 속성으로 입력 범위를 제한할 수 있다.
+- `tel`: 전화번호 입력을 받는다. 전화번호 형식으로 제한하지 않고 숫자와 일부 특수 문자를 받는다.
+- `url`: URL 형식의 입력을 받는다. 브라우저에서 URL 형식을 검증할 수 있다.
+- `date`: 날짜 입력을 받는다. 브라우저에서 날짜 선택 UI를 제공할 수 있다.
+- `time`: 시간 입력을 받는다. 브라우저에서 시간 선택 UI를 제공할 수 있다.
+- `checkbox`: 다중 선택 입력을 받는다. 선택된 상태와 선택되지 않은 상태를 가진다.
+- `radio`: 라디오 버튼 입력을 받는다. 동일 그룹 내 하나의 옵션만 선택할 수 있다.
+- `file`: 파일 입력을 받는다. 사용자가 파일을 선택할 수 있다.
+
+### 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
+
+#### label tag의 역할
+
+- 입력 요소에 대한 설명을 제공하는 역할을 한다.
+- 사용자가 입력 요소의 목적을 이해하기 쉽도록 돕는다.
+
+#### label로 input field를 감싸면 어떻게 동작하는지
+
+```
+<label>
+  Username:
+  <input type="text" />
+</label>
+```
+
+- 위와 같이 `label` 태그 내 `input` 요소를 포함하여 감싸면, label 클릭 시 내부의 `input` 요소가 포커스를 받는다.
+- 이러한 방식으로 `label` 태그를 사용하면 접근성을 높일 수 있다.