[React/Javascript] 리액트 CLI로 로그인 구현하기(DB연결 X)

목차

 

- 리액트 cli 다운로드

- hooks

- 로그인 구현

- 삼항연산자 조건문 true일 때만 or false일때만

 

리액트 CLI 다운로드

 

터미널에서

npx create-react-app [디렉토리명]

를 입력한다.(오래 걸림)

npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다.

 

webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다.

 

다 받아지면,

 

cd [디렉토리명]

npm run start

 

 

Hooks

 

함수형 컴포넌트에서,

 

상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다..

장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅

 

로그인 구현하기

 

App.jsx

 

import Login from './Components/Login/Login'; //디렉토라 불러와주기

const App = () => {

  return (
      <h1>Login</h1>
      <Login/>
    </div>
  );
}

export default App;

 

Login.jsx

 

import React, {useEffect, useState} from 'react'

// 함수형 컴포넌트이다.
const Login = () => {
	//간단하게 state를 바꿀 수 있는 방법이다. 이게 hooks임
    const [values, setValues] = useState({email:'', password:''})
    const [submit, setSubmit] = useState(false)
    const [islogin, setIslogin] = useState(true)

    const handleChange = (e) => {
        console.log(e.target.name, e.target.value)
        const {name, value} = e.target
        setValues({
            ...values,
            [name]:value
        })
    }

    const logout = e => {
        setIslogin(false)
    }

    const handleSubmit = e => {
        e.preventDefault()
        setSubmit(true)
        setTimeout(()=>{
            setSubmit(false)
            const result = true
            if( result === true){
                setIslogin(true)
                alert(`
                    이메일은 ${values.email} \n
                    패스워드는 ${values.password}`)
            } else {

            }
        }, 1000)
    }

전송 버튼을 누르면 버튼이 막혔다가, setTimeout으로 1초 뒤에 버튼 클릭이 가능해지도록 함.

 

로그인에 성공했다면? alert문으로 이메일과 패스워드를 띄워주고(연습이니까~)

 

 

 

useEffect(()=>{
        console.log('hello world')
    }, [])
    return(
        <form onSubmit={handleSubmit}>
            <ul>
                <li>
                    <label>이메일</label>
                    <input type="email" name="email" onChange={handleChange}/>
                    <br />
                    
                    //<span>이메일 형식이 올바르지 않음</span>
                </li>
                <li>
                    <label>패스워드</label>
                    <input type="password" name="password" onChange={handleChange}/>
                    //<span>패스워드는 8자리 이상입니다.</span>
                </li>
                <li>
                    <input type="submit" value="전송" disabled={submit}/>
                </li>

                {islogin ? <button onClick={logout}>로그아웃</button> : '로그인 하세요.'}
            </ul>

        </form>
    )
}

export default Login

 

 

삼항 연산자 True일 때만, 혹은 False 일때만 사용하고 싶다면 어떻게 해야할까?

false && 'hello world 보여라~ (false일때만)
true && <div>어쩌고저쩌고</div> (true일때만)