React에서 SPA용 커스텀 라우터 만들기

Hey Guys 👋, 반응형에서 커스텀 라우터를 만드는 방법을 알려드리겠습니다. 브라우저의 History API를 사용합니다.

현재 URL을 감지하는 방법

url 정보는 window.location 에 저장됩니다. 이것은 location 객체를 반환합니다. location.pathname는 도메인 뒤의 URL 부분을 제공합니다. 예를 들어 url - xdfjdkf.com/abc에서 abc는 location.pathname 를 나타냅니다.

간단한 Route 구성 요소 빌드

location.pathname 기반으로 다른 구성 요소를 렌더링할 수 있습니다. 경로(경로 이름)와 자식(렌더링하려는 콘텐츠)의 2가지 소품을 사용합니다.

export function Route({route, children}) {
    return window.location.pathname === route ? children : 
    null
}

링크 구성 요소 빌드

기본 htmla 태그를 사용하고 있습니다. 링크는 href(링크가 어디로 가야 하는지), className(스타일링을 위해), children(링크가 무엇을 말해야 하는지)의 3가지 소품을 사용합니다.

export function Link({href, className, children}) {
    return (
        <a href={href} className={className}>{children}</a>
    )
}

Link 구성 요소와 a 태그를 사용하는 것의 차이점이 무엇인지 생각할 수 있습니다. 음, 차이점은 a 태그를 클릭하면 SPA(Single Page Application)용 라우터를 구축하는 목적을 달성하지 못하는 페이지 다시 로드가 발생한다는 것입니다.

이를 방지하기 위해 클릭 이벤트를 처리하도록 이벤트 리스너를 설정해 보겠습니다. 기본 동작(페이지 다시 로드)을 방지하기 위해 e.preventDefault()를 호출합니다. 대신 window.history.pushState() 메서드를 사용하여 URL을 변경합니다.

The history.pushState() method adds an entry to the browser's session history stack.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        e.preventDefault();
        window.history.pushState({}, '', href);
    }

    return (
        <a href={href} className={className} onclick={handleClick}>{children}</a>
    )
}

이번에는 URL이 변경되지만 렌더링된 구성 요소는 변경되지 않습니다. 이는 애플리케이션의 나머지 부분이 URL이 변경된 것을 인식하지 못하기 때문입니다. 이를 위해 PopStateEvent 을 발송합니다.

A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        e.preventDefault();
        window.history.pushState({}, '', href);

        const event = new PopStateEvent('popstate');
        window.dispatchEvent(event);
    }

    return (
        <a href={href} className={className} onclick={handleClick}>{children}</a>
    )
}

이제 이 이벤트를 수신하기 위해 라우터 구성 요소에 이벤트 리스너를 설정해야 합니다. 이 이벤트 리스너를 useEffect 후크에 넣겠습니다. 클래스 기반 구성 요소에서 이 메서드를 componentDidMount 에 추가합니다. 우리는 이것을 한 번만 연결하기를 원하므로 종속성에 대한 빈 배열을 지정하겠습니다. 정리(예: 이벤트 리스너 제거)를 위해 useEffect에서 함수를 반환합니다.

export function Route({route, children}) {
    useEffect(() => {
        const onLocationChange = () => {
            //    Do something
        }

        window.addEventListener('popstate', onLocationChange);

        return () => {
            window.removeEventListener('popstate', onLocationChange);
        }
    }, [])

    return window.location.pathname === route ? children :
        null
}

경로 이름이 변경되면 모든 경로 구성 요소가 다시 렌더링되기를 원합니다. 어떻게 합니까? 당신은 그것을 추측! 상태를 사용하여.

const [currentPath, setCurrentPath] = useState(window.location.pathname); 

URL이 올바른지 확인하기 위한 비교는 기술적으로 동일하게 유지될 수 있지만 단순화를 위해 currentPath로 설정하겠습니다.

    return currentPath === route ? children :
        null

여러분 중 일부는 CMD + click 또는 CTRL + click를 사용하여 새 탭에서 링크를 열 수 있습니다. 이것은 많은 튜토리얼이 놓치는 부분입니다. Link 구성 요소에서 이 기능을 구현해 보겠습니다.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        if(e.metaKey || e.ctrlKey) {
            return;
        }

        e.preventDefault();
        window.history.pushState({}, '', href);

        const event = new PopStateEvent('popstate');
        window.dispatchEvent(event);
    }

    return (
        <a href={href} className={className} onclick={handleClick}>{children}</a>
    )
}

metaKey는 CMD를 나타내고 ctrlKey는 CTRL를 나타냅니다. 이것은 기본적으로 사용자가 링크를 클릭하는 동안 이러한 키 중 하나를 눌렀는지 여부를 알려주는 boolean 값입니다. 우리는 일찍 돌아가서 브라우저가 그 일을 하도록 하고 싶습니다.

지금은 그것뿐입니다. 이 게시물이 마음에 드셨으면 합니다. 질문이 있으시면 댓글에 남겨주세요. 최선을 다해 답변해 드리겠습니다. 일단 안녕 👋 .