이제 사용자가 로그인을 할수있는 페이지를 만들어 보자
마크업 && 레이아웃
우선 현재 로그인 페이지를 보았을때 아래와 같다.
여기서 로그인 폼을 만들어 줘야한다.
그래서form과label,input태그들을 이용해 렌더가될 돔을 만들어 보겠다.
레이아웃은 위와 같이 대충 잡아보았다.
해당 레이아웃을 잡기위해 아래와 같이 마크업을 하였다.
마크업은 대충 끝났고 레이아웃을 잡아주기위해 flex를 이용하여 가운데 정렬을 해주었다.
그 다음 폼의 레이아웃을 세로로 정렬하기 위하여 다음과 같이 스타일을 주었다.
Input Value 상태관리(onChange)
Login Page안에서 데이터를 변경하기위해 상태로 관리해주는것이 좋다. 인풋안에 입력되는 갑들 또한 상태로 관리하기 위해 onChange 이벤트를 통하여 State를 업데이트 시켜주려고한다.
(Ref를 활용할 수 있지만 지금은 이 이벤트를 이용해 바꿔 주도록 하겠다)
우선 이메일과 패스워드를 관리할 수 있는 상태를 생성한 뒤,
Input들에게 각각의 onChange이벤트를 만들고, 해당 행들러 함수를 만들어 넣어 주었다.이렇게 할당 한뒤, 각각의 input Value에 해당 상태의 값을 넣어주면 아래와 같이 상태가 업데이트 되는것을 볼 수 있다.
이제 로그인 버튼을 눌렀을 때 리덕스에서 관리중인 유저인포의 업데이트가 일어나야 한다.
로그인 버튼의 이벤트와 로직은 다음 게시글에 적어야겠다.
Web Developer