# 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>
);
};
