회원가입 페이지 (SignUpPage.jsx)에서의 로직이 과도하게 많아 가독성이 정말 좋지 않았다.따라서 로직을 분리는 해야겠고, 컴포넌트를 분리하는 것이 아닌, 로직을 분리할때의 가장 적절하고 권장되는 방식을 공부하였다. 커스텀 훅이란?React 컴포넌트에서 사용하는 상태 로직( useState, useEffect) 등을 재사용하기 위한 함수. 쉽게말하면, 특정 컴포넌트의 JSX를 제외한, 로직/상태/이벤트 핸들링을 분리하는 방식이다.설계한 컴포넌트가 과도하게 무겁다면 여러가지 원인이 있겠는데,1. 상태를 정의하거나2. 유효성 검사를 하거나3. 입력 처리 핸들러가 들어있거나4. 조건부 렌더링 플래그가 있거나. 위 4가지는 사실 일반적인 컴포넌트에 필요한 로직이고 컴포넌트를 설계할때 늘 저 4가지 케이..