로그인 버튼 활성화 구현하기

idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다.

그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다.

---

바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데

리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다.

일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다.

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

id와 pw의 input 창의 값을 불러오는 변수를 useState로 선언하고

초기 값은 아무것도 안 적혀있을 예정이니 빈 따옴표를 넣어주었다.

그리고 id와 pw의 값이 조건에 맞을 때, true일때

버튼이 활성화 되도록 useState를 선언 후 초기 값은 true로 넣어주었다.

  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');
  const [btnColor, setBtnColor] = useState(true);

id 값에 @가 포함되면서 pw의 값이 5글자 이상이어야 한다는 조건이 너무 길어서 condition이라는 변수로 선언해주었다.

  let conditon = idValue.indexOf('@') !== -1 && pwValue.length >= 5;

input의 속성 중 value 라는 속성이 있어서 value의 값에 useState idValue를 지정해주었다.

이때 value는 onchange와 짝지이기때문에 같이 쓰지 않으면 오류가 뜬다.

그래서 한참을 헤멨다ㅜㅜㅜ value를 쓰고 싶은데 onchange가 아니라면 defaultValuse를 써주면된다.

그리고 onchange에 매개변수를 e로하는 함수를 만들어 넣어주었다.

여기서도 e를 넘겨주어야만 함수에서도 e를 받을 수있다.. 글로 쓰니 당연하지만 ㅜ

리액트를 처음 써보는 나로써는 함수 안에 e를 적어주었는데 왜 또 e를 넘겨줘야돼? 하고 한참을 헤멨다.

          <input
            id="name"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            defaultValue={idValue}
            onChange={e => {
              saveUserId(e);
            }}
          />
          <input
            id="password"
            type="password"
            placeholder="비밀번호"
            value={pwValue}
            onChange={e => {
              savePwValue(e);
            }}
          />

onchange 안에 들어갈 함수는 매개변수 e를 가지고 target인 input창의 value 값이 바뀌면 인식하게 만들어주었다.

  const saveUserId = e => {
    setIdValue(e.target.value);
  };

  const savePwValue = e => {
    setPwValue(e.target.value);
  };

이제 버튼이 활성화되도록 만들어주자

조건이 만족하면 버튼을 누를 수 있고 만족하지 않으면 버튼이 눌리지 않도록 disabled를 썼는데

삼항연산자로 조건이 맞으면 false, 아니면 true로 적어 활성화 될 수 있도록 만들어주었다.

기본값이 false기때문에 반대로 적혀있다.

그리고 버튼의 색 변화는 연한색 진한색을 쓰는 것보다 진한색에서 opacity를 조절하면 더 쉽게 쓸 수 있다.

조건이 만족하면 투명도를 1로 올리고 만족하지 않으면 0.3으로 낮추어 연한색으로 보이게끔 만들었다.

그리고 onchange 함수 안에 usestate의 값이 true인지 false인지에 따라 움직이는 함수를 넣어주었다.

  const changeBtnColor = () => {
    setBtnColor(!btnColor);
  };

          <button
            style={{
              opacity: `${conditon ? 1 : 0.3}`,
              disabled: `${conditon ? 'false' : 'true'}`,
            }}
            id="button"
            onChange={changeBtnColor}
          >로그인
          </button>

마지막으로 버튼을 눌렀을 때 main 페이지를 넘어갈 수 있도록 useNavigate를 써주면 끝이다.

  const navigate = useNavigate();

  function goToMain() {
    navigate('/Main');
  }

완성된 화면은 이렇다.

 

아래는 전체 코드이다.

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

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

  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');
  const [btnColor, setBtnColor] = useState(true);

  let conditon = idValue.indexOf('@') !== -1 && pwValue.length >= 5;

  function goToMain() {
    navigate('/Main');
  }

  const saveUserId = e => {
    setIdValue(e.target.value);
  };

  const savePwValue = e => {
    setPwValue(e.target.value);
  };

  const changeBtnColor = () => {
    setBtnColor(!btnColor);
  };

  return (
    <div className="login">
      <div className="container">
        <h1>Westagram</h1>
        <div className="inputandbutton">
          <input
            id="name"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            defaultValue={idValue}
            onChange={e => {
              saveUserId(e);
            }}
          />
          <input
            id="password"
            type="password"
            placeholder="비밀번호"
            value={pwValue}
            onChange={e => {
              savePwValue(e);
            }}
          />
          <button
            style={{
              opacity: `${conditon ? 1 : 0.3}`,
              disabled: `${conditon ? 'false' : 'true'}`,
            }}
            id="button"
            onChange={changeBtnColor}
            onClick={goToMain}
          >
            로그인
          </button>
        </div>
        <p>비밀번호를 잊으셨나요?</p>
      </div>
    </div>
  );
}

export default Login;