양식(form)이 어려운 이유는 무엇일까요?
강의의 일부를 할애할 정도로 복잡한 개념일까요?
우선, 양식에 대한 정의를 내려 봅시다
양식은 입력 필드의 집합입니다
예시로, 여기 로그인 양식이 있습니다
이렇게 더 복잡한 가입 양식도
이번 강의에서 다뤄 볼 것입니다
이 프로젝트의 일환으로
제가 드린 코드를
한 번 살펴보겠습니다
양식은 입력창의 집합이며
주로 레이블(label)과 함께 사용됩니다
레이블은 양식 요소에 속합니다
정확하게 말하면, 내장된 HTML 양식 요소입니다
이것이 양식에 대한 설명입니다
아직은 양식이 어렵지 않게 느껴지실 겁니다
양식은 결국
두 가지 용도로 활용할 수 있습니다
사용자의 양식 제출을 관리하고
사용자가 입력한 값을 추출하는 작업과
사용자가 제공한 데이터를
검증하는 작업입니다
만약 부정확한 데이터를 제공했다면
사용자에게 검증 오류를 제시하기도 합니다
다행히도, 제출 관리와 데이터 추출은
쉬운 편입니다
예를 들면, 전 강의에서 배운 것처럼 양방향 바인딩을 설정하여
상태를 통해 데이터를 관리할 수 있습니다
이 방법도 본 강의에서
다시 한 번 다뤄보겠습니다
다른 방법으로는 값을 추출하기 위해
참조(ref)를 사용할 수도 있습니다
이 방법도 뒤에서 더 자세히 설명해 드리겠습니다
또 다른 방법은 이번 파트에서 새로 소개해 드리는 것입니다
브라우저가 제공하는 함수들을 사용하여
사용자가 입력한 데이터를 추출해내고
formData 객체를 통해 양식 필드로 옮길 수 있습니다
이것도 조금 더 있다가
더 자세히 설명해 드리도록 하겠습니다
눈치채신 것처럼
이 부분은 어렵지 않습니다
데이터 추출은 상당히 직관적인 내용입니다
어려운 부분은 검증입니다
특히 좋은 사용자 경험을 제공하고 싶을 때는 더욱 어렵습니다
여러분이 곧 배우시겠지만
키를 누를 때마다 사용자가 입력한 데이터를 검증하고
올바르지 않은 경우에 오류 메시지를
계속 띄우는 방법이 있습니다
하지만 이 방법을 사용하면
오류가 너무 일찍 나타나는 문제가 생깁니다
이에 대한 대안으로
사용자가 입력창에 입력을 끝내고 넘어가면
그 때마다 검증을 할 수도 있습니다
하지만 이 경우에도
문제가 발생할 수 있습니다
오류가 너무 오랫동안 보이기 때문입니다
양식을 제출할 때 검증하는 방법도 있기는 하지만
앱의 요구사항이나
제공하고 싶은 사용자 경험에 따라서
오류가 너무 늦게 나오는 경우도 있을 수 있습니다
따라서 이 각기 다른 방법들을 배워보고
어떻게 절충할 수 있을지 알아보도록 하겠습니다
그렇게 하면 이 섹션이 끝날 쯤에
개발하는 앱과 앱의 사용자를 위한
적절한 해결책을 찾을 수 있을 것입니다