1. id, password 입력데이터 저장

로그인을 하기 위해서 여러가지 조건들이 필요하다. 예를 들어서 이메일의 경우 '@'가 반드시 필요하고 비밀번호는 몇자이상이여하고 기타등등 아마 여러가지 조건들을 봐온 경험이 있을것이다. 이러한 입력데이터를 확인하여 로그인을 진행하기 위해서는 입력데이터를 저장해줘야한다.

1-1 state를 활용한 로그인 데이터 저장

//login.js
import { useNavigate } from 'react-router-dom';
import { useState } from 'react'; // state를 사용하기위해 import선언

import './Login.scss';


function Login() {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate('/main');
  };

  const [id, setId] = useState(' '); // 1. id창의 초기값은 빈값이므로 빈배열로 지정해 준다.
  const saveUserId = event => { //3. 함수는 이벤트를 인자로 받는다.
  setId(event.target.value);
  // 4.event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장
  };

  const [pw, setPw] = useState(' '); // 1. pw창의 초기값은 빈값이므로 빈배열로 지정해 준다.
  const saveUserPw = event => { //3. 함수는 이벤트를 인자로 받는다.
  setPw(event.target.value);
  // 4.event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장  
  };
  
  return(
    <div className="login">
      <div className="backGround">
        <h1 className="logo">westagram</h1>
        <div className="container">
          <input
            onChange={saveUserId} // 2.위에 id창 관련된 함수명을 onchange 이벤트를 이용하여 이벤트적용
            type="text"
            placeholder="전화번호, 사용자이름 또는 이메일"
            className="login"
          />
          <input
            onChange={saveUserPw} // 2.위에 pw창 관련된 함수명을 onchange 이벤트를 이용하여 이벤트적용
            type="password"
            placeholder="비밀번호"
            id="pw"
            className="login"
          />
              <input
            onChange={saveUserPw}
            type="password"
            placeholder="비밀번호"
            id="pw"
            className="login"
          />
          <button
            id="loginBtn"
            className="login"
            onClick={goToMain}
          >
            로그인
          </button>
        </div>
        <a
          className="forgotPw"
          href="https://www.instagram.com/accounts/password/reset/"
        >
          비밀번호를 잊으셨나요?
        </a>
      </div>
    </div>
  );
} 

위의 내용과같이 로그인 관련데이터를 저장할수 있고 console.log를 통해서 확인 해 볼수있다.

저정한 데이터를 이용하여 로그인 조건가 맞는지 확인 후 로그인을 진행시켜줄 수 있다.