리액트 로그인 패턴 (with Redux, Axios)

 

리액트로 로그인 기능을 구현하는 패턴을 알아보겠다. 

 

1. 우선 로그인 기능을 구현하는 feature폴더의 login.tsx

2. feature안에서 실질적으로 값들을 입력받아 async함수로 api를 호출한 값을 토대로 데이터를 가공하는  useLoginForm 커스텀 훅

3. 유저에 관한 서비스이므로  AuthService 클래스에 존재하는 login 함수 = 실제로 axios를 통해 api를 호출하는 함수

4. Redux를 이용한 상태관리를 할 것이므로 api로 받아온 데이터의 값에 따라 상태를 변경해 줄 리듀서와 acion들

5. Redux-saga를 이용한 middleware 

 

1. feature 폴더의 login.tsx에는 로그인에 관련된 기능을 적어준다. 클라이언트가 직접 form에 id와 password를 입력해주어야하므로 두 개의 state를 가지고 이 state를 useLoginForm 커스톰 훅에 전달해주는 역할이다. 

 

여기서는 리액트의 함수형 컴포넌트이므로 리덕스의 useSelector훅을 이용해 상태에 따라 다른 화면을 보여주는 역할과 사용자가 직접 입력한 값을 api로 전달할 수 있게 해주는 역할을 수행한다. 

 

2. useLoginForm 커스톰 훅

 

useLoginForm

커스톰 훅에서는 api로 부터 받아온 데이터를 가공하고 그 데이터의 상태에 따른 처리를 해준다. 

 

3. 대부분 유저면 유저 파일업로드면 파일 업로드에 관한 함수들 끼리 모아두는 것이 좋은데 이를 위해서 class를 정의한다. 

위는 user에 관한 api호출을 담당할 authService 클래스의 login함수를 정의해준 모습이다. 

 

4. 

Redux reducers

Redux의 store에서는 action과 리듀서들을 정의해준다. 

 

5. saga에서는 실행되는 리듀서에 의해 실행되는 saga를 만들어준다.