[react] 비밀번호와 비밀번호 확인 value 검사하기(feat. useState는 언제 사용하는가)

<이 글은 비밀번호와 비밀번호 확인 value 검사하는 코드를 정리하고, useState는 언제 사용하는지를 파악하고자 작성한 글입니다.>

 

내가 짠 코드

  const [isSame, setIsSame] = useState(false);

  const onChangePasswd = () => {
    if (passwd === passwdCheck) {
      setIsSame(true);
    } else {
      setIsSame(false);
    }
  };

 

 

문제점

passwd와 passwdCheck를 동일하게 입력해도 isSame은 false가 나왔고, passwdCheck에 값을 하나 더 입력해줘야 true가 나왔다

실제로, passwd:aaa, passwdCheck:aaaa를 입력해야 true가 나왔다

위의 과정은 console.log로 passwd, passwdCheck, passwd === passwdCheck, isSame을 모두 확인해본 뒤 알게되었다(console.log야 고마운데 안고마워~~)

어떤 과정을 통해 이때 true로 바뀌는지는 알 수 없으나 멘토님이 내 코드의 로직이 꼬인 것 같다고 하셨다

 

 

해결방안

사실 위의 함수가 있는 컴포넌트(<Singup />)는 다른 컴포넌트(<UserFrom />)의 하위 컴포넌트였고, 상위 컴포넌트에서 이미 나는 user가 입력한 id, passwd, passwdCheck가 담긴 객체를 useState로 관리 중이었다

그래서 사실은 하위 컴포넌트에서도 useState를 사용할 필요가 없었고, 아래와 같이 간단하게 바로 선언해줘야 했다

 

 

수정한 코드

  const isSame = passwd === passwdCheck;

 

 

알게 된 점

useState를 남발하지 맙시다

진짜 state로 관리해야 하는 값인지 정확히 판단해야 한다

 

공식문서에 따라 useState를 사용해야 하는 state인지 확인하려면?

1) props를 통해 부모로부터 전달됩니까? 그렇다면 아마도 state가 아닐 것입니다.
2) 시간이 지나도 변함없나요? 그렇다면 아마도 state가 아닐 것입니다.
3) 컴포넌트의 다른 상태 또는 prop을 기반으로 계산할 수 있습니까? 그렇다면 state가 아닙니다.

 

 

전체 코드

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

const Signup = () => {
// 입력한 데이터 담기
  const [userData, setUserData] = useState({
    id: '',
    passwd: '',
    passwdCheck: '',
    name: '',
  });

// 입력값 바뀔 때마다 저장하기
  const handleInput = e => {
    setUserData({
      ...userData,
      [e.target.name]: e.target.value,
    });
  };

  const { id, passwd, passwdCheck, name } = userData;
  const navigate = useNavigate();

// 비밀번호와 비밀번호 확인 같은지 체크하기
  const isSame = passwd === passwdCheck;


// input에 모든 입력값이 다 입력되었는지 체크하기
  const isValid = id !== '' && isSame === true && name !== '';


// localStorage에 회원가입한 아이디와 비밀번호 저장하기
  const goToLogin = () => {
    localStorage.setItem('id', id);
    localStorage.setItem('passwd', passwd);
    navigate('/login');
  };

  return (
    <form className="signup" onChange={handleInput}>
      <span className="title">Signup</span>
      <input
        className="userInput"
        name="id"
        type="text"
        placeholder="아이디"
        value={id}
      />
      <input
        className="userInput"
        name="passwd"
        type="password"
        placeholder="비밀번호"
        value={passwd}
      />
      <input
        className="userInput"
        name="passwdCheck"
        type="password"
        placeholder="비밀번호 확인"
        value={passwdCheck}
      />
      {passwdCheck !== '' && !isSame && (
        <p className="passwdCheck">비밀번호가 다릅니다.</p>
      )}
      <input
        className="userInput"
        name="name"
        type="text"
        placeholder="이름"
        value={name}
      />
      <button
        className="formBtn"
        disabled={isValid ? false : true}
        onClick={goToLogin}
      >
        Signup
      </button>
      <Link to="/login" className="linkTranslationBtn">
        이미 가입하셨나요?
      </Link>
    </form>
  );
};

export default Signup;

 

 

Resources

https://itchallenger.tistory.com/573