회원가입 구현시 문제 해결

회원가입 기능 구현시 이메일과 패스워드를 입력하는 페이지, 프로필 설정을 하는 페이지를 구분해 놓았는데 api명세상 아이디,패스워드 페이지에서 이메일과 패스워드 값을 받아와 프로필 설정 페이지에서 값을 합쳐 서버에 보내야 했다.

일반적인 방법으로는 자식 컴포넌트가 아닌 값들을 다른 컴포넌트에 가지고 갈 수 없다. 하여 리덕스로 회원가입시 필요 데이터를 관리할까 생각했지만 코드량이 많아지는 부분과 이메일과 패스워드 페이지 부분을 맡은 팀원이 리덕스를 배우지 않아 좀 더 간단한 방법이 있지 않을까 고민을 했었다.

해결법

찾아보니 useNavigate을 이용하여 페이지 이동시 두번째 인자로 state값을 같이 가지고 갈 수 있다는 것이였다.

1. navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다.
2. 이동한 페이지에서 useLocation을 사용해 locaiton.state 로 전달 받은 파라미터를 취득할 수 있다.

이렇게 전달받은 state값들을 useLocation으로 꺼내 현 페이지의 닉네임, 계정아이디 state값들과 함께 서버에 보내주었다.