[React] 회원가입 폼을 구현하며⋯

혼자서 개발 공부를 할 땐 “기능만 돌아가면 됐지” 하고 생각한 적이 많았는데,
이번 주엔 정말 작정하고 회원가입 폼을 직접 구현해보면서
상태 관리, 입력, 에러 처리, 서버 연결 등 생각보다 훨씬 많은 구현 과정이 필요하단 걸 알게됐다

---

⚠️ 겪었던 이슈

💥 비밀번호 보기 버튼이 두 필드에 동시에 작동

비밀번호 입력창과 비밀번호 확인창 모두에 "보기" 버튼을 붙였는데,
하나만 클릭해도 두 필드가 동시에 보이거나 숨겨지는 이상한 현상이 발생했다

✅ 해결 법: 상태 분리

const [showPass, setShowPass] = useState(false);
const [showPassCheck, setShowPassCheck] = useState(false);

각 input에 각각의 상태를 연결해 문제 해결!
이후 버튼도 개별로 setShowPass(prev => !prev) 와 같이 구현했다

---

🤔 느낀 점

• react-hook-form + Zod 조합으로 써야겠다!
  → 검증 로직이 UI 로직과 깔끔하게 분리됨
• 단순히 입력창만 만든다고 끝이 아니라,
  비밀번호 보기, 버튼 상태, 에러 메시지, 타입 명시 등
  정말 많은 요소들이 얽혀 있다는 걸 배웠다

---

📝 정리

• 이번 회원가입을 구현하며 사용한 단계별로 회원가입 창을 만드는 것은 UX적으로 더 좋다고 생각하지만, 상태 흐름과 조건 분기가 많기 때문에 구조를 미리 설계하고, 로직을 깔끔하게 나눠야 유지보수도 쉬울 듯
  내가 구현한 로직은 과연 깔끔할지? 더 나은 방법은 없을지 계속 고민해보자!!
• useState, useEffect의 타이밍 차이를 이해하고 상황에 맞게 선택해야 함
• API 응답 타입은 반드시 명시해두는 습관을 들일 것
  → 타입 안정성, 유지보수성, 협업에서 큰 차이를 만들 거라 느꼈다

---

🌴 다음엔...

• 소셜 로그인(OAuth) 까지 구현해보기!

---

이제 조금씩 "왜 이렇게 설계되어야 하는지"를 이해하게 되는 단계로 넘어가는 느낌이다.
비록 기능 하나 구현하는 데 시간도 진짜 오래 걸리고 어려운 점도 많지만, 하나씩 부딪히며 해결해나가는 과정이 결국 가장 많은 걸 배우게 해주는 거 같다

---

계속 한 걸음씩 더 나아가보자 🙌 🙌 🙌