[javascript] 리액트 라우터의 캐시 무효화와 리로딩 전략

04 Dec 2023

javascript

리액트 라우터는 웹 애플리케이션의 라우팅을 관리하기 위한 도구입니다. 이를 통해 사용자의 URL을 기반으로 해당 페이지를 로딩하고, 애플리케이션의 상태를 업데이트할 수 있습니다. 하지만 때때로 리액트 라우터는 캐싱된 데이터로 인해 예상치 못한 동작을 보일 수 있습니다. 이러한 문제를 해결하기 위해 캐시 무효화와 리로딩 전략을 사용할 수 있습니다.

캐시 무효화

브라우저는 일반적으로 웹 페이지의 정적 리소스를 캐시하여 더 빠르게 로딩할 수 있도록 합니다. 하지만 동적으로 변하는 페이지의 경우 캐시를 사용하면 문제가 발생할 수 있습니다. 예를 들어, 사용자가 로그인한 후에 다른 사용자의 프로필 페이지로 이동한 경우, 이전에 로그인한 사용자의 프로필 정보가 캐시되어 새로운 사용자의 프로필이 표시되지 않을 수 있습니다.

리액트 라우터에서는 key prop을 이용하여 캐시 무효화를 수행할 수 있습니다. key prop은 컴포넌트를 다시 렌더링하는데 사용되는 식별자입니다. 이를 활용하여 동일한 경로를 가진 페이지를 방문할 때마다 고유한 key 값을 지정하여 캐시를 무효화할 수 있습니다.

다음은 Route 컴포넌트에서 key prop을 사용하는 예시입니다:

import React from 'react';
import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route exact path="/" render={(props) => <HomePage key={props.location.key} />} />
      <Route path="/profile/:userId" render={(props) => <ProfilePage key={props.match.params.userId} />} />
    </div>
  );
}

export default App;

위 예시에서는 key prop으로 props.location.key와 props.match.params.userId를 사용하여 각각 홈 페이지와 프로필 페이지의 캐시를 무효화합니다. 이를 통해 항상 최신 데이터를 보여주는 페이지를 구현할 수 있습니다.

리로딩 전략

리액트 라우터에서는 페이지 전환 시에 리로딩 전략을 사용할 수 있습니다. 리로딩 전략을 이용하면 페이지 간 전환 시에 새로고침되지 않고 컴포넌트를 재사용할 수 있습니다.

리액트 라우터의 <Route> 컴포넌트에는 component prop 대신 render prop을 사용할 수 있습니다. render prop을 사용하면 경로가 일치할 때마다 렌더링되는 컴포넌트를 선택적으로 설정할 수 있습니다. 이를 이용하여 컴포넌트를 동적으로 로딩하고, 페이지 사이의 전환 시에 새로고침 없이 재사용할 수 있습니다.

import React, { Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';

const HomePage = lazy(() => import('./HomePage'));
const ProfilePage = lazy(() => import('./ProfilePage'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/profile/:userId" component={ProfilePage} />
      </Switch>
    </Suspense>
  );
}

export default App;

위 예시에서는 lazy 함수를 사용하여 동적 로딩을 수행하고, Suspense 컴포넌트를 사용하여 로딩 중일 때 보여질 fallback 컴포넌트를 설정합니다. 이를 통해 페이지 전환 시에 새로고침 없이 컴포넌트를 로딩할 수 있습니다.

결론

리액트 라우터는 캐시 무효화와 리로딩 전략을 통해 웹 애플리케이션의 동작을 개선할 수 있습니다. 캐시 무효화를 통해 새로운 데이터를 항상 보여주고, 리로딩 전략을 통해 페이지 전환을 원활하게 할 수 있습니다. 이를 적절히 활용하여 사용자 경험을 향상시킬 수 있습니다.

캐시 무효화

리로딩 전략

결론

참고 자료