[React] 아이디 중복확인 (with. firebase)

이번 포스팅에서는 간단하게 로그인 회원가입에서 아이디 중복확인을 해주는 기능을 한번 작성해보려 합니다.

저는 서버리스식으로 firebase를 이용해서 작업하고 있어요.

공부하면서 느끼지만 firebase.. 최고입니다..

---

 

저는 displayName (사용자 닉네임)의 중복 확인을 구현했습니다.

먼저 제가 구현한 화면입니다.

 

입력받은 문자열이 DB에 있는 사용자 정보중에 동일한 displayName이 존재한다면

"이미 다른 사용자가 사용 중입니다."라는 메시지를 띄웁니다.

 

+ 무시하고 회원가입 버튼을 누를 경우 "DisplayName을 확인해주세요"라는 error를 띄워줍니다.

 

코드로 바로 설명하겠습니다.

먼저 동일한 ID가 있는지 확인하는 부분의 코드입니다.

    const [dpNameCheck, setDpNameCheck] = useState(false);
    const [checkError, setCheckError] = useState("");
    const [error, setError] = useState("");
    const onChange = async (event) => {
        const { target: { name, value } } = event;
        setAuthObj(authObj => ({ ...authObj, [name]: value }))

        if (name == "displayName") {
            const IDcheck = await dbService
                .collection("User_Profile")
                .where("displayName", "==", value)
                .get();
            if (IDcheck.docs.length == 0 && value.length > 0) {
                setCheckError("사용가능");
                setDpNameCheck(true);
            }
            else {
                if (value.length != 0) setCheckError("이미 다른 사용자가 사용 중 입니다.");
                else setCheckError("");
                setDpNameCheck(false);

            }
        }
    };

 

---

중복 여부를 dpNameCheck의 hook을 이용하였고,

노티 메시지를 checkError의 hook을 이용하였습니다.

 

여기서 displayName input의 입력값이 들어올 때마다 db를 check 합니다.

'User_Profile' collection에서 displayName이 입력값과 같은 문서만 받아서 IDcheck에 담아둡니다.

 

+ 해당 포스트에서 다루지는 않았지만,

기능적으로 더 보완한다면 onChange 함수에 debounce를 적용시키는 것을 추천드립니당

 

 

그리고 IDcheck의 문서 길이(개수)가 0이라면 동일한 ID를 가진 사용자가 없다는 것을 뜻하므로 사용가능으로 checkError를 설정해주고 dpNameCheck또한 true로 변경해줍니다.

 

만약 IDcheck의 문서 길이(갯수)가 0이 아니고 입력값이 있다면 이미 다른 사용자가 사용 중이라는 checkError를 설정해주고 dpNameCheck또한 false로 변경해줍니다.

const onSubmit = async (event) => {
        event.preventDefault();

        try {
            let data;
         
            if (!dpNameCheck) throw new Error('Display Name을 확인해주세요.');
            data = await authService.createUserWithEmailAndPassword(authObj.email, authObj.password);
            await dbService.collection("User_Profile").add(authObj);
            
        }
        catch (error) {
            setError(error.message);
        }
    };

다음으로 dpNameCheck가 false인데 제출을 시도할 경우 onSubmit함수에서 try catch구문을 이용하고 Error를 던져줍니다.

 

전체 코드는 다음과 같습니다.

import { authService, dbService } from 'fbase';
import React, { useState } from 'react';

const AuthForm = () => {
    const [authObj, setAuthObj] = useState({
        displayName: "",
        name: "",
        email: "",
        password: "",
        instagramId: "",
    });
    const [dpNameCheck, setDpNameCheck] = useState(false);
    const [checkError, setCheckError] = useState("");
    const [error, setError] = useState("");
    const onChange = async (event) => {
        const { target: { name, value } } = event;
        setAuthObj(authObj => ({ ...authObj, [name]: value }))

        if (name == "displayName") {
            const IDcheck = await dbService
                .collection("User_Profile")
                .where("displayName", "==", value)
                .get();
            if (IDcheck.docs.length == 0 && value.length > 0) {
                setCheckError("사용가능");
                setDpNameCheck(true);
            }
            else {
                if (value.length != 0) setCheckError("이미 다른 사용자가 사용 중 입니다.");
                else setCheckError("");
                setDpNameCheck(false);

            }
        }
    };

    const onSubmit = async (event) => {
        event.preventDefault();

        try {
            let data;
         
            if (!dpNameCheck) throw new Error('Display Name을 확인해주세요.');
            data = await authService.createUserWithEmailAndPassword(authObj.email, authObj.password);
            await dbService.collection("User_Profile").add(authObj);
            
        }
        catch (error) {
            setError(error.message);
        }
    };

   
    return (
        <>
            <form className="centerContainer authForm" onSubmit={onSubmit}>
               
                    <div><span>Email</span>
                        <input name="email" type="text" placeholder="Email Adress" required value={authObj.email} onChange={onChange} />
                    </div>
                    <div><span>PassWord</span>
                        <input name="password" type="password" placeholder="6자리 이상 입력해주세요." required value={authObj.password} onChange={onChange} />
                    </div>
                    <div><span>Display Name</span>
                        <input name="displayName" type="text" placeholder="Display Name" required value={authObj.displayName} onChange={onChange} />
                    </div>
                    <span id="checkMess">{checkError}</span>
                    <div><span>Name</span>
                        <input name="name" type="text" placeholder="Name" required value={authObj.name} onChange={onChange} />
                    </div>
                    <div><span>Instagram's ID</span>
                        <input name="instagramId" type="text" placeholder="선택 사항" value={authObj.instagramId} onChange={onChange} />
                    </div>
               
                  
                <input type="submit" id="submitBtn" value={newAccount ? "회원가입" : "로그인"} />

                <span id="error">{error}</span>
            </form>
            


        </>
    );
}
export default AuthForm;

생각보다 간단하죠?? onChange랑 onSubmit에서만 간단하게 검사해주면 됩니다-!

 

---

포스팅 마치겠습니다 💙