next.js 같은 page에서 window.history 쌓기

개요

같은 page에서 다른 컴포넌트로 router 이동 시 history가 쌓이지 않기 때문에 뒤로가기 버튼을 누르면 이전 화면이 뜨지 않고 이전전 page 화면이 뜨게 됩니다.

( A (page) -> B (page) -> C (component)에서 뒤로가기 클릭시 B에서 C로 이동할때는 브라우저 history를 쌓지 않았기 때문에 A로 이동됨 )

위와 같은 상황에서 원하는 방법으로 뒤로가기 router를 만들려면 다른 page 컴포넌트를 만들어서 브라우저 history를 쌓아야만 하는데, 이럴 경우 너무 많은 page 컴포넌트를 생성해야한다는 단점이 있습니다.

( A (page) -> B (page) -> C (page) 이동시 history가 쌓이지만 B와 C는 연관되어 있는 흐름이라면 또 다른 page를 생성하는 것은 옳지 않은 방법이라고 생각함 )

그래서 이번 포스팅에서는 같은 page에서 컴포넌트 이동으로 브라우저 history를 쌓아, 사용자가 뒤로가기 버튼을 누르면 바로 이전전 페이지로 가지 않고, 이전 페이지로 가는 방법에 대해 알아보겠습니다!

( A (page) -> B (page) -> C (component) B에서 C로 이동할때도 history를 쌓도록 하는 방법! )

설계

먼저 알아야할 지식으로 쿼리 스트링입니다. 대부분 아실것이라 생각하고 넘어가겠습니다.

두번째는 쿼리 스트링으로 컴포넌트를 이동하면 브라우저 history가 축적된다는 점입니다. 이 특징을 이용하여 컴포넌트간 이동에서도 history를 쌓아보겠습니다!

바로 예시 코드로 살펴보겠습니다~!!

예시 코드

page 컴포넌트

해당 페이지에 들어오면 먼저 router에 쿼리스트링으로 page가 있는지 찾습니다.

page가 없다면 바로 인트로 컴포넌트를 랜더링 합니다.

page가 있다면 해당하는 컴포넌트로 연결해줍니다.

// pages/history/index.jsx
import React, { useMemo, useState } from "react";
import { useRouter } from "next/router";

const components = [
  { page: "Intro", component: "IntroComponent" },
  { page: "One", component: "StepOneComponent" },
  { page: "Two", component: "StepTwoComponent" },
  { page: "Three", component: "StepThreeComponent" }
];

const Index = () => {
  const router = useRouter();
  const [currentIndex, setCurrentIndex] = useState(0);

  // 1. 쿼리스트링 값이 바뀌면 router 변경을 감지하여 아래 함수가 실행되고,
  const page = useMemo(() => {
    return router.query.page !== undefined ? router.query.page : "Intro";
  }, [router.query]);

  // 2. page가 바뀌면 아래 함수가 실행되어 새로운 state를 생성하여 컴포넌트가 리렌더링 됩니다.
  useEffect(() => {
    const routingIndex = components.findIndex(
      component => component.page === page
    );
    setCurrentIndex(routingIndex);
  }, [page]);

  return (
    <div>
      {currentIndex === 0 && <IntroComponent />}
      {currentIndex === 1 && <StepOneComponent />}
      {currentIndex === 2 && <StepTwoComponent />}
      {currentIndex === 3 && <StepThreeComponent />}
    </div>
  );
};

일반 컴포넌트

• router 이동으로 history를 쌓았기 때문에 다른 컴포넌트로 이동 후, 뒤로가기 클릭시 Intro 컴포넌트로 redirect됩니다.

// components/IntroComponent.jsx
import React from "react";
import { useRouter } from "next/router";

const IntroComponent = () => {
  const router = useRouter();

  // 쿼리 스트링을 이용하여 router 이동을 함으로 브라우저 history를 쌓습니다
  const goToRouter = name => router.push(`/history/?page=${name}`);

  return (
    <div>
      여기는 intro 페이지 입니다.
      <button onClick={() => goToRouter("One")}>StepOneComponent</button>
      <button onClick={() => goToRouter("Two")}>StepTwoComponent</button>
      <button onClick={() => goToRouter("Three")}>StepThreeComponent</button>
    </div>
  );
};

#react #next