왜 useBack 커스텀 hook을 만들었는가?

내비게이션 경험은 사용자 만족도를 결정짓는 핵심 요소입니다.

특히 모바일 환경이나 복잡한 내비게이션 구조를 가진 웹 애플리케이션에서는 router.back()이 예상대로 동작하지 않는 경우가 많습니다.

이 문제를 해결하고자 useBack이라는 커스텀 hook을 개발하였습니다.

기존 router.back()의 한계

1. 히스토리 스택 부족 문제

router.back()은 브라우저 히스토리를 기반으로 작동하지만, 사용자 흐름에 따라 예상치 못한 동작을 유발할 수 있습니다.

• 사용자가 외부 링크를 통해 유입되었거나 페이지를 새로고침한 경우, 히스토리 스택이 충분하지 않아 router.back()이 동작하지 않을 수 있습니다.
• 이 경우 사용자가 "뒤로 가기" 버튼을 눌러도 이전 페이지로 이동하지 못하고 빈 화면 혹은 예기치 않은 페이지로 이동하게 됩니다.

2. 내비게이션 컨트롤 부족

이러한 문제를 해결하기 위해 useBack hook을 구현하였으며, 아래와 같은 기능을 제공합니다.

• 히스토리 길이 검사 및 대체 경로 제공: window.history.length를 확인하여 내비게이션 실패를 방지하고, 대체 경로를 제공합니다.
• 사용자의 예상대로 동작하는 내비게이션 환경 제공: 예상치 못한 이동을 방지하여 UX 혼란을 줄입니다.
• Next.js 내비게이션 API를 활용한 일관된 UX 유지: Next.js의 내비게이션 구조에 맞춰 안정적인 이동을 보장합니다.

useBack 구현 코드

App Router 환경

'use client';

import { useCallback } from 'react';
import { useRouter } from 'next/navigation';

const useBack = (defaultPath = '/') => {
  const router = useRouter();

  const goBack = useCallback(() => {
    // SSR에서 window 객체가 없을 수 있기 때문에 체크
    if (typeof window === 'undefined') {
      router.replace(defaultPath);
      return;
    }
    
    if (window.history.length <= 2) {
      router.replace(defaultPath); // 히스토리 부족 시 안전한 기본 경로로 이동
    } else {
      router.back(); // 충분한 히스토리 스택이 있으면 일반적인 뒤로 가기 수행
    }
  }, [router, defaultPath]);

  return goBack;
};

export default useBack;

Page Router 환경

import { useCallback } from 'react';
import { useRouter } from 'next/router';

const useBack = (defaultPath = '/') => {
  const router = useRouter();

  const goBack = useCallback(() => {
  	// SSR에서 window 객체가 없을 수 있기 때문에 체크
    if (typeof window === 'undefined') {
      router.replace(defaultPath);
      return;
    }
    
    if (window.history.length <= 2) {
      router.replace(defaultPath); // 히스토리 부족 시 기본 경로로 이동
    } else {
      router.back(); // 일반적인 뒤로 가기 실행
    }
  }, [router, defaultPath]);

  return goBack;
};

export default useBack;

 

useBack 훅은 router.back()의 한계를 보완하고, 히스토리 길이 기반 조건부 내비게이션을 통해 안정적인 UX를 보장합니다.

특히, 모바일 환경이나 단계가 많은 프로세스를 포함한 웹 애플리케이션에서 유용하게 활용될 수 있습니다.
단순한 '뒤로 가기' 기능이 아니라, 사용자 행동 패턴을 분석하고 기대에 부합하는 내비게이션 설계가 필요합니다.

특히, 복잡한 프로세스(예: 장바구니, 가입 단계 등)에서 뒤로 가기 시 예기치 않은 화면 전환이나 데이터 유실이 발생하지 않도록 상태 관리를 신중하게 설계해야 합니다.

useBack은 이러한 접근 방식을 반영한 예시이며, 프로젝트에 맞게 확장하여 사용할 수 있습니다.