강원대 FE_허윤수 4주차 과제 STEP4

[sugoring]

• 0단계 PR 링크입니다.
• 1단계 PR 링크입니다.
• 2단계 PR 링크입니다.
• 3단계 PR 링크입니다.

이번 PR에서는 퀴즈에 대한 답변을 README에 작성하였습니다.

---

4단계 - 질문 답변

• 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.

  • 제어 컴포넌트: React에서 컴포넌트의 상태로 입력 값을 관리하는 방식입니다. 입력 필드의 값은 React 상태에 의해 제어되며, onChange 이벤트 핸들러를 사용하여 상태를 업데이트합니다.

  • 비제어 컴포넌트: 비제어 컴포넌트는 DOM 요소 자체에서 입력 값을 관리하는 방식입니다. ref를 사용하여 입력 필드에 접근하고 값을 읽어옵니다.

  • 제어 컴포넌트는 다음과 같은 경우에 사용됩니다.:

    • 실시간 검증: 사용자가 입력할 때마다 유효성을 검사하고, 에러 메시지를 즉시 보여주어야 하는 경우
    • 동적 폼: 사용자가 입력하는 데이터에 따라 다른 입력 필드를 동적으로 추가하거나 변경해야 하는 경우
    • 입력 값 동기화: 입력 값이 다른 상태나 UI와 실시간으로 동기화되어야 하는 경우

• 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.

  1. text: 일반적인 텍스트 입력을 받습니다.
  2. password: 입력된 텍스트를 가려서 표시합니다. 주로 비밀번호 입력에 사용됩니다.
  3. email: 이메일 주소 입력을 받습니다. 브라우저는 입력된 값이 유효한 이메일 형식인지 확인합니다.
  4. number: 숫자 입력을 받습니다. 숫자 키패드를 제공하며, 입력 값이 숫자인지 확인합니다.
  5. tel: 전화번호 입력을 받습니다. 전화번호 형식을 확인하지는 않지만, 모바일 장치에서 전화번호 키패드를 제공합니다.
  6. url: URL 입력을 받습니다. 브라우저는 입력된 값이 유효한 URL 형식인지 확인합니다.
  7. date: 날짜 입력을 받습니다. 브라우저에서 날짜 선택 UI를 제공합니다.
  8. time: 시간 입력을 받습니다. 브라우저에서 시간 선택 UI를 제공합니다.
  9. datetime-local: 날짜와 시간(로컬 시간) 입력을 받습니다.
  10. checkbox: 체크박스 입력을 받습니다. 여러 값을 선택할 수 있습니다.
  11. radio: 라디오 버튼 입력을 받습니다. 그룹 내에서 하나의 값만 선택할 수 있습니다.
  12. file: 파일 업로드 입력을 받습니다. 파일 선택 대화 상자를 제공합니다.
  13. range: 범위 슬라이더 입력을 받습니다. 최소값과 최대값 사이의 숫자를 선택할 수 있습니다.
  14. color: 색상 입력을 받습니다. 색상 선택 UI를 제공합니다.
  15. hidden: 화면에 보이지 않는 입력을 받습니다. 주로 폼 데이터에 추가적인 정보를 포함시킬 때 사용됩니다.

• 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.

  • label 태그의 역할: label 태그는 폼 요소의 설명을 제공하는데 사용됩니다. label 태그는 접근성을 높여주며, 사용자가 폼 요소와 상호작용하기 쉽게 만들어줍니다. label 태그를 사용하면 화면 리더기와 같은 접근성 도구가 폼 요소의 목적을 더 잘 이해할 수 있습니다.
  • label로 input 필드를 감쌀 때의 동작: label 태그를 input 필드 주위에 감싸면, 사용자가 label을 클릭할 때 자동으로 해당 input 필드가 포커스됩니다. 이는 사용자가 작은 클릭 영역을 정확히 클릭하지 않아도 쉽게 입력 필드를 선택할 수 있게 합니다.