Router 궁금증

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

작성

<BrowserRouter>
    <Routes>
        <Route path="home" element={<AdminHome />} />
        <Route path="post" element={<AdminPost />} />
        <Route path="update/:id" element={<AdminUpdate />} />
    </Route>
</BrowserRouter>

Q1. 저는 항상 app.js 위에 코드와 같이 작성하는 편인데 강의에서는 주로 CreateBrowserRouter를 따로 이용하시는데 특별한 이유가 있나요?

Q2. 간혹 프로젝트 중간중간 Header나 Footer 컴포넌트를 몇몇 페이지에서는 안보이거나 다른 header, footer 컴포넌트가 보이게끔 하고 싶은데 이런 경우 주로 어떻게 하실지 생각(?) 아이디어(?) 가 궁금합니다. 저는 안보이게 하고 싶은 페이지를 url로 구분하는 편인데 다른 좋은 방법이 있을까요?

react react-router redux-toolkit zustand react.js

답변 2

수코딩

지식공유자

안녕하세요.

우선 1번에 대한 질문은 인프런 AI 인턴의 답변과 생각이 같습니다. 하지만, 개인적으로 규모가 크지 않은 프로젝트에서는 어떤 방식으로 써도 상관없다고 생각합니다. 자세한 것은 AI 인턴의 답변을 참고해주시면 감사하겠습니다 😀

2번에 대한 답변도 인프런 AI의 답변과 생각이 같으나, 만약 A 페이지에서는 A_header, A_footer, B페이지에서는 B_header, B_footer 식으로 페이지별로 보여져야 하는 헤더와 푸터가 명확하다면, AI 인턴의 답변처럼 레이아웃 컴포넌트 분리 방식으로 처리하겠습니다. AI 인턴의 레이아웃 컴포넌트 분리 답변을 참고하시면 되겠습니다.

감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 5647kr님.

리액트 라우터 사용에 관한 두 가지 질문 주셨네요. 각각에 대해 설명드리겠습니다.

Q1. CreateBrowserRouter와 BrowserRouter 차이

CreateBrowserRouter를 따로 사용하는 이유는 코드 구조와 설정의 명시성을 더하고, 대규모 프로젝트에서 라우터 설정을 보다 체계적으로 관리하기 위함입니다. CreateBrowserRouter를 사용하면 코드베이스가 더 커지더라도 각 라우트의 설정을 쉽게 관리할 수 있습니다. 일반적으로 BrowserRouter는 간단한 구조에 적합하고, CreateBrowserRouter는 라우트 설정이나 리다이렉트 등의 추가 설정이 복잡해질 때 선호됩니다.

Q2. 특정 페이지에서 Header/Footer 보이지 않게 하기

Header와 Footer의 보임 여부를 제어하기 위해서는 주로 라우터 설정에서 조건을 활용하거나 레이아웃 컴포넌트를 나누는 방법을 사용할 수 있습니다.

특정 경로를 조건으로 사용: URL 경로에 따라 조건부 렌더링을 적용할 수 있습니다. 예를 들어, URL 경로를 검사하여 특정 조건을 만족할 경우에만 특정 Header/Footer를 보여주거나 숨길 수 있습니다.
레이아웃 컴포넌트 분리: 각 페이지를 레이아웃 컴포넌트를 기준으로 나눌 수 있습니다. 모든 페이지에 공통되지 않는 Header/Footer가 있는 페이지는 별도의 레이아웃 컴포넌트를 만들어 적용할 수 있습니다.

관련된 추가 자료를 통해 도움이 될 수 있는 링크입니다:
- 리액트 루트 관련 고급 설정 및 패턴
- Header/Footer 조건부 관리 방법

제가 제공한 정보들이 질문자님의 학습에 도움이 되길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변