Sign up and login: useRef vs useState, which is more efficient?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106export 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>
  )
}