[React] 회원가입 폼 UI 만들기 (1)

 

1. 회원가입 폼 만들기

 

handleSubmit() 

폼이 제출될 때  실행되는 함수 

여기서 나는 아직 백엔드랑 연결을 시키지 않았기 때문에!!

어떤 데이터가 입력이 되었는지를 보기 위해서 console.log에만 뜨도록 했다. 

 

e.preventDefault() 란?

--> 이벤트의 기본 동작을 취소하는 메소드이다. 

폼을 제출할 때 브라우저는 기본적으로 페이지를 새로고침하거나 새로운 페이지로 이동 동작을 수행한다.

이러한 동작을 하게 되면 계속해서 브라우저가 새로고침을 하게되어 제대로 폼이 제출되지 않을 수 있다.!

 

* e.preventDefault()가 없는 코드일 경우

--> 이렇게 폼 제출을 눌러도 console에 아무것도 저장되지 않는 것을 확인할 수 있다.

(왜??)-

-> 브라우저가 서버를 새로고침해버려서 그런것이다.

 

그래서 폼이 제출되었을 때 폼이 새로고침되어 기본 제출 동작하는 것을 막고 제대로 폼을 제출하기 위해서 e.preventDefault를 하는 것이다. 

 

 

2. 현재 내가 입력한 비밀번호랑 비밀번호 확인이 같은지 확인하기

코드 팁

if (password! == checkPassword) 를 해서 만약 둘이 다르면 다시 입력하게끔 하도록 하자

 

만약

비밀번호 둘을 다르게 입력하면 

 

 

 

 

const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert('비밀번호가 일치하지 않습니다.');
    } else {

      console.log('폼 제출 완료!:');
      console.log('이름:', username);
      console.log('이메일:', email);
      console.log('비밀번호:', password);
      console.log('휴대폰 번호:', phonenumber)
    }
  };
  
  

 
 <div className='form_pw'>
   <h5>비밀번호</h5>
   <input
   	type="password"
    placeholder='영어 대소문자, 숫자, 특수문자 중 2종료 조합의 8-15자'
    value={password}
    name='register_pw'
    onChange={handlePasswordChange}
   />
  </div>
  <div className='form_pw'>
    <h5>비밀번호 확인</h5>
    <input
    type="password"
    placeholder='비밀번호를 다시 입력해 주세요'
    value={confirmPassword}
    maxLength='20'
    name='register_pwcheck'
    onChange={handleConfirmPasswordChange}
   />
  </div>

 

 

3. useRef 를 사용하여 비밀번호를 다시 입력해야 할 경우 비밀번호에 자동으로 포커싱 하기 

 

 

3-1. useRef를 사용하기 위해서 임포트 해주기

import React, { useState, useRef } from 'react';

 

3-2. 비밀번호 설정에 useRef를 사용하기 위해서 초기값 설정

const passwordInputRef = useRef(null);

 

여기서는 비밀번호입력란의 DOM에 접근하기 위한 초기값을 설정해준다.

---

*초기값을 왜 설정하는지 모르겠다면??

 

 

 

useRef를 초기값을 설정해주는 이유는 우리가 DOM 요소에 대한 참조를 생성할 때 요소가 초기에

렌더링되지 않은 상태에서 참조를 초기화하기 위해서이다!

이게 무슨말이냐면...

일반적으로 React 컴포넌트가 처음 렌더링 될 때, ref 가 참조하는 DOM 요소가 아직 존재하지 않을 수 있다.

이런 경우 초기값을 null로 설정하면 컴포넌트가 렌더링될 때 빈 DOM 요소에 대한 참조를 생성할 수 있다. 

 

그리고 이후에 실제로 해당 DOM 요소가 렌더링되면 React 이를 참조하고 ref 객체를 업데이트 된다. 

그러면 우리는 이 ref 를 사용하여 해당 DOM 요소에 접근할 수가 있다.

결국, 초기값을 null로 설정하는 것은 우리가 참조하는 DOM 요소가 처음에는 존재하지 않을 수 있다는 점을 고려하여 참조를 안전하게 초기화한다는 것이다!!!

 

 

** 음 그래도 헷갈린다... 참조가 뭐지????

 

참조한다는 것은 말 그대로 다른 대상을 가리키거나 참고한다는 것을 의미한다!!

React 에서는 DOM 요소에 대한 참조를 생성하여 해당 DOM 요소에 직접적으로 접근할 수 있도록 함

그러니까 이러한 참조를 사용하여 DOM 요소에 접근하는 것은 React의 가상 DOM 과 함께 사용된다.

React 의 가상 DOM 을 사용하여 실제 DOM 과 비교할 수 있다. 

---

 

3-3. 포커싱 설정해주기

 

const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert('비밀번호가 일치하지 않습니다.');
      passwordInputRef.current.focus();
    } else {

      console.log('폼 제출 완료!:');
      console.log('이름:', username);
      console.log('이메일:', email);
      console.log('비밀번호:', password);
      console.log('휴대폰 번호:', phonenumber)
    }
  };

 

만약 비밀번호들의 값이 동일하지 않을 경우 passwordInputRef 에 포커스를 설정해준다. 

 

<div className="form_pw">
 <h5>비밀번호</h5>
 <input
 
 	type="password"
    placeholder="영어 대소문자, 숫자, 특수문자 중 2종류 조합의 8-15자"
    value={password}
    name="register_pw"
    ref={passwordInputRef}
    onChange={handlePasswordChange}
  />
 </div>

 

 

이렇게 해주면 비밀번호와 비밀번호 확인이 일치하지 않을 경우 경고 메시지가 뜨고,

비밀번호 블록이 자동으로 focus되는 것을 확인할 수 있다. 

 

 

 

 

 

 

여기까지 끝!

다음 포스팅에서는... 비밀번호 정규표현식과.. 전화번호 정규표현식을 하여 완성본을 가져오겠다!!