React - 로그인 페이지 기능 구현

 

 

로그인 페이지의 기능을 구현해보자!

 

Login.js

 

1. import React from "react";

: react 라이브러리에서 react의 함수나 클래스들을 가져와서 그 기능을 사용하려고 하는 구문이라고 보면 된다.

import { withRouter } from "react-router-dom";

: "react-router-dom"은 DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다.

"react-router-dom" 안에 있는 withRouter라는

 

2.

class Login extends React.Component {

 render(){

    return();

}

}

export default withRouter(Login);

: class형 컴포넌트를 만드는 형식이다.

- classLoginextendsReact.Component -> react에 있는 Component를 확장시켜 Login이라는 이름의 class형 컴포넌트를 생성

- render()는 화면을 그리는 메서드이며, return()을 통해 그려질 요소들을 반환한다.

- export default Feed; -> 다른 곳에서 Feed라는 컴포넌트를 사용할 수 있다.

ex) import Feed from "./component/Feed" 이런 식으로 가져와서 사용한다.

 

3. 

 constructor() {

    super();

    this.state = {

    };

}

state는 객체이며, state를 사용하기 위해서는  constructor()와 super()를 한 상태에서 this.state를 만들어야 한다.

 

Assignment

1.  로그인 버튼 눌렀을 때, 사용자가 입력한 id와 pw 콘솔에 나올 수 있게 해 주세요.

일단 아이디와 비밀번호를 입력했을 때, 그 아이디와 비밀번호를 어딘가에 저장해야 한다.

바로 state에 저장하는 것이다. 

state의 key와 value 값으로 userName과 userPW 만들고, 빈 값으로 초기화시킨다.

그러고 나서, input 태그에 어떠한 반응이 일어나면 발생하는 onChange라는 이벤트 헨들러를 적용시키고, 그에 맞는 함수들을 정의한다.

아이디와 비밀번호 창에 무언가를 입력했을 때, onChange가 발생하고, 거기에 맞는 함수가 실행된다.  여기서 event는 이벤트가 발생할 때 생기는 것들이 여러 가지가 담겨 있다.

그중, event.target.value는 해당 요소의 값을 의미하고, setState()를 통해서  기존 비어있는 state의  userName, userPW값에 내가 입력한 아이디와 비밀번호 값으로 업데이트를 한다.

버튼을 클릭해서 console 창에 확인하기 위해서 , button에 onClick 이벤트 핸들러를 적용시켜야 한다.

 

함수가 실행되면 콘솔 창에서 값을 확인할 수 있다.

 

 

2. 사용자가 입력한 id와 pw가 기준(id - '@' 포함 / pw - 5글자 이상)에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.

idInputCheck( ), pwInputCheck( )의 조건으로, 아이디에서는 includes( )를 사용하여 @가 있는지 여부를 확인하고, 비밀번호에서는 조건문 >= 5를 이용해서 5자 이상인지를 확인한다.

조건이 충족하면, idChecked와 pwChecked의 값을 true로 만든다. 왜냐하면,  버튼을 활성화시키기 위해서 라고 보면 된다.

idChecked와 pwChecked의 값이 true가 되면, btnChangeColor( )가 실행되고, 버튼 색이 '#83ccfb'으로 바꾼다.