글 쓰는 시간

react-hook-form

14주차 숙제에서 rhf를 써보긴 했지만 이해가 부족했었다.

이번에 프로젝트에서 써보면서 rhf를 좀 더 이해할 수 있었다.

useForm의 반환값

useForm<T>의 반환값은 여러개가 있지만 내가 프로젝트에서 쓴건 이정도이다.

register

form에서 값을 입력하는 태그를 등록하는 함수이다.

최종적으로는 input, textarea와 같은 태그에 아래처럼 넣어줘야한다.

name 뒤는 option이라 유효성 검사가 필요없으면 넣지 않아도 된다.

본인은 컴포넌트에 prop으로 내려줄 때 타입을 찾느라 고생했는데 타입은 아래와 같다.

당연하다면 당연하겠지만 register 과 register(name)의 타입은 다르다.

// const { register } = useForm<T>(); 일 때
// register: UseFormRegister<T>; 의 형식

// userForm<EditFormData>의 반환 값인 register 일 경우
register: UseFormRegister<EditFormData>;

// register 함수에 name을 지정해준 register(name) 일 경우
register: UseFormRegisterReturn;

handleSubmit

form 데이터를 제출하는 함수이다.

아래처럼 제출 시 동작할 onSubmit 함수를 만들어서 사용한다.

formState

form의 상태값을 나타낸다. 

여러 상태가 있지만 본인은 유효성 검사에서 에러 필드와 메시지를 꺼내 쓰기 위해 사용했다.

setValue

등록한 input, textarea 태그 등에 값을 변경할 때 사용한다.

본인은 프로필 수정 페이지에서 초기 데이터를 바인딩하기 위해 사용했다.

14주차 숙제

이번 주 숙제는 Next.js로 로그인, 회원가입 페이지 만들기였다.

그동안 그냥 모양만 form 태그에 넣고 form 형식을 만들었다면,

이번에는 react-hook-form을 사용하여 렌더링 최적화도 하고 rhf에서 제공하는 기능들을 사용하였다.

요구 사항은 아래와 같다.

• Next.js를 이용한 로그인, 회원가입 페이지를 구현
• react-hook-form 사용

결과

이번 주에 시간을 많이 잡아먹은건 react-hook-form을 이용해서 form-data를 보내는 부분이었다.

많은 기능을 제공해주고 최적화까지 해주는 편리한 라이브러리지만,

처음 써보는 라이브러리라서 적응에 시간이 필요했다.

인풋 태그를 rhf에서 제공하는 register 함수로 등록해야하는데, 이 부분을 이해하기 힘들었다.

등록한 각 인풋태그의 유효성 검사나 에러처리 후 에러 메시지 설정까지 할 수 있어서 신기했다.

백엔드도 라이브러리를 쓰긴 하지만 프론트엔드는 이렇게 다양한 라이브러리들에 익숙해져야 하는것 같다.

공식 문서를 잘 읽는 버릇을 들여야지.

이번 주에 내가 부족했던 부분은 아래와 같다.

• 기간 내에 제출 못함
• 재사용성 높은 컴포넌트를 만들기가 어려웠음