너무 복잡도가 높은 컴포넌트는 어떡하면 좋을까?

😙 놀랍게도 이 질문에 대한 답은 구글에도 나와있지 않다.

그래서 질문을 올렸습니다.

이메일 인증이 포함 되어야하고 인증을 받을 때와 요청할 때에는 서버와의 통신이 필요했습니다.

또한 닉네임도 signup 했을 때 서버로부터 닉네임이 중복되었다는 응답을 받으면

중복되었다는 에러메시지도 띄워주어야했어요

이런식으로 로직이 복잡해지고 Input뿐만아니라 버튼도 필요한 경우가 생기다보니

분명 공통적으로 쓰이는 마크업들이 있기는 한데 이것을 추상화하기가 난감했습니다.

하려면 할수는 있겠지만 시간도 많이 소모하고 복잡한 객체를 담은 배열을 만들게 될 것 같았어요

그래서 결국 인풋들을 하나 하나 작성 하는 방식을 택했습니다.

이런 경우에는 어떻게 하면 좋을까요? 참고를 위해 제가 작성한 코드를 첨부합니다.

주석을 포함하여 대략 200여줄 정도가 나오는것같습니다.

 

이번 프로젝트에서도 저번과 마찬가지로 로그인 / 회원가입 로직을 담당하게 되었는데 문제가 좀... 많았어요

먼저 이메일을 이용해 인증을 받아야 sign up이 가능하도록 구현을 해야하는데 zod를 통해 유효성검사를 하고있는 상황에서 이런 경우를 어떻게 붙여야할지 레퍼런스를 찾아보기가 굉....장히 힘들었습니다.

따라서 이메일 입력에 관한 useState를 따로 만들어서 인증요청 / 인증하기가 제대로 이루어졌는지를 체킹하는 useState를 생성해줬어요

그리고 signup을 시도했을때 닉네임이 중복되었다면 응답코드가 다르게 반환될 예정이기때문에

닉네임이 중복되었는지 여부를 체킹해줄 useState도 필요했습니다.

 

이렇게 하고보니 필요한 로직이

1. 이메일 체킹을 위한 useState

2. 닉네임 중복여부를 체킹하기 위한 useState

3. 이메일 요청을 보낼 post 로직

4. 이메일 인증코드 검증을 위한 post 로직

5. 서브밋했을때 보낼 제출 post로직

6. 사용자가 이메일 인증 요청, 제출을 여러번 클릭하는걸 방지하기위한 쓰로틀링

7. 유효성검사에 어긋나는 입력이 들어오면 경고메시지 띄워주기

8. (아직 하지는 않았지만) 이메일 인증 제한시간을 두기

 

이런식으로 슬슬 복잡해지기 시작했습니다.

이러다보니 처음엔 그냥 추상화해서 map이나 돌려야겠다하던 제 처음 생각은 온데간데 없고

하드코딩밖에 답이 없다라는 생각이 들더라구요

 

그래서 멘토님께 질문을 남겼습니다.

제 수준에서 추상화를 어거지로 시도하는것보다 그냥 하드코딩하는게 더 나은 상황으로 보였거든요

내일 답변을 받으니까... 금방.. 돌아오겠습니다