React Router 설정 중 프로젝트 상세 페이지 경로를 어떻게 해야할지 고민됩니다.

[Seok93]

🤔 프로젝트 정보를 보여주는 상세페이지 경로를 어디로 넣어야할까요?

경로 설정 대안1

프로젝트 경로를 팀 경로 하위로 작성한다.

🔍 하위에 작성하는 이유

1. 프로젝트는 팀에 종속된 정보이며, 페이지 이동 흐름상 팀에서 프로젝트로 들어가게 되어있다.
2. 프로젝트 상세페이지에는 여전히 팀 아이디 정보를 가지고 있어야 한다.
   (프로젝트 상세페이지의 사이드바를 보면, 팀이 가지고 있는 프로젝트 목록을 보여주고 있다. 때문에 팀 아이디 정보 필요)

✅ 장점

1. 별다른 설정없이 url에서 팀 아이디 정보를 취득할 수 있다.
2. 별다른 설정없이 페이지 새로고침이 일어나도 지속적으로 관리할 수 있다.

🚫 단점

1. 경로 설정의 중첩 구조가 깊어져 가독성이 떨어진다.
2. 팀 경로에서 설정된 Team Layout은 프로젝트에서 사용되면 안되기 때문에 이를 제외해주는 로직을 추가해야한다.

💻 코드 예시

---

경로 설정 대안2

프로젝트 경로를 팀 경로와 연관짓지 않고, 동등한 계층에 작성한다.

🔍 동등한 계층에 작성하는 이유

1. 중첩 구조의 깊이를 줄여 가독성을 높인다.
2. 팀과 프로젝트가 별도의 레이아웃을 분리하여 가질 수 있다.

✅ 장점

1. 라우터 설정 가독성이 올라간다.
2. 레이아웃 설정을 분리할 수 있다.

🚫 단점

1. 프로젝트 페이지에서 팀이 가지고 있는 모든 프로젝트 정보가 필요하므로, 팀 아이디가 필요한데, 이를 url 등에서 얻을 방법이 없기 때문에 인위적으로 넘겨주는 방법을 사용해야 한다.
   • location state로 넘겨주는 방법
   • query string으로 넘겨주는 방법
   • global state로 넘겨주는 방법

💻 코드 예시

[Yoonyesol]

우석님 우선 내용을 깔끔하게 정리해주셔서 저도 고민하시는 부분이 어떤 부분인지 쉽게 알 수 있었습니다.
이야기를 듣고 보니 둘 다 장단점이 명확해서 저도 어떤 방식이 좋을지 고민이 되네요.
하지만 그럼에도 반드시 한 가지를 정해야 하니 개인적인 의견을 말씀드리자면 저는 1번 방식 선택하겠습니다!
저희 프로젝트가 team 하위에 project 여러 개가 존재할 수 있는 방식이기 때문에 라우터도 동일한 구조로 작성하는 게 전체 프로젝트 구조 파악에 훨씬 도움이 될 것 같기도 하고, 추후 프로그램이 확장되어 projects 관련 페이지가 늘어날 시에도 후자의 방법이 코드 확장에 좀 더 편리할 것 같아요.
물론 가독성과 레이아웃 문제가 있긴 하지만...😂 우선 저는 1번 선택해 보겠습니다.
다른 분들 의견은 어떨지 궁금합니다!

[Seok93]

저도 예솔님처럼 프로젝트 구조상으로 봤을 때 1번이 더 맞는 구조가 아닐까라고 생각하고 있었어요. 그래도 장단점이 확실히 나뉘다 보니 고민이 되는 부분이네요 ㅎㅎ

[Yoonyesol]

오오 그렇군요! 맞아요 진주님 의견도 들어보고 같이 고민해봐야겠어요😊

[kimpearl3599]

저도 1번이 좋을 것 같습니다. 프로젝트가 팀 ID를 항상 가지고 다니려면 힘들 것 같아요. 1번 단점을 보완하는게 2번 단점을 보완하는 것보다 훨씬 나은 선택지가 될 것 같습니다 :)

[Yoonyesol]

1번으로 가시죠👍👍👍

[Seok93]

1번으로 가시죠!