[React] 리액트 초보의 로그인& 회원가입 고군분투: 1. React Hook Form 사용하기

요즘 맡고 있는 프로젝트에서 🚀로그인 & 회원가입 부분을 담당하고 있다.

React는 처음인데다 이전에 야매로 만들었던 관통 프로젝트와는 다르게 토큰도 access token과 refresh token을 사용하고, 회원가입시 메일로 인증과정을 거치는 나름 업그레이드 버전 회원가입이다.

(그리고 SNS 회원가입 & 로그인도 있다.)

앞으로 올라오는 게시글 시리즈는 리액트 초보의 로그인 & 회원가입 고군분투 과정이다.

나같은 React Newbie들에게 이 글을 바친다.

1. React-hook-form 이 무엇이냐

리액트에서 회원가입, 정보기입 등 다양한 form을 사용할 일이 많을 것이다.

그때마다 물론 useState 같은 hook을 사용하여 상태관리를 하고, 유효성 검사용 함수를 만들어서 검사를 진행하고 유효성 검사에 따른 에러메세지를 줄 수 있겠다.

(리액트 만으로 form 을 다루고 싶다면 아래 블로그를 참고해보자.)

react에서 form다루기

텍스트를 입력하는 양식 textbox, select등 사용자로부터 입력을 받기 위해 사용한다. html의 form과 차이가 있다. react에서 form은 state를 통해 data를 관리한다. Controlled Components 값이 리액트의 통제를 받는 input Form element, 모든 데이터를 state에서 관리하기에 사용자가 입력한 값에 접근하고 다룰 수 있다. 사용자의 입력값을 직접적으로 제어할 수 있다.

https://velog.io/@dabin-lee/react%EC%97%90%EC%84%9C-form%EB%8B%A4%EB%A3%A8%EA%B8%B0

하지만, 우리는 거인의 어깨 위에 서는 개발자 아니겠는가?

이미 이것을 한 큐에 해결 해 줄 패키지(라이브러리) 가 준비되어있다. 이말이다.

우리 서비스만 해도 회원가입 시 받는 정보가 이메일, 아이디, 닉네임, 전화번호, 비밀번호(그리고 비밀번호 확인)이다. 각각에 대하여 관리할 state가 늘어나고 각각 처리해 줄 handler, validation function, 그리고 error Message까지 벌써 길어질 코드에 눈 앞이 캄캄해지고. 어지럽고. 도망치고 싶다.

react-hook-form은 이런 고민을 awsome 하게, cool하게 만들어준다.

1. register 함수를 통해 입력값 등록 단순화

2. handleSubmit 함수를 통해 preventDefault와 onSubmit시에 함수 인자로 form값을 전달한다

그리고 비제어 컴포넌트를 활용하기 때문에 ref 에서 register함수(위의 ‘1’에서 썼던 그 함수)가 실행된다고 한다.

💡

제어 컴포넌트에서 setState를 사용했다면 비제어 컴포넌트에서는 ref를 이용해서 값을 얻는다.

⇒ 즉 React 컴포넌트 안에서 폼 데이터가 다뤄지는 것이 아니라 DOM 자체에서 다뤄진다는 뜻이다.

⇒ 이 방식은 사용자가 타이핑 하거나 값을 변경할 때 리랜더링을 줄여준다고 한다. ⇒ 그리고 제어 컴포넌트가 아니라 마운트 되는 속도도 빠르다고 한다.

💡

제어 컴포넌트는 사용자가 입력을 하는 액션을 취할때마다 리렌더링을 발생시키는 반면, 비제어 컴포넌트는 사용자가 직접 트리거 하기 전까지는 리렌더링을 발생시키지도 않고, 동기화 시키지도 않는다.

제어 컴포넌트 vs 비제어 컴포넌트에 대하여 참고할만한 글

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점

제어 컴포넌트에 대한 공식문서의 설명은 아래와 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트 (controlled component)"라고 합니다.

https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0

이 글을 읽고 나면 뭐야.. 비제어 컴포넌트 쓰면 유효성 검사는 어떻게 해요? 란 의문이 들었는데, react-hook-form도 다 생각이 있더라.

한 페이지에 여러 form이 존재할 경우 더욱 유용한 것 같다. (이 부분은 아직 리액트에 대한 이해도가 낮아서 정확히 이유는 모르겠지만, 구글링한 결과 react-hook-form을 사용하여 리팩토링한 사례를 보면 그런갑다 하고 이해중이다.)

Uploaded by N2T