회원 가입, 로그인 UseRef VS UseState 어떤게 더 효율적일까?

오늘은 login과 join을 할 때 데이터를 빽엔드로 보내줄 form 데이터를 로그인 버튼이나 회원 가입 버튼을 눌렀을 때 정보가 잘 뜨는지 테스트를 해보고 구축해보았습니다.

export default function Login({show, setShowLoginModal}: PaymentModalProps) {
  const [joinForm, setJoinForm] = useState(false)
  const [joinWelcomeText, setJoinWelcomeText] = useState('Compass에 오신 것을 환영합니다.')

  const loginEmailRef = useRef<HTMLInputElement>(null)
  const loginPasswordRef = useRef<HTMLInputElement>(null)

  const joinWelcomeTextRef = useRef<HTMLDivElement>(null)
  const joinEmailRef = useRef<HTMLInputElement>(null)
  const joinPasswordRef = useRef<HTMLInputElement>(null)
  const joinPassword2Ref = useRef<HTMLInputElement>(null)
  const joinNickNameRef = useRef<HTMLInputElement>(null)

  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    console.log('이메일 : ', loginEmailRef.current?.value)
    console.log('비밀번호 : ', loginPasswordRef.current?.value)
    setShowLoginModal(false)
  }

  const handleJoin = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (joinPasswordRef.current?.value !== joinPassword2Ref.current?.value) {
      if (joinWelcomeTextRef.current) {
        joinWelcomeTextRef.current.style.color = 'red'
      }

      setJoinWelcomeText('비밀번호가 일치하지 않습니다.')
      return
    }

    console.log('이메일 : ', joinEmailRef.current?.value)
    console.log('비밀번호 : ', joinPasswordRef.current?.value)
    console.log('닉네임 : ', joinNickNameRef.current?.value)
    setJoinForm(false)
    setShowLoginModal(false)
  }

  return (
    <ModalBackdrop show={show}>
      <ModalContent>
        {joinForm ? (
          <JoinForm onSubmit={e => handleJoin(e)}>
            <ModalCloseTitleBox>
              <CloseIcon
                onClick={() => {
                  setShowLoginModal(false), setJoinForm(false)
                }}
              />
              <ModalTitle>회원가입</ModalTitle>
            </ModalCloseTitleBox>
            <Line />
            <WelcomeText ref={joinWelcomeTextRef}>{joinWelcomeText}</WelcomeText>
            <InputGroupJoin>
              <Input
                type='email'
                pattern='[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*'
                placeholder='이메일'
                required
                ref={joinEmailRef}
              />
              <Input type='password' placeholder='비밀 번호' required ref={joinPasswordRef} />
              <Input type='password' placeholder='비밀 번호 확인' required ref={joinPassword2Ref} />
              <Input type='text' placeholder='닉네임' required ref={joinNickNameRef} />
            </InputGroupJoin>
            <LoginButton type='submit'>회원가입</LoginButton>
          </JoinForm>
        ) : (
          <LoginForm onSubmit={e => handleLogin(e)}>
            <ModalCloseTitleBox>
              <CloseIcon
                onClick={() => {
                  setShowLoginModal(false), setJoinForm(false)
                }}
              />
              <ModalTitle>로그인</ModalTitle>
            </ModalCloseTitleBox>
            <Line />
            <WelcomeText>Compass에 오신 것을 환영합니다.</WelcomeText>
            <InputGroup>
              <Input
                type='email'
                pattern='[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*'
                placeholder='이메일'
                required
                ref={loginEmailRef}
              />
              <Input type='password' placeholder='비밀 번호' required ref={loginPasswordRef} />
            </InputGroup>
            <JoinFindPassBox>
              <button onClick={() => setJoinForm(true)}>회원가입</button>
              <TbSlash />
              <button>비밀번호 찾기</button>
            </JoinFindPassBox>
            <LoginButton type='submit'>로그인</LoginButton>
            <Hrspan>또는</Hrspan>
            <KaKaoLoginButton>
              <ImBubble />
              카카오 로그인
            </KaKaoLoginButton>
          </LoginForm>
        )}
      </ModalContent>
    </ModalBackdrop>
  )
}

먼저 위의 코드 처럼 useState를 사용하지 않고 useRef를 사용한 이유는 state를 사용하면 무분별한 랜더링이 발생할 수 있기 때문에 값이 변경되어도 랜더링이 되지않는 useRef를 사용하는 것이 훨씬 효율적이라고 생각이 들었기 때문입니다. 

 

로그인

회원 가입