로고
Careers

브라우저의 hash를 React로 관리하는 custom hook

  • 브라우저의 hash를 관리하기 위해서는 effect를 사용해야 합니다.
  • 아래와 같이 react 상태화 시키면, react 에서 손쉽게 관리할 수 있게됩니다.
import { useCallback, useEffect, useState } from 'react'


const useHash = () => {
  const [hash, setHash] = useState<string>('')


  const hashChangeHandler = useCallback(() => {
    setHash(window.location.hash)
  }, [])


  useEffect(() => {
    setHash(window.location.hash)
  }, [])


  useEffect(() => {
    window.addEventListener('hashchange', hashChangeHandler)
    return () => {
      window.removeEventListener('hashchange', hashChangeHandler)
    }
  }, [hashChangeHandler])


  const updateHash = useCallback(
    (newHash: string) => {
      if (!newHash) {
        history.pushState(null, document.title, location.pathname + location.search)
        setHash('') // hash 를 아예 없애는 것은 HAshchange 트리거가 안됨
      } else if (newHash !== hash) {
        window.location.hash = newHash
      }
    },
    [hash]
  )


  return [hash, updateHash] satisfies [string, (newHash: string) => void]
}


export default useHash