React: 로그인 버튼에 불 들어오게 하기 (1)

로그인 버튼에 불들어오게 하기...바닐라 js에서는 그토록 간단했던 것이, react에서는 2배로 간단해져버렸다...

로그인 버튼에 불 들어오게 하려면, 2개의 조건이 충족되어야 한다.

1. 아이디에 '@'가 포함될 것
2. 비밀번호가 5자리 이상일 것

이 규칙을 지키면 불이 들어오는 로그인 버튼을 한 번 만들어보자!

버튼 활성화 전 코드

import styles from './Login.module.scss';
import { Link, useNavigate } from 'react-router-dom';


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


  const goToList = () => {
    navigate('/main-geunhongLim');
  };

  return (
    <section className={styles.loginBox}>
      <figure className={styles.ghLogo}>
        <img src="images/logo.png" alt="logo" />
      </figure>
      <div className={styles.loginFormBox}>
        <input
          type="text"
          placeholder="전화번호, 사용자 이름 또는 이메일"/>
        <input
          type="password"
          placeholder="비밀번호"/>
        <button/>
          로그인
        </button>
      </div>
      <div className={styles.lostPasswordBox}>
        <Link to="/" className={styles.ghLink}>
          비밀번호를 잊으셨나요?
        </Link>
      </div>
    </section>
  );
}

export default Login;

이렇게 생긴 코드로 구현 화면은 아래와 같다!

via GIPHY

1. 아이디 값

아이디에 대한 조건식은 간단하다.
아이디의 value에 includes 메소드를 써서 '@'가 있는지 확인하면 된다.
그러기 위해서는

1. id에 들어오는 값이 바뀔 때마다 확인을 해야하고
2. 그 값을 저장하는 곳을 계속 갱신해야한다.

바닐라와는 달리 js에서는 state와 props을 써서 이런 갱신(?)을 처리한다. 이유는, 이 둘을 사용하면 값이 변할 때마다 rendering을 다시해주기 때문이다. 일반 변수에 넣어도 해결인 되지만, 자동으로 렌더링해주는 것을 이용하는 것이 좋지 않겠나?

사실 state를 왜 써야하는지에 대한 이해를 아직 잘 못한 것 같다. 처음 배우니 너무 욕심부리진 말고 일단 눈 앞의 문제를 해결해보자... (시간이 지나면 자연스럽게 알아차리는 날이 오지 않겠는가?...)

나는 function형을 쓸 것이기에, useState를 import 해줘야한다.

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

import는 제일 상단하는 것임을 잊지 말자!

function Login() {
  const navigate = useNavigate();
  const [idValue, setIdValue] = useState('');

useState 선언도 가장 위에서 해줘야 한다.
첫번째 idValue는 말그대로 값이 들어가는 변수 자리이다. 두번째 setValue는 값을 갱신해주는 함수이다. useState에 들어가는 것은 초기값이다.
초기값을 잘 생각해야한다. 예를 들어 계속 갱신받을 값이 배열이고 아래에서 배열에 대한 메서드를 쓰고 싶으면 초기값에 배열이라고 알려줘야 한다. 그렇지 않으면 에러가 뜬다.

이제 필요한 건 아이디 인풋에서의 이벤트 함수이다. 인풋이 변할 때마다 이벤트를 발생시킬 것이니 'onChange'를 써줄 것이다. 이벤트의 값으로 들어오는 것은 함수여야한다. 즉 콜백함수를 넣어주면 된다. 함수는 기능을 1가지만 하는 것이 좋다는 clean code의 가르침을 받아서 ... 아이디와 비밀번호를 나누려고 했으나, 이렇게 귀찮게 해야하나?? 라는 생각에 handleInput 함수를 만들어 이벤트 값을 리턴해주기로 했다.

그전에, 바닐라 js에서는 input.value로 아이디값을 받았던 것을 여기서는 이벤트 안에서 바로 event.target.value로 받는다. (이벤트가 발생하는 타켓의 값 이라고 생각하면 된다.)

const handleInput = (event) => {return event.target.value}

target에 무슨 프로퍼티가 있는지 확인하고 싶다면 콘솔에 찍어서 찾아도 된다. 지금은 값이 필요한 것이니 value를 썼다.

이렇게 리턴 받은 값을 idValue에 넣어주면 된다. 여기서 잠깐!
idValue는 계속 갱신되니 setIdvalue를 써주면 된다!

<input
      type="text"
      placeholder="전화번호, 사용자 이름 또는 이메일"
      onChange = {(event) => { setIdValue(handleInput(event))}}
      />

간단히 설명해보자면.

1. 아이디 값이 변할 때마다 onChange가 이벤트를 캐치한다.
2. onChange는 콜백함수를 발동시키는데, 우리는 콜백함수의 인자를 event로 받을 것이다.
3. 이 이벤트 타켓에 대한 값을 리턴 받는 함수(handleInput)가 아이디값을 보내줄 것이다.
4. 리턴받은 값으로 setIdValue가 계속 갱신할 것이다.

이제 idValue 변수를 콘솔에 찍으면??

값이 변할 때마다 갱신된다! wow!!!!

via GIPHY

힘낸 나에게 박수...!!