16. boilerplate - 로그인 페이지 (1)

boilerplate 유튜브 강의 시리즈

Blog ReactJS NodeJS #23 LOGIN PAGE (1)

 

1. 로그인 컴포넌트를 위한 파일 생성

components > RegisterLogin 폴더 생성 > index.js, register.js 파일 생성

2. 로그인 페이지 라우터 추가

App.js  > /login 경로에 로그인 컴포넌트 연결

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import About from './about';
import Login from './RegisterLogin';

function App() {
  return (
    <div>
      <Switch>
        <Route path="/about" component={About}/>
        <Route path="/login" component={Login}/>
      </Switch>
    </div>
  );
}

export default App;

 

3. 로그인 페이지 작성

RegisterLogin > index.js

import React, { Component } from 'react';

class RegisterLogin extends Component {
    render() {
        return (
            <div>
                Login page
            </div>
        );
    }
}

export default RegisterLogin;

테스트

4. materializecss 설치 및 적용

Materialise는 Google의 Material Design을 기반으로 한 최신 반응 형 CSS 프레임 워크이다.

client 경로에서 npm으로 설치한다.

npm install materialize-css@next

 

client > index.js 상단에 materializecss를 import한다.

import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";

 

5. 로그인 페이지 materializecss 적용

import React, { Component } from 'react';

class RegisterLogin extends Component {
    state = {
        email : "",
        password : "",
        errors : []
    };

    render() {
        return (
            <div className="container">
                <h2> Login </h2>
                <div className="row">
                    <form className="col s12" onSubmit={event => this.submitForm(EventSource)}>
                        <div className="row">
                            <div className="input-field col s12">
                                <input 
                                    name="email"
                                    value={this.state.email}
                                    onChange={e => this.handleChange(e)}
                                    id="email"
                                    type="email"
                                    className="validate"
                                />
                                <label htmlFor="email">Email</label>
                                <span
                                    className="helper-text"
                                    data-error="Type a right type email"
                                    data-success="right"
                                />
                            </div>
                        </div>

                        <div className="row">
                            <div className="input-field col s12">
                                <input 
                                    name="password"
                                    value={this.state.password}
                                    onChange={e => this.handleChange(e)}
                                    id="password"
                                    type="password"
                                    className="validate"
                                />
                                <label htmlFor="email">Password</label>
                                <span
                                    className="helper-text"
                                    data-error="wrong"
                                    data-success="right"
                                />
                            </div>
                        </div>
                        
                        <div className="row">
                            <div className="col 12">
                                <button
                                    className="btn waves-effect red lighten-2"
                                    type="submit"
                                    name="action"
                                    onClick={this.submitForm}
                                >
                                    Login
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

export default RegisterLogin;

 

6. 로그인 화면