프로젝트 2일차 구조분해할당,정규식문법

import React, { useState } from 'react';
import './Login.scss';
import { Link, useNavigate } from 'react-router-dom';
const Login = () => {
  const [userId, setUserId] = useState('');
  const [userPw, setUserPw] = useState('');
  // const navigate = useNavigate();
  const saveUserPw = event => {
    setUserPw(event.target.value);
  };

  const saveUserId = event => {
    setUserId(event.target.value);
  };
  const login = () => {
    fetch('/data/login.json', {
      //TODO: 백에서 API완료되면 API주소넣어주기
      method: 'GET', // TODO: 백에서 로그인 기능 롼료되면 'POST'로 바꿔주기
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      // body: JSON.stringify({   // TODO: 백에서 로그인 기능완료되면 주석 해제하기
      //   email: userId,
      //   password: userPw,
      // }),
    })
      .then(res => {
        return res.json();
      })
      .then(data => {
        if (data.accessToken) {
          localStorage.setItem('accessToken', data.accessToken);
          alert('로그인성공'); //TODO navigate 넣어주기주소
        } else {
          alert('로그인실패');
          setUserId('');
          setUserPw('');
        }
      });
  };
  return (
    <div className="login">
      <div className="allLoginBox">
        <div className="logoBox">
          <img className="logoImg" src="/img/logo.png" alt="로고" />
          <img className="logoImg2" src="/img/logo2.png" alt="로고" />
        </div>
        <div className="allJoinBox">
          <div className="idPW">
            <input
              type="text"
              placeholder="이메일"
              value={userId}
              onChange={saveUserId}
            />
            <input
              type="password"
              placeholder="비밀번호"
              value={userPw}
              onChange={saveUserPw}
            />
          </div>
          <input
            style={{
              backgroundColor:
                userId.includes('@') && userPw.length >= 10 ? null : 'gray',
            }}
            className="loginButton"
            type="button"
            value="로그인"
            disabled={
              userId.includes('@') && userPw.length >= 10 ? false : true
            }
            onClick={login}
          />
          <div className="loginOption">
            <Link className="join" to="/main">
              회원가입
            </Link>
            <div></div>
            <span>비밀번호 찾기</span>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Login;

구조분해 할당 적용후!

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

const Login = () => {
  const [userInfo, setUserInfo] = useState({
    email: '',
    password: '',
  });
  const { email, password } = userInfo;

  const saveUserInfo = event => {
    const { name, value } = event.target;

    setUserInfo({ ...userInfo, [name]: value });
  };

  let regex = new RegExp(
    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
  );

  const isActiveBtn = regex.test(email) && password.length >= 10;

  // const navigate = useNavigate();

  const login = () => {
    fetch('/data/login.json', {
      //TODO: 백에서 API완료되면 API주소넣어주기
      method: 'GET', // TODO: 백에서 로그인 기능 롼료되면 'POST'로 바꿔주기
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      // body: JSON.stringify({   // TODO: 백에서 로그인 기능완료되면 주석 해제하기
      //   email: email,
      //   password: password,
      // }),
    })
      .then(res => {
        return res.json();
      })
      .then(data => {
        if (data.accessToken) {
          localStorage.setItem('accessToken', data.accessToken);
          alert('로그인성공'); //TODO navigate 넣어주기주소
        } else {
          alert('로그인실패');
          setUserInfo('');
        }
      });
  };

  return (
    <div className="login">
      <div className="allLoginBox">
        <div className="logoBox">
          <img className="logoImg" src="/img/logo.png" alt="로고" />
          <img className="logoImg2" src="/img/logo2.png" alt="로고" />
        </div>

        <div className="allJoinBox">
          <div className="idPW">
            <Input
              scale="large"
              placeholder="이메일"
              type="email"
              name="email"
              onChange={saveUserInfo}
            />
            <Input
              scale="large"
              placeholder="비밀번호"
              type="password"
              name="password"
              onChange={saveUserInfo}
            />
          </div>

          <input
            className="loginButton"
            type="button"
            value="로그인"
            disabled={isActiveBtn ? false : true}
            onClick={login}
          />

          <div className="loginOption">
            <Link className="join" to="/main">
              회원가입
            </Link>
            <div></div>
            <span>비밀번호 찾기</span>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Login;

프로젝트 2일차 원래 기존에 useState 를 구조할당분해해서 하나의 코드로 정리해주었고
email 부분에 includes를 이용하여 disabled 활성화 비활성화를 로직을작성하였는데
이메일 형식에서 @@ 두개들어가거나 ..이 두번들어갔을때 오류가생기는 부분을 정규식문법을
적용 하여 해결하였고! useState도 하나로 만들어 로직을 완성하엿다 그리고 각자 name을
주어서 객체로 만들어 구분을 지어주엇고! Input 로직을 컴포넌트 props를이용하여 재사용
할수있게 구현하였는데 그안에서 조건을 줄수있는 방법은 아직 모르겠다. 컴포넌트로 나누었으나
아직 세분화를 적용 하지는 못하였다.

세분화는 input 사이즈로 글씨체 정도로 구분하였고 컴포넌트 세분화는 공부를 더해봐야할거같다.
조건을 이용하는 방법도 생각해 봐야할거같다.