전남대 FE_정서윤 4주차 과제 STEP4

README.md

@@ -1 +1,46 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+### 4주차 과제
+
+- 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고, 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.
+    - **제어 컴포넌트**
+        - React의 상태를 통해 입력값을 관리하는 컴포넌트이다.
+        - 입력값이 변경될 때마다 state가 업데이트되며, 컴포넌트의 render 메세드에서 이 state를 기반으로 입력값이 결정된다. 양방향 데이터 바인딩이 가능하며, 컴포넌트의 상태를 완벽히 제어할 수 있다.
+    - **비제어 컴포넌트**
+        - DOM에서 직접 입력값을 관리하는 컴포넌트이다.
+        - ref를 사용하여 DOM 요소에 접근하며, 상태가 변경될때마다 컴포넌트가 재렌더링되지 않는다. 입력값이 변경될 때마다 React의 상태가 업데이트되지 않기 때문에 간단한 폼이나 초기값을 설정하는데 유용하다.
+    - **제어 컴포넌트로 Form을 만들어야 하는 경우**
+        - 입력값을 검증하거나 변환해야 할 때
+        - 여러 필드 간의 상호작용이 복잡한 폼을 구현할 때
+        - 입력 값에 따라 다른 UI 요소를 동적으로 업데이트 할 때
+        - 폼 상태를 전역 상태와 동기화 해야할 때
+- 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해주세요.
+    - **text** : 기본적인 단일 행 텍스트 입력 필드
+    - **passwodrd** : 비밀번호 입력 필드, 입력된 값이 화면에 표시되지 않고 대체문자(점 또는 별)로 표시됨
+    - **email** : 이메일 주소 입력 필드, 유효한 이메일 형식을 검증하고 이메일 입력을 위한 키보드 제공 (모바일에서)
+    - **number** : 숫자 입력 필드, 숫자만 입력할 수 있으며 증가/감소 버튼을 제공함
+    - **tel** : 전화번호 입력 필드, 전화번호 입력을 위한 키보드 제공 (모바일에서)
+    - **url** : URL 입력 필드, 유효한 URL 형식을 검증함
+    - **date** : 날짜 입력 필드, 날짜 선택을 위한 달력 UI 제공
+    - **time** : 시간 입력 필드, 시간 선택을 위한 UI 제공
+    - **datetime-local** : 날짜 및 시간 입력 필드, 로컬 시간대에 맞춘 날짜 및 시간 선택 UI 제공
+    - **color** : 색상 선택 필드, 색상 선택기 제공
+    - **checkbox** : 체크 박스 입력 필드, 다중 선택이 가능한 체크박스
+    - **radio** : 라디오 버튼 입력 필드, 동일한 name을 가진 라디오 버튼 그룹 중 하나만 선택 가능
+    - **file** : 파일 선택 필드, 파일 업로드를 위한 파일 선택기 제공
+    - **range** : 슬라이더로 숫자 범위를 선택할 수 있는 필드, 최소값/최대값/초기값 등 설정 가능
+    - **hidden** : 숨겨진 입력 필드, 사용자에게 표시되자 않지만 폼 데이터로 전송됨
+- 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해주세요.
+    - **label 태그의 역할** : 입력 필드와 관련된 설명 또는 제목을 제공하기 위해 사용됨. 입력 필드와 연관된 텍스트를 클릭하면 해당 입력 필드로 포커스가 이동하도록 하여 접근성을 향상시킴
+        - for 속성을 이용하여 특정 입력 필드와 연결됨 (label의 for, input의 id가 연결됨)
+        - ex. 
+            ```html
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username">
+    - **label로 input field를 감싸면 어떻게 동작하는가** : label로 input을 감싸면 label을 클릭하는 것만으로도 해당 입력 필드에 포커스를 줄 수 있음. 이는 for 속성을 사용할 필요 없이 간편하게 접근성을 제공하는 방법임.
+        - ex.
+            ```html
+            <label>
+                Username:
+                <input type="text" name="username">
+            </label>
+