노드&리액트 공부기록(13) - 리덕스(Redux) 사용하여 로그인 페이지 만들기

현재 Boiler Plate는 로그인과 회원가입 부분을 Formik과 Yupdlfk이라는 라이브러리를 사용하여 좀더 복잡하게 만들었으나 기본강의이기 때문에 기본 기능만 가진 로그인 페이지를 만들어 보도록 한다.

• 로그인
• 이메일
• 비밀번호
• 확인

 

1. 로그인 화면 생성

앞서 언급했던 props, state 중에서

로그인 화면 안에서 데이터 변경 시에는 state에 변화를 주어서 data의 변화를 줄 수 있음.

 

 

2. React Hook에서 state 만들 때에는 useState를 사용한다.

const [Email, setEmail] = useState("")
const [Password, setPassword] = useState("")

• initialState는 처음 값이 어떻게 되는지 설정하는 것이라 "" 빈칸으로 설정함.

3. onchange 이벤트 발생시키기

• Email, Password, form태그에 각각 Handler 이벤트를 주어 값을 바꾸어줌.
• event.preventDefault() 가 없으면 아무것도 적지 않아도 칸을 누를 때마다 매번 페이지가 리프레쉬됨. 이것을 막기 위해 넣어줌.

<input type="email" value={Email} onChange={onEmailHandler} />

 

5. dispatch 만들기

• 리덕스 데이터 Flow를 보면, Dispatch를 취한 다음 action으로 흘러가게 되어 있다.

 

loginPage에 dispatch를 만들고 이 dispatch를 이용하여 액션을 취할 것인데,

액션 이름은 loginUser로 한다.

 

6. 취할 action 만들기 - user_action.js

 

7. user_reducer.js

 

Reducer : previousState, action을 조합해서 다음 next로 만듦.

 

그런데 앞으로 기능이 더 많아지면 type도 여러 가지가 될 수 있으니 type.js를 만들어서 이곳에서 따로 관리해 준다.

 

8. run start dev , localhost:3000/login 접속하면

 

만들어둔 로그인 화면이 나온다.

 

그런데 로그인 해보면 500번 뜨네,,,?ㅎㅎ 방금까지 저 로그인 화면 띄우는 데까지 2시간 삽질해서ㅠㅠ

이건 다시 확인해봐야 할 것 같다....

 

로그인 구현하기... 리액트 강의 들으면서 제일 어려웠다......