DiaryProject(React) - 회원가입 폼

• 다이어리 웹 앱 프로젝트 / 회원가입 폼 작성.

코드 요약

1. 유저 데이터를 입력받는 State 생성
2. 각 input에서 onChange 발생하면 setState로 값 저장
3. onSubmit 발생 시 state에 저장해놓은 input value UserData 객체에 저장

import React, {useState, memo, useRef} from 'react';
import './sign.css';

// SignUp 컴포넌트로 분리
// React memo를 통해 무의미한 렌더링 방지
const SignUp = memo(() => {
  // 회원가입 정보를 객체형태로 저장하기 위해 배열 state 생성
  const [userData, setUserData] = useState([]);
  // 입력값 저장을 위한 state 생성
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [pwCk, setPwCk] = useState('');

  // 회원가입 폼에서 변화가 onChange 이벤트가 일어나면 그 값을 각각의 state에 저장
  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeEmail = (e) => {
    setEmail(e.target.value);
  };
  const onChangePw = (e) => {
    setPw(e.target.value);
  };
  const onChangePwCk = (e) => {
    setPwCk(e.target.value);
  };

  // Form onSubmit 이벤트가 일어나면 각 input 값을 저장해놓은 스테이트의 현재값을 UserDate에 객체 형태로 저장
  const onSubmit = (e) => {
    e.preventDefault();
    setUserData((prevUserData) => {
      return [
        ...prevUserData,
        {
          name: {name},
          email: {email},
          pw: {pw},
          pwCk: {pwCk},
        },
      ];
    });
    console.log({userData});
  };
  return (
    <>
      <div className='formDiv'>
        <h1>회원가입</h1>
        <form onSubmit={onSubmit} className='formTag'>
          <div className='inputContainer'>
            <label htmlFor='nameInput'>이름</label>
            <input type='text' id='nameInput' onChange={onChangeName} />
          </div>
          <div className='inputContainer'>
            <label htmlFor='emailInput'>이메일</label>
            <input type='text' id='emailInput' onChange={onChangeEmail} />
          </div>
          <div className='inputContainer'>
            <label htmlFor='pwInput'>비밀번호</label>
            <input type='text' id='pwInput' onChange={onChangePw} />
          </div>
          <div className='inputContainer'>
            <label htmlFor='pwCkInput'>비밀번호 확인</label>
            <input type='text' id='pwCkInput' onChange={onChangePwCk} />
          </div>
          <button>회원가입 완료!</button>
        </form>
      </div>
    </>
  );
});

export default SignUp;

개선점

1. onChange이벤트가 발생할 때마다 렌더링이 발생
   1) state가 아닌 일반 변수 할당으로 해결할 수 있는 지 확인
2. password, passwordCheck input이 일치하지 않으면 alert 메세지 출력
3. email input은 email 형태로 작성하게 하기
4. 비밀번호 조건 설정하고 일치하지 않으면 alert 메세지 출력
5. new Date를 통해 고유 id 부여하기 (또는 date, 이메일, 닉네임의 조합)
6. input이 하나라도 빈 값(undefined)로 출력되면 setState 안되게 하기. + 위의 input 조건 충족안될 시 setState 다 멈추게 하기