로그인/회원가입 - #21 로그인 페이지(2)

전 글에서 로그인 페이지 렌더링까지 완성하였다.
이번에는 이제 로그인을 했을 때 전역에 있는 유저정보를 관리하는 상태를 업데이트 시킨뒤에 로그인 성공 여부에 따라 메인페이지로 보내는 로직을 만들어 볼것이다.

로그인 시도

우선 로그인을 하기위해선 로그인 버튼을 눌러야 할것이다.
그러면 form에서 submit으로 인해 페이지 이동이 발생한다.
우선 해당 폼의 submit에 이벤트를 먼저 연결 해주자.
onSubmit={onSubmitHandler} 이렇게 이벤트를 연결한 뒤에
해당 이벤트핸들러 함수를 만들어 할당 해준다.

해당 핸들러 함수의 기능을 수도코딩을 한다면 아래와 같다.
1. 기본 Submit 이벤트를 막아준다(페이지이동)
2. Redux의 dispatch를 통하여 액션을 전달한다.
3. 전달된 액션을 받는 reducer을 통하여 전역 상태를 업데이트한다.
4. 업데이트된 전역 상태를 접근해 로그인 성공 여부에 따라 페이지를 이동한다.

위의 로직의 흐름을 이용하여 전역상태를 변경하고 로그인 성공여부를 확인하여 화면을 이동시킬수 있다.
그럼 우선 첫번째인 기본 이벤트를 막아주자.
위 코드를 작성하면 기본으로 가지고있던 submit이벤트가 사라진다.
그런 다음 dispatch를 하기 위해서 react-redux에 존재하는 useDispatch hooks를 가져온다.
그리고 해당 dispatch인스턴스를 가져오기 위해
위와 같은 코드를 통하여 dispatch를 가져온다.
그 다음 이제 action객체를 dispatch에 넣어주면 되는데,
해당 user_action파일을 생성한다.

이 액션에는 로그인때 필요한 이메일과 패스워드를 객체로 받는다.
그 후 서버에 비동기로 로그인 요청을 날려 결과 객체를 받아오고 이 결과를 리턴하여 리듀서에게 해당 객체를 전달한다.

리듀서는 이 객체를 전달 받아 해당 액션의 타입에 따라 알맞은 상태값을 리턴하여 업데이트 한다
이렇게 리덕스의 전역 저장소를 이용하여 상태를 관리한다. 당장은 복잡하여 조금 어려워도 컴포넌트들의 관계가 커질수록 빛을 바랄것 같다.
아래는 로그인이 구현된 페이지이다.