[javascript] Next.js에서의 새로 고침 문제 해결 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

1. Link 컴포넌트 사용하기
Next.js의 Link 컴포넌트를 사용하여 페이지 이동을 처리할 수 있습니다. Link 컴포넌트는 클라이언트 사이드에서 페이지 전환이 이루어져 새로 고침 없이 페이지가 로드됩니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

import Link from 'next/link';

function MyComponent() {
  return (
    <Link href="/another-page">
      <a>Go to Another Page</a>
    </Link>
  );
}

2. Router 객체 사용하기
Next.js는 Router 객체를 제공하여 프로그래밍 방식으로 페이지를 전환할 수 있습니다. 이를 사용하면 새로고침 없이 페이지를 이동할 수 있습니다.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/another-page');
  };

  return (
    <button onClick={handleClick}>Go to Another Page</button>
  );
}

3. getStaticProps 또는 getServerSideProps 사용하기
Next.js는 getStaticProps 또는 getServerSideProps 함수를 사용하여 데이터를 사전으로 불러와 페이지를 생성할 수 있습니다. 이를 통해 초기 데이터를 로드하고 페이지 이동 시 데이터를 유지할 수 있습니다. 이렇게 하면 새로고침에 대한 문제를 해결할 수 있습니다.

export async function getStaticProps() {
  // 데이터 로딩 및 처리 로직
  const data = await fetchData();

  return {
    props: {
      data
    }
  };
}

4. hashRouter 사용하기
만약 새로고침 문제가 해결되지 않을 경우, React Router의 hashRouter로 해결할 수 있습니다. 이를 통해 URL 뒤에 해시를 붙이고, URL의 변화가 실제 웹 서버로 전달되지 않게 할 수 있습니다.

import { HashRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}

Next.js에서의 새로고침 문제를 해결하기 위해 위에 언급한 방법을 사용할 수 있습니다. 각 방법은 상황과 요구에 따라 선택하여 사용할 수 있습니다.