👀뭘합쳐요,...?

React 프로젝트를 하다보면 회원가입같은 기능을 구현할 때가 많습니다.
그때는 보통 state를 id,pw 두 개를 따로 놓고 사용하는 경우가 많더라고요. 저도 그렇게 만들었었습니다. 그래서 state의 초기값을 0이나 빈 string 을 선언하는 경우가 많았는데 id와 pw의 state를 어떻게 합치는지 알아보도록 하겠습니다!

회원가입 본문 (Login.js)

/* eslint-disable react/jsx-no-useless-fragment */
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import './login.scss';

function LoginIntae(props) {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  //id와 pw가 변경되었을 때를 감지해서 state가 변경되게 하였습니다
  
  //기존 uri에서 정보를 받아서 id와 pw를 체크합니다.
  const onClick = () => {
    fetch('http://10.58.1.34:8000/users/signup', {
      method: 'post',
      body: JSON.stringify({
        email: id,
        password: password,
      }),
    })
      .then(response => response.json())
      .then(data => localStorage.setItem('access_token', data.access_token));

    infoValid ? navigate('/main-intae') : navigate('/main-login');
  };
  

  const onChangeId = e => {
    //id값이 onChangeId 함수가 끝나야만 등록된다.
    setId(e.target.value);
  };
  const onChangePassword = e => {
    setPassword(e.target.value);
  };
  

  const infoValid = id.includes('@') && password.length >= 5;
//id에 @이 포함되어 있으면서, password의 길이가 5이상인 경우만 navigate가 활성화 됩니다.
  return (
    <>
      <div className="container">
        <div className="login_container">
          <div className="login_logo">Westagram</div>
          <form className="login_account">
            <input
              onChange={onChangeId}
              value={id}
              type="text"
              class="account_id"
              placeholder="전화번호, 사용자 이름 또는 이메일"
            />
            <input
              onChange={onChangePassword}
              type="password"
              className="account_pw"
              placeholder="비밀번호"
            />
            <button
              className={
                infoValid ? 'login_button_after' : 'login_button_before'
              }
              onClick={onClick}
            >
              로그인
            </button>
          </form>

          <div className="forgot_pw">
            <a href="/">비밀번호를 잊으셨나요?</a>
          </div>
        </div>
      </div>
    </>
  );
}

export default LoginIntae;

우리가 지켜볼 부분은 이부분입니다!

  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  ///
   const onChangeId = e => {
    setId(e.target.value);
  };
  const onChangePassword = e => {
    setPassword(e.target.value);
  };
   //<input
              onChange={onChangeId}
              type="id"
              className="account_id"
              placeholder="아이디"
            />
   <input
              onChange={onChangePassword}
              type="password"
              className="account_pw"
              placeholder="비밀번호"
            />
   
   //코드를 보면 같은 구조로 되어있습니다 ! 이부분을 어떻게 합칠까요?
  

그래서 뭐 어떻게 하라고..?💢

1. state를 하나로 만들고 , default값을 object로 선언합니다.

const [userInfo, setUserInfo] = useState({ id: '' , pw: ''});

2.이벤트도 하나로 만들어줍니다!

const onChangeUserInfo = event =>{
const { value, name } = event.target 

//event.target안에 있는 event가 발생되는 주체인 input의 속성인 value랑 name을 가져옵니다.

//name을 가져온 이유? -> input의 고유한 속성으로써 id와 password의
각각 다른 value를 가져오기 위함입니다.

	setUserInfo(...userInfo,[name]:value);
    
 //...userInfo를 한 이유? ->state는 업데이트 되면 기존값이 사라지고 새로운 값으로 업데이트 됩니다. 근데 ...을 사용하면 기존에 있던 값이
유지되면서 업데이트 됩니다!

 //[name]:value ? -> 오브젝트의 value값을 가져올 때 이런식으로 사용하는데 html 부분에서 name에 id,password를 줍니다.
 //그 때 name과 value가 맞았을 때의 그 value값을 가져옵니다.
    }
    
 3.input에 name과 함수 이름을 바꿔줍니다!
 <input
              onChange={onChangeUserInfo}
              type="id"
              name="id"
              className="account_id"
              placeholder="아이디"
            />
   <input
              onChange={onChangeUserInfo}
              name="password"
              type="password"
              className="account_pw"
              placeholder="비밀번호"
            />

이렇게 하면 좀 더 효율적으로 코드를 써서 관리할 수 있습니다!!
많은 데이터 타입이 있지만, object를 사용해서 더 효율적으로 사용해봅시다 !!!