React) input 이용하여 로그인 구현하기

클론코딩 한 로그인 창

 

해당 기본 세팅에서

1. ID <input> 에서 onChange event가 발생합니다.

   <input onChange = {(e) => {}}

 

2. event 발생 시 saveUserId 함수가 실행됩니다.

   <input onChange = {(e) => {saveUserId}}

 

3. saveUserId 함수는 이벤트를 인자로 받습니다.

   <input onChange = {(e) => {saveUserId(e)}}

 

4. event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장합니다.

   const [inputId, setInputId] = useState ('');

 

   function saveUserId(e) {

  setInputId('e.target.value');

}

 

5. 위의 과정을 Password <input> 에도 동일하게 적용합니다.

 

import React, { useState } from "react";

const Login = (a) => {
  const [inputId, setInputId] = useState("");
  const [inputPw, setInputPw] = useState("");

  function saveUserId(e) {
    setInputId(e.target.value);
    console.log(e.target.value);
  }

  function saveUserPw(e) {
    setInputPw(e.target.value);
    console.log(e.target.value);
  }
  return (
    <>
      <input
        onChange={(e) => {
          saveUserId(e);
        }}
        className="id"
        type="text"
        placeholder="전화번호, 사용자 이름 또는 이메일"
      />
      <input
        onChange={(e) => {
          saveUserPw(e);
        }}
        className="pw"
        type="password"
        placeholder="비밀번호"
      />
    </>
  );
};

export default Login;

 

 

1. 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 합니다.

색상뿐 아니라 버튼의 disabled 여부도 같이 조작해주세요.

(e.g., ID - @ 포함 / Password  - 5글자 이상)

 

조건

inputId.include('@') && inputPw.length>4

 

2.삼항 연산자를 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.

삼항 연산자 

{조건 ? (Ture일때) : (false일때) }

{inputId.includes('@') && inputPw.length>4 ?
      (<button  disabled={false}>
        로그인
      </button>):(<button  disabled={true}>
        로그인
      </button>)}
      
 //위치는 <button/> 태그가 있던 자리에 그대로 해 주었음.
 //삼항연산자
 //{조건 ? (true): (false)}
 //true,false자리에 disabled상태에 대해 true,false 할 때도 {} 잊지말기!

---

한거번에 보기

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import '../../Hein/Login/HeinLogin.scss';

const Login = a => {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/Main');
  };
  const [inputId, setInputId] = useState('');
  const [inputPw, setInputPw] = useState('');

  function saveUserId(e) {
    setInputId(e.target.value);
    console.log(e.target.value);
  }
  function saveUserPw(e) {
    setInputPw(e.target.value);
    console.log(e.target.value);
  }

  return (
    <div className="container">
      <div className="Westagram2">
        <a href="#none">Westagram</a>
      </div>
      <input
        onChange={e => {
          saveUserId(e);
        }}
        className="id"
        type="text"
        value={inputId}
        placeholder="전화번호, 사용자 이름 또는 이메일"
      />
      <input
        onChange={e => {
          saveUserPw(e);
        }}
        className="pw"
        type="password"
        value={inputPw}
        placeholder=" 비밀번호"
      />
      {inputId.includes('@') && inputPw.length > 4 ? (
        <button onClick={goToMain} disabled={false}>
          로그인
        </button>
      ) : (
        <button onClick={goToMain} disabled={true}>
          로그인
        </button>
      )}

      <div className="forgot">
        <Link to="#">비밀번호를 잊으셨나요?</Link>
      </div>
    </div>
  );
};
export default Login;

---

<배운점>

삼항 연산자를 사용하니, javaScript 때 했던 if 문 같은 것을 안쓰게 되니, 보다 코드가 간결하고 사용하기도 쉽게 되었다.