쿠팡이츠 클론 기능구현-회원가입

UI는 styled-components로 작업했다.

 

회원가입

 

우선 회원가입에 필요한 email, password, name, phone 값을 받는다. 그리고 그 value 값 들은 

useInput이란 커스텀 훅을 만들어 중복을 최소화해줬다.

 

useInput은 input의 변화되면 onChange가 발생하고, handler 함수가 실행된다.

그중, event.target.value는 해당 요소의 값을 의미하고, setState( )를 통해서 기존 비어있는 state의 값에 내가 입력한 값으로 업데이트를 한다. useCallback은 리렌더링을 최소화해주기 위해 사용한다.

 

그렇게 state값을 업데이트해줬으면 그중 password 값과 passwordCheck의 값이 같은지 확인해주고 다르다면 passwordError 값을 false로 해줘 에러 메시지를 띄워줌과 동시에 onSubmit 함수는 작동하지 않는다.

 

값들을 다 입력한 후 회원가입 버튼을 누르면 antd Form의 onFinish 함수가 실행되는데 onFinish 함수는 e.prevent.default( )를 자동으로 해준다. 그리고 

 

SIGN_UP_REQUEST 액션을 디스패치 해준다. 그럼 sagas폴더의 user.js 파일로 가서

 

 

 SIGN_UP_REQUEST 액션이 실행되면 signUp 함수가 실행되고 signUp 함수에서는 signUpAPI를 실행하고 방금 받은 action.data를 인자로 전달해준다. signUpAPI에서 axios로 백엔드에 요청을 보낸 후 응답 값을 result에 저장하고 요청이 성공하면

SIGN_UP_SUCCESS 액션을 디스패치 실패하면 SIGN_UP_FAILURE 을 디스 패치해준다. 

 

그리고 reducers폴더 안 user.js의 리듀서 함수로 가서 들어온 action 값의 따라 성공하면  signUpDone 은 true로 실패하면 signUpError는 action.error를 줘 에러 캐치를 해준다.

 

다시 signup page로 돌아와서 useSelector 훅으로 store에 있는 signUpDone, signUpError 값을 가져온다. 그리고 signUpDone 이 true면 login 페이지로 이동시켜주고 signUpError 값이 있으면 알림 창에 에러를 띄워준다.