ToDoList 기본 설정
정~~ 말 기본적인 기능만 작성해 보았다.
useState 훅을 사용하여 toDo 상태를 생성 --> 이 상태는 사용자가 입력한 할 일을 저장한다.
onChange 함수는 input 요소의 변경 이벤트를 처리 -> 이 함수는 e.currentTarget.value 를 사용하여 입력된 값을 읽고, setTodo를 호출하여 toDo 상태를 업데이트한다.
onSubmit 함수는 form 요소의 제출 이벤트를 처리 -> 이 함수는 e.preventDefault() 를 호출하여 폼 제출의 기본 동작을 막고, console.log(toDo)를 사용하여 현재 할 일을 콘솔에 출력한다.
JSX에서는 <form> 요소 안에 입력 필드와 추가 버튼이 있다. 입력 필드는 onChange 핸들러와 value 속성을 통해 toDo 상태와 연결되어 있다.
실행시키고, Add 버튼을 누르면,
console에 입력한 값이 잘 찍히는 것을 확인할 수 있다. 잘 연결된 것을 확인해 볼 수 있다.
react-hook-form
React Hook Form은 React 애플리케이션에서 폼을 관리하기 위한 간단하고 강력한 라이브러리이다.
라이브러리는 간단한 API와 뛰어난 성능을 제공하여 개발자가 폼을 쉽게 관리할 수 있도록 도와줍니다. 주요 특징과 장점은 다음과 같다 :
-
간단한 API: React Hook Form은 간단하고 직관적인 API를 제공한다. useForm() 훅을 사용하여 폼을 초기화하고, 각 입력 필드에 register() 함수를 사용하여 폼 입력을 등록할 수 있다.
-
성능: React Hook Form은 성능에 중점을 두고 개발되었다. 입력 필드의 상태 변화를 추적하고, 필요한 경우에만 렌더링을 수행하여 불필요한 리렌더링을 방지한다.
-
유효성 검사: React Hook Form은 내장된 유효성 검사 기능을 제공한다. 각 입력 필드에 검사 규칙을 정의하고, 제출 시에 유효성을 검사할 수 있다.
-
커스텀 훅과 컴포넌트: React Hook Form은 커스텀 훅과 컴포넌트를 지원하여 코드를 재사용하고, 구성 요소를 모듈화할 수 있다.
-
유연성: React Hook Form은 기본 HTML 폼 요소뿐만 아니라 사용자 정의 입력 컴포넌트와도 함께 사용할 수 있다.
react-hook-form을 사용하기 위해서는 ?
npm install react-hook-form 을 설치를 한 뒤,
import { useForm } from 'react-hook-form';를 불러와서 사용한다.
const { register, watch } = useForm(); : useForm 함수는 React Hook Form 라이브러리에서 제공하는 훅 중 하나로, 폼의 상태를 관리하고 폼의 입력 필드를 등록하는 데 사용된다. useForm을 호출하면 폼에 필요한 여러가지 기능을 제공하는 객체를 반환한다.
register: register 메서드는 폼의 입력 필드를 React Hook Form에 등록한다. 이를 통해 React Hook Form은 해당 입력 필드의 상태를 추적하고, 유효성 검사와 같은 작업을 수행할 수 있다.
--> 입력 필드에는 name 속성을 지정해야 하며, 이 이름은 폼 데이터의 키(key)로 사용된다.
watch: : watch 메서드는 특정 입력 필드의 값을 실시간으로 감시한다.
watch 메서드를 사용하면 특정 입력 필드의 값을 추출하거나, 여러 입력 필드의 값을 모니터링하여 상태 변화에 따라 동적으로 작업을 수행할 수 있다.
간단하게 회원가입 폼을 구현해 보았다.
<input {...register('Email')} placeholder="Email" />
여기서 주요한 속성을 살펴보면
register('Email') : 이 부분은 React Hook Form에서 입력 필드를 등록하는 역할을 한다. register 메서드에는 등록하려는 입력 필드의 이름을 전달해야 한다.
--> 여기서는 이메일 주소를 입력받는 입력 필드를 등록하고 있으며, 해당 입력 필드의 이름은 'Email'로 지정되어 있다.
{...register('Email')} : 이 부분은 ES6의 전개 연산자(Spread Operator)를 사용하여 register 메서드가 반환한 객체를 <input> 요소의 속성으로 전달하고 있다.
이를 통해 React Hook Form은 입력 필드와 연결되는 내부 상태 및 유효성 검사와 같은 기능들을 활성화한다.
각각의 input창에 값을 입력하고 콘솔 창을 확인해보니,
하나의 Form에 { ...register('Email')} 에 적은 Email이 키로, input창에 입력한 값이 value로 저장된 것을 확인할 수 있다!
이번에는 form 태그에 적용할 onSubmit 함수를 react-hook-form 을 통해서 한번 코드를 작성해보자
react-hook-form을 이용해서 onSubmit 이벤트를 적용하려면 어떻게 해야할까?
이렇게 handleSubmit 을 추가하고,
이전과 똑같이 이벤트 함수인 onSubmit ={} 안에 불러온 handleSubmit을 넣어주면 된다.
handleSubmit 은 React Hook Form에서 제공하는 중요한 함수로, 폼 제출 시 폼 데이터를 검증하고 처리하는 역할을 담당한다.
이 함수는 다음 두 개의 콜백 함수를 인자로 받습니다:
- onValid: 폼 검증이 성공적으로 완료된 경우 호출되는 콜백 함수
- onInvalid (선택 사항): 폼 검증이 실패한 경우 호출되는 콜백 함수
handleSubmit의 작동 방식
-
폼 제출 이벤트 캡처:
<form>태그의 onSubmit 속성에 handleSubmit(onValid)을 지정하여, 폼 제출 이벤트가 발생할 때 handleSubmit 함수가 호출된다. -
검증 및 데이터 전달: handleSubmit은 폼 필드에 대한 검증을 수행한다. 검증에 실패하면 에러 객체에 에러 메시지를 설정하고, onValid 콜백 함수는 호출되지 않는다.
--> 검증에 성공하면 폼 데이터가 onValid 콜백 함수로 전달된다. -
폼 상태 관리:
formState.errors를 통해 각 필드의 검증 에러 메시지에 접근할 수 있다. 폼 필드에 대한 검증 규칙을 정의하고, 폼 상태의 에러를 관리함으로써, 검증 결과를 사용자에게 시각적으로 피드백할 수 있다.
-
required: 필수 입력 항목으로 지정하고, 유효성 검사가 실패할 경우 표시할 메시지를 설정한다.
예를 들어,{ required: "Email is required" }는 이메일 필드가 비어 있을 경우 "Email is required"라는 에러 메시지를 표시한다. -
minLength: 필드의 최소 길이를 지정하고, 길이가 부족할 경우 표시할 메시지를 설정합니다.{ minLength: { value: 5, message: 'Your Username is too short' } }는 필드 값이 5자 미만일 경우 "Your Username is too short"라는 에러 메시지를 표시한다.
왼쪽처럼 입력하고 Add 버튼을 누르게 되니,
내가 지정한 에러메시지가 message에 출력되는 것을 확인할 수 있다. 에러 메시지를 지정해주지 않은 password1의 경우 빈 문자열로 출력되는 것을 확인할 수 있다!
Error message 보여주기
그럼 이제 콘솔창 말고 error message를 화면에 뿌려줘보자
어떻게 하면 될까 ?
const { register, handleSubmit, formState: { errors }, } = useForm();forState : { errors }로 지정해둔다 .
--> errors는 폼 필드의 유효성 검사 오류 정보를 담고 있는 객체를 의미한다.
이제 저 errors를 사용하면 된다. 
이렇게 {errors.Email?.message} 라고 지정해두면,
required에 지정한 에러 메세지 또는 pattern에 지정한 에러 메시지 중, 해당하는 에러를 보여주게 된다.
errors.Email?.message의 동작 방식
- errors 객체: useForm 훅에서 제공되며, 유효성 검사에 실패한 필드의 오류 정보를 담고 있다.
- 필드 이름(Email): errors 객체에서 해당 필드의 이름을 키로 사용하여, 그 필드의 오류 정보를 접근한다.
- message 속성: 오류 정보에서 message 속성은 유효성 검사에 실패했을 때 보여줄 메시지를 나타낸다. 이 메시지는 register 함수에서 설정한 규칙의 message 옵션에 의해 정의된다.
모든 속성에 적용한 후, 빈 칸으로 Add 버튼을 누르게 되면
각각의 에러 메시지가 정상적으로 출력되는 것을 확인할 수 있다!
여기서 잠깐!
우리가 타입스크립트에 대해서 잊고 있었다..!
useForm에서 받아온 Form 데이터 형식에 대해서 타입을 넘겨주는게 좋다.
IForm 인터페이스를 사용하여 폼 데이터의 타입을 정의한 후,
useForm<IForm>()을 통해 IForm 타입을 지정하여 TypeScript가 폼 데이터를 이해하고 타입 검사를 수행할 수 있도록 해야 한다.
interface IForm {
Email: string;
FirstName: string;
LastName: string;
Username: string;
Password: string;
Password1: string;
}타입을 지정해두고,
const ToDoList = () => {
const { register, handleSubmit, formState: { errors } } = useForm<IForm>();
const onVaild = (data: IForm) => {
console.log(data);
};이렇게 <IForm> 을 지정해두면 된다!
자 이제, 다양한 오류 메시지를 출력하는 것을 해볼 시간이다.
1 . Password === Password1
password와 password1의 입력 값이 같은지 비교하고, 다르다면, password1에 에러 메세지 출력!
2 . FirstName --> 'seo' 입력 X
만약, FirstName에 seo가 포함되어 있다면, 오류 메시지 출력
이렇게 두가지를 진행해볼 예정이다. 여기서 사용하는 속성 --> setError 이다.
setError란 ? --> setError은 React Hook Form 라이브러리에서 제공하는 함수 중 하나로, 폼 필드의 유효성 검사에 실패했을 때 수동으로 에러 메시지를 설정할 수 있도록 해준다.
setError : 비밀번호와 비밀번호 확인 필드가 서로 일치하지 않을 때 호출된다.
setError를 사용하여 비밀번호 확인 필드에 오류를 설정한다.
오류 메시지는 "Password are not the same"으로 설정되며, shouldFocus: true를 사용하여 오류가 발생한 필드에 포커스를 준다.
여기서 궁금한 점
: 왜 setError 속성을 onVaild 함수 안에서 실행하는 것일까?
먼저, onVaild 함수는 폼의 유효성 검사가 실행될 때 호출되는 함수이다. 이 함수는 모든 입력 필드에 지정된 유효성 검사를 통과한 경우에만 실행된다.
만약 입력 필드 중 하나라도 유효성 검사를 통과하지 못하면 onVaild 함수는 호출되지 않는다.
--> setError 함수는 입력 필드에 지정된 유효성 검사가 끝난 후에 실행되고, 이후에 onVaild 함수가 실행될 때 함께 실행된다.
일반적으로 setError 함수는 입력 필드에 대한 추가적인 유효성 검사를 수행하고, 필요한 경우 에러를 설정하는 데 사용된다. 따라서 onVaild 함수 내에서 필요한 추가적인 유효성 검사를 수행하고, 검사에 실패한 경우 setError를 호출하여 에러를 설정할 수 있다.
--> 이렇게 하면 입력 필드의 유효성 검사가 완료된 후에 에러가 설정되어 onVaild 함수가 실행될 때 함께 처리될 수 있게 된다.
두번째, seo 문자를 FirstName에 포함되지 않게 해보자
validate 속성에 전달된 함수는 사용자가 입력한 값에 대한 사용자 정의 유효성 검사를 수행한다.
- 사용자가 입력한 값에 'seo'가 포함되어 있다면, 에러 메시지 'No seo allowed'가 반환된다.
- 그렇지 않은 경우, 즉 'seo'가 포함되어 있지 않으면, 유효성 검사가 통과되어 true가 반환된다.
validate는 사용자가 입력한 값이 특정 조건을 충족하지 않으면 에러 메시지를 반환하고, 조건을 충족하면 유효성 검사를 통과하는 기능을 제공한다.
--> 따라서 사용자가 'seo'를 포함한 값으로 입력하면 해당 입력 필드에 에러 메시지가 표시되고, 그렇지 않은 경우에는 에러가 발생하지 않고 유효성 검사가 통과된다.
FirstName에 'seo'가 포함되어 있기 때문에 오류 메세지가 출력되는 것을 확인할 수 있다!
자 이제, 원래 TodoList 코드로 돌아와서
react-hook-form을 적용해서 코드를 수정해보자
여기서 가장 중요하게 기억해야 할 부분은
useForm 훅을 사용하여 handleSubmit 함수를 가져오고, handleSubmit 함수에는 유효성 검사가 성공했을 때 실행할 함수를 인자로 전달해야 한다. 여기서는 사용자가 제출할 때 호출되는 onSubmit 함수를 전달했다.
onSubmit 함수는 유효성 검사가 성공했을 때 실행되는 함수로, 여기서는 사용자가 제출한 할 일 (data.toDo)를 콘솔에 출력하고, setValue 함수를 사용하여 입력 필드의 값인 'toDo'를 빈 문자열로 설정했다.
--> 이렇게 하면 사용자가 할 일을 입력하고 제출한 후에 입력 필드가 비워지게 된다.
react-hook-form은 useForm을 통해 거의 모든 것을 한 곳에서 관리할 수 있기 때문에 코드가 깔끔해지고, 개발 시간도 절약된다.
이 훅은 입력 필드의 등록(register), 유효성 검사(handleSubmit, errors), 입력 필드 값 설정(setValue), 에러 설정(setError) 등을 한 곳에서 처리할 수 있어서 효율적이다. 코드를 간결하게 유지하고 개발 시간을 단축시키는 데 큰 도움이 된다.
