React Router에서 글로벌 위치 고정 헤더 생성하는 방법 (예시 포함)

React Router 글로벌 헤더: 최적의 방법과 구현

React에 처음 입문하여 싱글 페이지 애플리케이션(SPA) 블로그를 만들려고 한다면, React Router를 사용하여 글로벌 고정 헤더를 생성하는 방법에 대해 궁금할 수 있습니다. 이 블로그 글에서는 React Router에서 글로벌 헤더를 구현하기 위한 여러 접근 방법과 최적의 방법을 알아볼 것입니다. 또한 각 접근 방법의 장단점에 대해서도 설명할 것입니다.

접근 방법 1: 레이아웃 컴포넌트 사용

가장 일반적으로 사용되는 방법 중 하나는 페이지 컴포넌트를 감싸는 레이아웃 컴포넌트를 정의하는 것입니다. 레이아웃 컴포넌트는 헤더와 모든 페이지에 나타내고 싶은 다른 요소들을 포함합니다. 다음은 예시입니다:

class Layout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
        <Footer />
      </div>
    );
  }
}

레이아웃 컴포넌트를 사용하려면, 각 페이지 컴포넌트에서 가져오기만 하면 됩니다:

class ContactPage extends React.Component {
  render() {
    return (
      <Layout>
        <ContactComponent />
      </Layout>
    );
  }
}

이 접근 방법을 사용하면 여러 페이지에 나타나는 반복 요소를 제어할 수 있습니다. 약간 다른 레이아웃이 필요한 몇 가지 페이지가 있는 경우 별도의 레이아웃 컴포넌트를 생성하고 그에 맞게 사용할 수 있습니다.

접근 방법 2: 헤더를 부모 컴포넌트로 렌더링

다른 접근 방법은 헤더 컴포넌트를 라우트의 부모 컴포넌트로 렌더링하는 것입니다. 이렇게 하면 헤더 컴포넌트는 한 번만 렌더링되고 모든 라우트가 그 안에서 렌더링됩니다. 다음은 예시입니다:

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Route exact path="/" component={HomePage} /> 
          <Route path="/dashboard" component={DashboardPage} /> 
          <Footer /> 
        </div>
      </Router>
    );
  }
}

이 접근 방법은 헤더 컴포넌트를 특정 라우트 컴포넌트 외부에서 렌더링함으로써 프로세스를 단순화합니다. 이렇게 하면 다른 라우트를 탐색하는 동안 헤더가 항상 보이도록 할 수 있습니다.

접근 방법 3: forceRefresh와 함께 BrowserRouter 사용

라우팅 내에서 헤더를 강제로 새로 고칠 필요가 있는 경우, “forceRefresh” 프롭을 BrowserRouter와 함께 사용할 수 있습니다. 다음은 예시입니다:

const Routing = () => {
  return (
    <BrowserRouter forceRefresh={true}>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/list/:id" component={ListingApi} />
        <Route path="/details/:id" component={HotelDetails} />
        <Route path="/booking/:hotel_name" component={PlaceBooking} />
        <Route path="/viewBooking" component={ViewBooking} />
        <Route exact path="/login" component={LoginComponent} />
        <Route path="/signup" component={RegisterComponent} />
      </Switch>
      <Footer />
    </BrowserRouter>
  );
}

“forceRefresh” 프롭을 사용하여 라우트가 변경될 때마다 헤더를 새로 고칠 수 있습니다. 이는 현재 라우트에 기반하여 헤더 콘텐츠를 동적으로 업데이트해야 하는 시나리오에서 유용할 수 있습니다.

결론

React Router에서 글로벌 헤더를 구현하는 경우 고려해야 할 여러 접근 방법이 있습니다. 레이아웃 컴포넌트를 사용하거나 헤더를 부모 컴포넌트로 렌더링하거나 BrowserRouter를 사용하여 forceRefresh 프롭을 사용하는 방법 등, 중요한 것은 모든 페이지에서 일관성을 유지하고 사용자 경험을 원활하게 제공하는 것입니다.

기억해야 할 것은 각 접근 방법마다 장단점이 있으므로 특정 사용 사례와 프로젝트 요구 사항에 가장 잘 맞는 방법을 선택해야 합니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs