[ React ] 회원가입 ( 아이디 중복 검사 ) ③

오늘은 아이디중복 검사를 진행해보자. 

관련되어 이전 내용을 참고 하고 싶다면 아래 포스팅을 확인하고 오자

 

[ React ] 회원가입 구현 ①

 

[ React ] 회원가입 ( 로그인 / 로그아웃 ) ②

 

📚 React

📘 App.js

import React, { useState, createContext } from 'react';
import './App.css';

import SignupContainer from './Signup';
import Login from './Login';

export const TodoListContext = createContext(); // 전역변수생성 (내보낼 수 있는)


function App() {
  // 회원가입, 로그인, 회원의 Todo List 출력/추가/제거
  const [signupView, setSignupView] = useState(false);

  // 로그인한 회원정보 저장
  const [loginMember, setLoginMember] = useState(null);

  // 로그인한 회원의 todo-list를 저장 
  const [todoList, setTodoList] = useState([]);




  return (
    <TodoListContext.Provider value={{setTodoList,setLoginMember,loginMember}}>
                      {/* 버튼을 클릭할때마다 signupView가 true변했다가 */}
      <button onClick={ () => {setSignupView(!signupView)} }>
        { signupView ? ('회원 가입 닫기') : ('회원 가입 열기')}
      </button>

     
      <div className='signup-wrapper'>
        {/* signupView가 true인 경우에만 회원 가입 컴포넌트 렌더링 */}
        {/* 조건식 && (true인 경우) */}
        {signupView === true && (<SignupContainer/>)}
      </div>
      
      <h1>Todo List</h1>
      <Login/>

      <br/>
      
     

    </TodoListContext.Provider>
    
  );
}

export default App;

 

📘 Signup.js

import React, { useState } from 'react';

const SignupContainer = () => {

    const[id,setId] = useState('');
    const[pw,setPw] = useState('');
    const[pwCheck,setPwCheck] = useState('');
    const[name,setname] = useState('');
    const[result,setResult] = useState('');
    
    ❗ -----------------------🔽 아이디 중복검사 진행 🔽 ----------------------- ❗

    // 아이디 중복 검사 -> false 사용 불가 / true 사용가능 (임의지정)
    const [idValidation,setIdValidation] = useState(false);

    const idCheck = (inputId) => {
        // inputId : 입력한 아디이
        setId(inputId ) // id변수에 입력받은 아이디 대입
        
        // 4글자 미만 검사 x (아래 함수 실행하지 않겠다.)
        if(inputId.trim().length<4){
            setIdValidation(false)
            return;
         }
         fetch("/idCheck?id=" +inputId)
         .then( resp => resp.text())
         .then( result => {

            console.log(`result:${result}`)//`` 문자열 + 안써도 된다! 
            console.log(typeof result)//`` 문자열 + 안써도 된다! 

            // number타입으로 parsing
            if(Number(result)===0){ // 중복이 X -> 사용 o
                setIdValidation(true)
            }else{ // 중복 o -> 사용 X
                setIdValidation(false)
            }

         })
         .catch(e=>console.log(e))
    }
    
    ❗ -----------------------🔼 아이디 중복검사 진행 🔼----------------------- ❗

    //회원가입 함수
    const signup=() => {

        // 아이디가 사용 불가인 경우 (4이하거나 중복)
        if(!idValidation){
            alert("아이디를 다시 입력해주세요.")
            return;
        }



        //1. 비밀번호가 일치하지 않으면 (pw !== pwCheck)
        //   '비밀번호가 일치하지 않습니다' alert로 출력 후 return     
            if(pw !== pwCheck){
                alert("비밀번호가 일치하지 않습니다.")
                return;
            }

            // *** 회원가입 요청(비동기)
            fetch("/signup",{
                method:"POST",
                headers : {
                    "Content-Type" : "application/json"
                },
                //JS Object -> JSON
                body:JSON.stringify({
                    id :id,
                    pw : pw,
                    name :name

                })
            })
            .then(resp => resp.text())
            .then(result => {

                
        // result > 0 다면
        //    result에 '회원 가입 성공' 출력
        //    + 모든 입력칸(input) 내용삭제

            if(result>0){
                setResult("회원가입성공")
                setId("")
                setPw("")
                setPwCheck("")
                setname("")
             
             }else{
                 //  아니면 result에 '회원가입실패' 출력
                 setResult("회원가입실패")
             }
 

            })
            .catch(e => console.log(e));

    }
    
     ❗ -----------------------🔽 아이디 중복검사 진행 🔽 ----------------------- ❗
      
    return(
        <div className='signup-container'>
            <label>
                ID : 
                <input type='text' onChange={e=>{
                    //setId(e.target.value)
                    idCheck(e.target.value)
                }}
                value={id}
                className={idValidation? '' :"id-error"}
                />
            </label>

            <label>
                PW : 
                <input type='password' onChange={e=>{setPw(e.target.value)}}
                value={pw}/>
            </label>
            
   ❗ -----------------------🔼 아이디 중복검사 진행 🔼----------------------- ❗

            <label>
                PW CHECK : 
                <input type='password' onChange={e=>{setPwCheck(e.target.value)}}
                value={pwCheck}/>
            </label>

            <label>
                NAME : 
                <input type='text' onChange={e=>{setname(e.target.value)}}
                value={name}/>
            </label>

            <button onClick={signup}>가입하기</button>

            <hr/>

            <h3>{result}</h3>



        </div>
    )



};

export default SignupContainer;

①    const idCheck = (inputId) => { ... 생략 } 

: inputId 입력 받을때마다 변하는 값으로 return구문에 Id부분을 뜻한다. 

   

 

②   if(inputId.trim().length<4){ setIdValidation(false) return;}

: 입력한 inputId값이 4보다 작다면 ajax로 통신하지 않겠다라는 뜻이다. 

 

③  if(Number(result)===0){ }

: Spring 타입에서  int타입으로 결과값을 반환해도 React 로 넘어오는 값은 String타입으로 변환되기에

  Number타입으로 parsing해서 작성해줘야한다. 

 

🤔💭 == VS === 차이 

① == 

: 값이 같은지 비교

5 == 5 
값이 같으니 true이다.

console.log(null == undefined); 
null, undefined는 공통적으로 값이 없음을 의미하기에 true반환한다.

② === 

: 타입 및 값이 둘다 같아야한다 ! 

5 === 5
: 숫자(number)타입이며 같은 5라는 값을 가지고 있다. 

console.log(null === undefined); 
:null과 undefined는 공통적으로 값이 없음은 같지만 값의 종류가 다르기 때문에 false를 반환한다.

💻 출력 화면