useCustom hook을 만들어 서비스 헤더의 뒤로가기 기능 구현

사용자가 접근 가능한 최대 라우터는 /messagebox/[userId]/[type]/[messageId]/[options] 인데, 마지막 경로 [options]는 병렬 라우팅으로 생성하고 경로 가로채기를 통해 페이지 상위에 띄우는 방법으로 구현한 페이지와 쪽지에 대한 피드백을 보낼 수 있는 reaction 페이지가 있어서 경로에 맞춰 기능을 구분해야 했습니다.

 

처음에 단순히 router.back()으로 해결하려 하니 사용자 입장에서 고려했을 때 의도한 바로 뒤로가기가 되지 않던 문제가 있어서, 사용자 경험을 개선하기 위해 복잡한 내비게이션 로직을 관리하고 특정 경로에서 뒤로가기 기능을 구현하기 위한 커스텀 훅을 개발했습니다.

 

아래는 router.back() 이었을 때 현상입니다

https://youtu.be/HAXibZoU1Ak

 

 

이전 경로를 기억하도록 하기 위해서 가장 먼저 생각해본 방법은 아래 2가지였습니다.

1. document.referrer
2. 전역 상태 관리

그런데 전역 상태로 이전 페이지의 정보를 가지고 있도록 하면 새로고침되었을 때와 같이 브라우저를 닫지 않았는데 특정 상황에서 저장된 값들이 휘발될 수 있을 거라고 생각해서 먼저 1번으로 시도하게 되었습니다.

❌ 시도 1: document.referrer

다음 사항을 고려하고 진행했습니다.

• 페이지가 이동될 때마다 이전과 현재 페이지의 url들을 저장하도록해서 뒤로가기 버튼을 눌렀을 때 그 이전의 페이지로 이동될 것
• 뒤로가기 되면 이동된 주소는 저장목록에서 삭제될 것
• /messagebox/${userId}에서 뒤로가기 되면 홈 화면으로 가고, 저장된 목록이 다 날아갈 것

useEffect(() => {
    if (document.referrer.includes('/messagebox')) {
      console.log(prevPath) // null 나옴
      console.log(document.referrer) // 처음 접근한 url 나옴
      setPrevPath(document.referrer) 
    }
  }, [pathname])

 

useEffect로 pathname이 변경될 때마다 감지해서 초기값이 null인 문자열 배열 prevPath에 url을 추가하도록 하고, 뒤로 가기 하면 배열에서 삭제되도록 하면 해결되겠다고 예상한 것과 달리, prevPath가 null로 관측되었습니다. document.referrer의 반환값 또한 변경되지 않는 것을 알 수 있었습니다.

그 이유로 Next.js에서는 내부 라우터로 페이지를 이동하기 때문에 브라우저가 최초 진입한 주소만 감지가 가능하지 않을까 추측했습니다.

MDN 문서에는 '링크를 통해 현재 페이지로 이동시킨, 전 페이지의 URI 정보를 반환한다'고 되어있었습니다.

 

✅ 시도 2: Session Storage

마지막으로, 브라우저 웹 스토리지 자체에 이전 접근 URL을 저장하고 관리하는 방법을 떠올렸습니다.

로컬 스토리지에 저장하면 탭을 닫아도 삭제되지 않아서, 탭을 닫거나 브라우저를 종료하면 알아서 휘발되는 세션 스토리지에 저장하는 것이 적합하다고 생각했습니다.

결론적으로는 스택을 구현해 세션에 스택 배열을 저장하는 함수를 훅으로 만들어서 문제를 해결했습니다.

그리고 다음 사항을 고려했습니다.

• 이전 주소값과 현재 주소값이 같으면 저장하지 않는다.
• /messagebox/[userId]/[type]/[messageId] 페이지에 접근하는 루트가 2가지인 것을 고려한다.
  • 위 주소가 3번이라고 가정했을 때 3번에 도달하는 방법은 1-> 2 -> 3, 1 -> 3 이 있다.
• [options]에서는 /reaction 페이지인지 모달 페이지인지에 따라 처리한다.
  • /[options] 경로는 뒤로가기 스택에 추가되면 안된다.
  • /reaction 는 POST 요청을 하는 api가 있는 페이지인데, 요청 후 /messagebox/[userId]/[type]/[messageId] 로 이동되는 과정을 고려해야한다. 이동된 페이지에서 뒤로가기를 했을 때 /reaction으로 돌아가면 안된다.

 

 useEffect(() => {
    const storage = globalThis?.sessionStorage
    if (!storage) return

    let pathStack = JSON.parse(storage.getItem('pathStack') || '[]')
    const pathParts = pathname.split('/')

    if (pathParts.length > 4) return
    
    ....

 

useEffect 훅에 userId, pathname을 의존성으로 주입하고 globalThis?.sessionStorage를 통해 세션 스토리지가 사용 가능한지 확인했고, 세션 스토리지에서 pathStack을 가져와서 JSON 파싱하여 기존의 경로 스택을 초기화했습니다.

[options]를 제외하고 경로의 최대 파트 수가 4개이기 때문에 관리성을 강화하기 위해 4를 초과하면 더 이상 경로를 추적하지 않도록 설정했습니다.

 

    if (pathname === `/messagebox/${userId}`) {
      storage.removeItem('pathStack')
      pathStack = [pathname]
    } else if (pathStack[pathStack.length - 1] !== pathname) {
      if (pathParts.length >= 3) {
        if (!pathStack.includes(pathname)) {
          pathStack.push(pathname)
        }
      }
    }

    storage.setItem('pathStack', JSON.stringify(pathStack))
  }, [pathname, userId])

 

/messagebox 이외의 경로에서는 복잡한 경로 이동이 없기 때문에 사용자가 현재 /messagebox/[userId] 로 진입했을 때만의 조건을 추가했습니다. 이때 이전 경로를 지우고 새로운 경로로 초기화하도록 합니다.

pathStack에서 마지막 경로가 현재 pathname과 다르면서 새로운 경로가 pathStack에 없는 경우에만 추가되도록 조건을 만족할 때만 pathStack 배열에 pathname을 push했습니다.

최종적으로 업데이트된 pathStack을 다시 세션 스토리지에 저장합니다.

 

interface navProps {
  userId: string
  messageId?: string
  type?: MessageType
}

export const useBackHandler = ({ userId, type, messageId }: navProps) => {
  const router = useRouter()
  const pathname = usePathname()

  const backHandler = () => {
    const storage = globalThis?.sessionStorage
    if (!storage) return

    const pathStack = JSON.parse(storage.getItem('pathStack') || '[]')
    const pathParts = pathname.split('/')
    const lastSegment = pathParts[pathParts.length - 1]

    if (pathname === `/messagebox/${userId}`) {
      storage.removeItem('pathStack')
      router.replace(`/home/${userId}`)
      return
    }
    
    if (pathname === `/messagebox/${userId}/${type}/${messageId}`) {
      router.replace(pathStack[pathStack.length - 1])
      storage.setItem('pathStack', JSON.stringify(pathStack))
      pathStack.pop()
      return
    }
    
    if (lastSegment === 'reaction') {
      const messagePagePath = pathParts.slice(0, -1).join('/')
      router.replace(messagePagePath)
      pathStack.pop()
      return
    }

    if (pathParts.length > 4 && lastSegment !== 'reaction') {
      router.replace(pathStack[pathStack.length - 1])
      pathStack.pop()
      return
    }

    if (pathStack.length > 1) {
      pathStack.pop()
      storage.setItem('pathStack', JSON.stringify(pathStack))
      router.replace(pathStack[pathStack.length - 1])
    }
    
    router.back()
  }

{/* 앞의 useEffect */}

  return backHandler
}

 

이제 조건 처리를 해줬는데, 앞서 정리한 요구사항을 기준으로 조건을 만족하도록 작성했습니다.

/messagebox/[userId] 위치에 있을때 뒤로가기 하면 home으로 돌아가고, session storage에 저장되어있던 pathStack 자체가 날아가도록 했습니다.

 

pathStack에는 배열의 끝에 값을 추가하는 push 메소드를 사용해서 path를 추가하도록 해서 /messagebox/[userId]/[type]/[messageId] 페이지에 접근하는 루트가 2가지여도 배열의 마지막 값으로 경로를 대체시킨 후, 사용한 값을 pathStack에서 삭제하기 위해 pop 메서드를 사용했습니다.

/messagebox 이외의 경로에서는 단순히 router.back()만 해줘도 되었기 때문에 다른 조건에 모두 해당하지 않는다면 router.back()을 통해 뒤로가기가 작동하게 됩니다.

 

이제 사용자의 예상대로 뒤로가기를 통한 이동이 이루어집니다.

https://youtu.be/LRM-yF2Lxns