Web/React

[React] 회원가입 기능 만들기 -1

Boyoung Yun 2022. 2. 27. 17:47
반응형

최근 진행 중인 토이프로젝트에서 회원가입 기능을 만들 일이 생겼다.

 

프론트엔드는 React를, 백엔드는 Spring Boot를 이용한 프로젝트이다.

 

 

페이지를 처음 설계할 때, 회원가입 페이지를 총 3개로 분리하기로 했다.

 

첫번째 페이지에서는 아이디, 비밀번호, 닉네임을 입력받기로 하였고,

 

두번째 페이지에서는 이메일, 전화번호, 관심 분야, 자기소개를 입력받아서 서버에 전달하기로 했다.

 

세번째 페이지는 두번째 페이지에서 서버에 데이터 전달이 완료되면 회원가입이 완료됐다는 메시지와 함께,

 

메인 화면으로 페이지를 이동시키는 기능을 담기로 했다.

 

 

먼저 첫번째 페이지에서 useState로 사용할 변수들을 저장했다.

 

const [userID, setId] = useState("");
const [password, setPw] = useState("");
const [pwCheck, setPwCheck] = useState("");
const [nickname, setNickName] = useState("");

 

그 다음에는 유저에게서 데이터를 받아올 form을 작성했다.

 

이벤트 핸들링 함수를 통해 e.target.value를 유저가 폼에 입력한 값이 바뀔 때마다

 

setState 함수에 집어넣어서 state 값을 변경했다.

 

<span className="ID__text-02">아이디</span>
    <form>
        <input type="text" className="ID__input-02" onChange={(e)=>{setId(e.target.value)}}></input>
    </form>
<span className="ID__text-02">비밀번호</span>
    <form>
        <input type="password" className="ID__input-02" onChange={(e)=>{setPw(e.target.value)}}></input>
    </form>
<span className="ID__text-02">비밀번호 확인</span>
    <form>
        <input type="password" className="ID__input-02" onChange={(e)=>{setPwCheck(e.target.value)}}></input>
    </form>
<span className="ID__text-02">닉네임</span>
    <form>
        <input type="text" className="ID__input-02" onChange={(e)=>{setNickName(e.target.value)}}></input>
    </form>

 

 

이제 다음 페이지로 이동하는 버튼을 눌렀을 때, 유효성 검사를 위해 check 함수를 호출하는 코드를 작성했다.

 

<div className="join__block__button-01">
	<span className="join__block__button__text" onClick={()=>{check()}}>다음</span>
</div>
function check()
{
    if(userID=="")
    {
        alert("아이디를 입력해주세요.");
    }
    else if(password=="")
    {
        alert("비밀번호를 입력해주세요.");
    }
    else if(password.length<8 || password.length>20)
    {
        alert("비밀번호는 8자 이상 20자 이하로 입력해주세요.");
    }
    else if(nickname=="")
    {
        alert("닉네임을 입력해주세요.");
    }
    else if(pwCheck!==password)
    {
        alert("비밀번호가 일치하지 않습니다.");
    }
    else
    {
        navigate('/join2', {state:{userID:userID, password:password, nickname:nickname}});
    }
}

 

각 항목의 유효성 검사에서 해당되는 내용에 대해 alert 창을 띄우도록 코드를 작성했고,

 

useNavigate hook을 이용해 userID, password, nickname 변수를 담아 join2 페이지로 이동하도록 했다.

 

처음 이 기능을 만들기 위해 구글링을 했을 때에는 useHistory hook을 사용하라는 정보를 많이 보았는데,

 

React를 최신 버전으로 업데이트한 상태라 사용할 수 없는 useHistory hook 대신 useNavigate hook을 사용했다.

 

 

미숙한 부분들이 아직 많지만..

 

그래도 잘 작동하는 것에 의의를 두었다. ㅎㅎ

반응형