주요 콘텐츠로 건너뛰기

Routing

WIP

이 글은 작성 중입니다

이 글의 발행을 앞당기려면 다음을 수행할 수 있습니다:


🍰 Stay tuned!

상황

Page의 URL이 하위 Layer에 하드코딩되어 있는 경우가 있습니다.

entities/post/card
<Card>
<Card.Title
href={`/post/${data.id}`}
title={data.name}
/>
...
</Card>

문제점

URL이 Page Layer에 집중되지 않고, 하위 Layer에 분산되어 관리됩니다.

무시했을 때의 결과

URL 변경 시 Page Layer 외의 여러 하위 Layer에 있는 URL과 redirect 로직을 모두 고려해야 합니다.

결과적으로 단순한 Product Card 같은 Component도 Page의 책임을 가지게 되어, 프로젝트 구조가 불필요하게 복잡해집니다.

해결 방안

URL과 redirect 로직은 Page Layer와 그 상위 Layer에서만 다루도록 합니다.

이를 위해 composition, props 전달, Factory 패턴 등을 활용해 URL 정보를 하위 Layer에 전달합니다.

참고 자료