회원관리기능 - Part 1 회원가입

React + Firebase 사용하여 회원가입 기능 구현 방법 기록

---

 

과정

1. 상태 관리 및 입력값 처리
2. 중복 체크 및 회원가입 처리
3. 주소 검색 기능 추가

 

 

1. 상태 관리 및 입력값 처리

회원가입 폼에서 입력한 값을 관리하고 처리하는 방법을 설정합니다. useState와 useRef를 사용해서 상태를 관리하고, handleChange 함수를 통해 입력값을 업데이트합니다.

const JoinSection = () => {
  const dispatch = useDispatch();
  const members = useSelector((state) => state.members.members);
  const navigate = useNavigate();
  const userIdRef = useRef("");
  const userPwRef = useRef("");
  const userPwOkRef = useRef("");
  const mZipcodeRef = useRef("");
  const mAddressRef = useRef("");
  const mAddressSubRef = useRef("");

  const [userInfo, setUserInfo] = useState({
    userId: "",
    userPw: "",
    userPwOk: "",
    userIrum: "",
    handphone: "",
    zipCode: "",
    addr1: "",
    addr2: "",
  });

  const handleChange = (e) => {
    const { value, name } = e.target;
    setUserInfo((userInfo) => ({ ...userInfo, [name]: value }));
  };

 

2. 중복 체크 및 회원가입 처리

이제 회원가입 시 이메일 중복 체크와 회원가입 처리 로직을 추가합니다.

const register = async (e) => {
    e.preventDefault();

    if (!userInfo.userId) {
      alert("이메일을 입력하세요.");
      userIdRef.current.focus();
      return;
    }
    if (!userInfo.userPw) {
      alert("비밀번호를 입력하세요.");
      userPwRef.current.focus();
      return;
    }
    if (!userInfo.userPwOk) {
      alert("비밀번호를 입력하세요.");
      userPwOkRef.current.focus();
      return;
    }
    if (userInfo.userPw !== userInfo.userPwOk) {
      alert("비밀번호가 일치하지 않습니다.");
      userPwRef.current.focus();
      return;
    }

    if (!idCheck(userInfo.userId)) {
      return false;
    }

    const addMember = {
      mid: Date.now(),
      userId: userInfo.userId,
      userPw: userInfo.userPw,
      userIrum: userInfo.userIrum,
      handphone: userInfo.handphone,
      zipCode: userInfo.zipCode,
      addr1: userInfo.addr1,
      addr2: userInfo.addr2,
    };

    try {
      await kuwazawa_memberDB.push(addMember);
      alert("회원가입이 성공했습니다.");
      navigate("/login");
    } catch (error) {
      console.log("오류 : ", error);
    }
  };

  const idCheck = (value) => {
    let duplicate = members.find((item) => item.userId === value);
    if (duplicate) {
      alert("중복된 아이디입니다.");
      userIdRef.current.focus();
      return false;
    } else {
      return true;
    }
  };

 

 

3. 주소 검색 기능추가

주소 검색 기능을 통해 사용자가 쉽게 주소를 입력할 수 있도록 추가해요. Daum Postcode API를 사용합니다.

useEffect(() => {
    window.openDaumPostcode = () => {
      new window.daum.Postcode({
        oncomplete: (data) => {
          let fullAddr = ""; // 최종 주소 변수
          let extraAddr = ""; // 조합형 주소 변수

          if (data.userSelectedType === "R") {
            // 사용자가 도로명 주소를 선택했을 경우
            fullAddr = data.roadAddress;
          } else {
            // 사용자가 지번 주소를 선택했을 경우(J)
            fullAddr = data.jibunAddress;
          }

          if (data.userSelectedType === "R") {
            if (data.bname !== "") {
              extraAddr += data.bname;
            }
            if (data.buildingName !== "") {
              extraAddr +=
                extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
            }
            fullAddr += extraAddr !== "" ? " (" + extraAddr + ")" : "";
          }

          // 주소 정보를 입력 요소에 설정
          setUserInfo((prevState) => ({
            ...prevState,
            zipCode: data.zonecode,
            addr1: fullAddr,
          }));
          mAddressSubRef.current.focus();
        },
      }).open();
    };
  }, []);