form 을 통해 데이터를 백엔드로 보내주는 라이브러리중 제일 인기많은것중 하나는 바로 React-hook-form 리액트 훅 폼 되시겠다..!
이번 사이드프로젝트 Side-Effect 에서는 로그인 과 회원가입 모두를 간단하게 모달로 처리하였다.
로그인시 회원이라면 액세스토큰을 저장하고 로그인 처리를 하고 회원이 아니라면 닉네임부터 입력하는 모달로 바뀌게된다 ^_^
여기서 문제! 나는 보통 리액트 훅 폼을 사용할때 유효성 검사를 하고 서버에 제출하는 정도로만 사용하였었다.
근데 회원가입중 필수인것이 닉네임 중복검사 이다..!! 닉네임 중복검사는 API요청을 보내서 확인해야하는데 어떻게 해야할까..?
모달의 전체적인 코드이다. Next 버튼을 누르면 제출이 되도록 되어있다.
Input 컴포넌트의 id 와 register 를 연결시켜준다. validate 는 콜백함수를 사용하여 유효성검사를 할수있게해준다.
validate 에 의해 실행될 콜백함수이다. 닉네임중복검사 API 요청을 서버에보내준다. 우리 서버에서는 true 면 중복이라는것으로 정의를 했다.
즉,response 가 있다면 중복된 닉네임, response가 없다면(falsy 하다면) 중복이 아닌것이다.
중복된 닉네임이 아니라면 return true로 반환하여 onSubmit 를 통해 다음으로 넘어가주도록 한다.
닉네임은 리덕스 스토어에 저정한다. 왜냐하면 회원가입 요청을 보낼때 닉네임을 같이 보내주어야하기때문이다.
또한 리덕스를 통해 회원가입 모달 화면을 제어하고있기때문에 디스패치를 날려 다음화면으로 넘어가게 해준다.
준비는 다 됐다.. 한번 중복검사를 한번 해볼까?
콘솔에도 에러가 잘 찍히는걸 볼수있다..!
ps. 에러메시지 애니메이션
에러메세지는 애니메이션을 주고싶어서 framer-motion 을 사용하여 따로 컴포넌트를 만들어주었습니다.
만약 닉네임뿐만아니라 비밀번호,이메일 등등 유효성검사할게 많다면 에러메세지를 각각 만들어줘야하는데 이렇게 컴포넌트로 따로 만들어주면 전부 애니메이션이 적용도되고 조금더 편할거같아서 따로 만들어서 사용하였습니다..!
'React' 카테고리의 다른 글
| React-Query - onClick 이벤트로 useQuery data fetching (0) | 2023.10.09 |
|---|---|
| React- 재사용성과 확장성을 높이는 리액트 컴포넌트 설계 하기 (1) | 2023.09.25 |
| React - 리액트 해시태그 구현 (0) | 2023.09.23 |
| 리액트 라이브러리없이 달력(Calender) 구현 with "date-fns" (0) | 2023.09.12 |
| React - useCallback, useMemo 에 대하여 (0) | 2023.07.04 |
