react 중첩 라우팅 관련

간단해 보이면서도 중요한 질문을 주셨네요! 한 때는 어찌 보면 당연하게 URL을 통해 라우팅을 했던 것에 반해, 현재는 React 등의 SPA 프레임워크들이 등장하며 다양한 라우팅 방식들이 생겨났습니다. 각 방식들의 장단점이 확실한 만큼, 저도 아직까지 새로운 페이지를 개발할 때면 이를 어떻게 라우팅 시킬지에 대한 고민을 자주하는데요, 크게 URL을 쓸지, state로만 처리할지를 고민할 때 제가 따져 보는 몇 가지 기준을 조금 적어보겠습니다! 1. 유저가 뒤로 가기를 할 수 있어야 하는가? URL을 통한 라우팅은 브라우저 라우터에 history를 남기기 때문에, 뒤로 가기/앞으로 가기가 자유로운 반면, state를 통한 조작의 경우, 페이지 이동이 history 객체에 남지 않기 때문에 유저가 브라우저의 뒤로 가기/앞으로 가기 클릭 시 예상치 못한 이동을 할 수 있습니다. history 변경 이벤트를 감지해서 막거나 핸들러 처리를 해주는 방식도 있긴 합니다만, 조금 번거롭기는 하죠. 따라서 유저의 라우터 이동이 자유로워야 하는 환경이라면 URL, 반대의 경우라면 state 방식을 주로 고려합니다. 2. URL을 통해 직접 접근이 가능한 페이지인가? URL을 통해 직접 접근이 가능하다는 말은 다시 말하자면, 유저가 URL을 통해 해당 페이지를 공유가 가능하다는 의미이기도 합니다. URL을 통해 특정 페이지가 바로 보이기를 원한다면 중첩 URL 등을 고려해야 하겠지만, 유저가 직접 URL로 접근할 필요가 없는, 혹은 접근하면 안 되는 페이지 등은 state를 통해 관리를 하는 것이 더 합리적인 케이스도 있습니다. 3. SEO가 중요한 페이지인가? 요즘 회사들이 NextJS를 쓰게 만드는 가장 큰 이유 중 하나인 SEO 문제도 충분히 고려되어야 할 사항 중 하나입니다. 검색엔진 봇들은 보통 sitemap을 기반으로 웹사이트를 크롤링해가기 때문에, 특정 라우트에서 state로 숨겨진 페이지라면 봇이 발견 못할 확률이 높습니다. 따라서 SEO를 통해 노출이 되어야 하는 페이지라면 URL을 직접 할당해주는 것이 좋습니다. 위의 3가지 기준에 따라 질문주신 회원가입 페이지를 한 번 살펴보겠습니다. 첫 번째로 회원가입은 순서대로 진행이 되어야 하는 플로우이고, 약관동의와 회원 정보 등의 연속된 form을 가지고 있기 때문에, 각 페이지 단계에서 뒤로 가기는 최소화시켜야 할 액션이지 않을까 싶습니다. 또한 각 단계는 앞 단계가 완료 되어야만 접근 가능한 페이지들로써, 어찌보면 URL을 통해 직접 접근이 금지되는 페이지들입니다. 마지막으로, 회원가입 프로세스는 굳이 SEO에 노출될 필요가 없는 페이지들이기 때문에, 결론적으로 특성상 state를 통한 라우팅이 조금 더 합리적일 것 같다는 생각이 듭니다! 물론 앞서 말씀드린대로 각 방식은 장단점이 있기에 무조건 이게 정답이다! 라는 것은 아니지만, 특성에 맞추어 최대한 작업 공수를 줄여 나가는 방식을 제안드려보고 싶었습니다ㅎㅎ 추가 질문 있으시다면 편하게 댓글 달아주세요!

해당 UI를 funnel이라고 일컫습니다. 토스 컨퍼런스에서 관련한 주제를 다루었는데 참고하셔도 좋을거 닽슴니다. https://youtu.be/NwLWX2RNVcw?si=8LPw75s-bp4i2Q08