Dnote 5 - 2. React - 로그인 및 회원가입 기능 구현.

killi8n·2018년 9월 23일
2

Dnote

목록 보기
12/15
post-thumbnail

Django API를 바탕으로, 리액트에서 로그인 및 회원가입 기능을 구현해보겠습니다.

이제 첫 화면에서는 오류가 나겠죠? 401 Unauthorized가 나옵니다.
권한 설정을 했는데, 저희는 Header에 Authorization을 주지 않아서 그런건데요, 일단 이 오류는 무시하고 로그인 회원가입 기능을 구현하겠습니다.

다음 파일들을 생성해줍니다.

components/auth/AuthForm/AuthForm.js

components/auth/AuthForm/AuthForm.scss

components/auth/AuthForm/index.js

그리고 pages의 Auth를 손봐야합니다.

pages/Auth.js

이제 redux의 auth module을 생성해볼까요?

일단 다음 액션들만 처리해주겠습니다.

modules/auth.js

modules/index.js

containers/AuthContainer.js

pages/Auth.js

components/auth/AuthForm/AuthForm.js

이렇게 까지하면, 폼인풋들을 상태관리 할수 있고, 레지스터와 로그인 페이지간 이동할때, 모든 인풋밸류가 초기화 됩니다.

그렇다면 이제 API통신을 통해 login 과 register기능을 구현해보겠습니다.

그리고 그에따른 에러처리를 해보도록 하죠.

modules/auth.js

modules/index.js

containers/AuthContainer.js

components/auth/AuthForm/AuthForm.js

이렇게 되면 API 통신이 완료됩니다. 그에따른 오류처리도 됩니다.

다음 에서는 로그인을 유지하고, 로그인이 되지 않았을때에는, 로그인 페이지로 보내고, 로그아웃 기능을 구현해보겠습니다.

profile
killi8n

0개의 댓글