로그인/회원가입 - #22 회원가입 페이지

회원가입 페이지

로그인 페이지와 마찬가지로 간단하게 입력하는 폼들과 회원가입 버튼을 가지는 페이지다. 해당 화면을 마크업 한다면 아래와 같다.
엄청 간단한 페이지이며, 코드는 아래와 같이 만들었다.
로그인 페이지와 같이 폼태그를 이용해 요소들을 구성했으며 가각 onChange이벤트에 핸들러함수를 연결해주었다.
각각의 핸들러 함수는 아래와 같다.
그리고 이 핸들러함수들은 각각 상태를 업데이트하는데 해당 상태들은
이렇게 구성되어 있다.
크게 어려운 코드는 없었지만, SIGN-UP을 통한 로직이 일어나는것은 Submit으로 연결해 주었다.
우선 회원가입의 로직은 아래의 수도코딩을 먼저 작성하였다.

• 우선 비밀번호와 비밀번호 확인이 일치하는지 확인한다.
• 서버에 보내줄 데이터를 객체로 맵핑한다.
• dispatch메서드를 이용하여 registerUser이라는 액션에 맵핑된 객체를 넣어 반환된 액션객체를 넣어준다.
• dispatch로 전달받은 액션객체를 Reducer가 파악하여 리덕스 저장소에 상태를 업데이트 한다.
• 해당 과정을 성공하면 로그인페이지로 이동시킨다.

위의 과정을 먼저 작성한 뒤, 코드로 작성해 보았다.

비밀번호 확인

데이터 객체로 맵핑

dispatch를 이용해 action객체 전달

전달받은 action객체를 reducer가 업데이트

성공시 로그인페이지로 이동

결과