회원가입에서 생기는 고민

프로젝트를 하면서 회원가입이 페이지가 총 두 페이지로 나눠진다. 
첫 번째는 이메일과 비밀번호를 입력하는 페이지고 

두 번째는 프로필(닉네임, 프로필 사진) 을 입력하는 페이지이다. 

페이지는 두개지만 서버에서 받는 회원가입 api는 하나였다. 

 

여기서 고민은 

1. 서버 회원가입 api를 둘로 나눌지

2. props로 전달해줄지

고민이 되었다. 

 

< 1번으로 api를 두 개로 나눴을 때 >

유저가 프로필 설정 없이 이메일, 비밀번호를 설정하고 나가버리면 db에 데이터가 쌓여버리고 그렇다고 db에 저장하지 않으면 api를 분리하는 이유가 없어지는 문제가 발생한다. 

 

따라서 서버 api는 하나로 두고 

props로 전달해주는 방법을 쓰기로 했다. 

 

여기서도 redux를 이용하여 이메일, 비밀번호를 전역으로 저장하여 프로필 컴포넌트에 주려고 했지만

굳이 redux를 사용하여 전역으로 관리할 필요가 없다고 생각했다. 

로그인도 아닌 회원가입에서 사용하는 것이고 두 컴포넌트밖에 사용하지 않기 때문이다. 

상태관리도 있으면 있을수록 관리할 필요가 있기 때문에 사용하지 않기로 했다. 

 

원래는 이메일, 비밀번호 컴포넌트에서 하위 컴포넌트로 프로필 컴포넌트를 불러오려고 했는데

그 둘을 별도의 컴포넌트로 분리하고 Signup 컴포넌트에서 불러오는 것이 더 깔끔할 것 같아 나눠주었다. 

 

결과는 Signup컴포넌트 안에 

EmailPassword.tsx와 Profile.tsx를 두고 

Signup 컴포넌트 안에서 서버 요청을 보내기로 했다!

 

 

프로젝트를 하면서 서비스와 로직에 대해 고민을 하고 정리하니 참 재밌다...!!!!