westagram project(인스타그램 클론 코딩) - 로그인

안녕하세요.

wecode 기간 중 개인 프로젝트로

인스타그램 클론 코딩을 하게 되었습니다 ~!

 

오늘은 로그인 부분을 보겠어요

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

export default function Login() {
  const navigate = useNavigate();
  const [inputId, setInputId] = useState('');
  const [inputPw, setInputPw] = useState('');
  const [btnState, setBtnState] = useState(true);

  const goToMain = e => {  // 온서브밋 이벤트 발생시 메인으로 이동!
    navigate('/main');
  };

  const handleIdInput = e => {  //아이디 input 온체인지 시 state에 아이디 저장!
    setInputId(e.target.value);
  };

  const handlePwInput = e => {  //비밀번호 input 온체인지 시 state에 비밀번호 저장!
    setInputPw(e.target.value);
  };

  const handleActive = () => {   //아이디,비밀번호 state의 각각 조건이 맞으면 버튼 활성화!
    inputId.indexOf('@') > -1 && inputPw.length >= 5
      ? setBtnState(false)
      : setBtnState(true);
  };

  return (
    <div className="login">
      <div className="loginWrapper">
        <span className="loginTitle">westagram</span>
        <form
          className="loginInputBox"
          onSubmit={goToMain}
          onKeyUp={handleActive}
        >
          <input
            type="text"
            className="idBox"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={handleIdInput}
          />
          <input
            type="password"
            className="pwBox"
            placeholder="비밀번호"
            onChange={handlePwInput}
          />
          <input
            type="submit"
            id="logins"
            className="login"
            disabled={btnState}
            onClick={goToMain}
            value="로그인"
          />
        </form>
        <a href="#" className="forget">
          비밀번호를 잊으셨나요?
        </a>
      </div>
      <script src="login.js"></script>
    </div>
  );
}

주석으로 함수에 대한 설명을 붙였습니다 !!!

 

구조 분해 할당으로 각각 인풋을 저장하는 스테이트를 하나만 만들어도 된다는 코드 리뷰를 받아서

 

다음에 구조 분해 할당에 대해서 글을 남겨볼까 합니다 

 

아래는 구현 화면입니다

완성~