TIL :: [React ] 로그인 버튼 활성화

• useNavigate를 사용하여 네비게이팅(=라우팅)을 하고자 할 때!
• 로그인 버튼 클릭 시 main 컴포넌트로 이동

import { Link, useNavigate } from 'react-router-dom';

function LoginSon () {
	const navigate = useNavigate();
    
    return(
        <div>
        	<button className="login_button"
        	  onclick={() => {
        		navigate('/main');
        	  }}
          	>
        	 로그인
        	</button>
        .
        .
        .

 

• 로그인 버튼  유효성 검증 !
• 로그인 버튼을 눌렀을 때 , id와 password의 조건에 맞춰  넘어 가게 하는 것과 안넘어가게 하는 것

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

function LoginSon () {
	const navigate = useNavigate();
    const [identify, setIdentify] = useState('');
    const [password, setPassword] = useState('');
    });
    
    const validation = (idText, pwText) => {
        if (!idText.includes('@')) {
          return false;
        }
        if (pwText.length < 7) {
          return false;
        }
    
        return true;
      };
      
      
    const buttonOnClick = () => {
        if (validation(identify, password)) {
          alert('로그인 되었습니다.');
          navigate('/main-son');
        } else {
          alert('로그인에 실패하였습니다.');
          setIdentify('');
          setPassword('');
        }
      }; 
      
    
    return(
        <div>
        	<input
            	className="login_input"
                name="identify"
                type="email"
                placeholder="전화번호,사용자 이름 또는 이메일"
                value={identify}
                onChange={(event) => {
                	setIdentify(event.target.value);
                }}
            />
                <input
            	className="login_input"
                name="password"
                type="password"
                minLength={5}
                placeholder="비밀번호"
                value={password}
                onChange={(event) => {
                	setPassword(event.target.value);
                }}
            />
        	<button className="login_button"
        	  onclick={() => {
        		navigate('/main');
        	  }}
          	>
        	 로그인
        	</button>
        .
        .
        .

 

 

• 로그인 버튼을 활성화 &비활성화  추가해주기

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

function LoginSon () {
	const navigate = useNavigate();
    const [identify, setIdentify] = useState('');
    const [password, setPassword] = useState('');
    
    const validation = (idText, pwText) => {
        if (!idText.includes('@')) {
          return false;
        }
        if (pwText.length < 7) {
          return false;
        }
        
    const valid = validation(identify, password);
    
        return true;
      };
      
      
    const buttonOnClick = () => {
        if (validation(identify, password)) {
          alert('로그인 되었습니다.');
          navigate('/main-son');
        } else {
          alert('로그인에 실패하였습니다.');
          setIdentify('');
          setPassword('');
        }
      }; 
      
    
    return(
        <div>
        	<input
            	className="login_input"
                name="identify"
                type="email"
                placeholder="전화번호,사용자 이름 또는 이메일"
                value={identify}
                onChange={(event) => {
                	setIdentify(event.target.value);
                }}
            />
                <input
            	className="login_input"
                name="password"
                type="password"
                minLength={5}
                placeholder="비밀번호"
                value={password}
                onChange={(event) => {
                	setPassword(event.target.value);
                }}
            />
        	<button 
            	className={valid ? 'login-button active' : 'login-button inactive'}
            	disabled={!valid}
            	onClick={buttonOnClick}
          	>
        	 로그인
        	</button>
        .
        .
        .

.login-button {
    border: 0px solid;
    border-radius: 3.5px;
    color: white;
    width: 268.594px;
    height: 30px;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;

    &.active {
        background-color: #0095f6;
        cursor: pointer;
      }
    
      &.inactive {
        background-color: #c4e1fb;
      }
    
}