Router) Router의 부가기능 (.feat history, withRouter)

나의 선임께서는 Router를 쓰실때 <Router history=(routerBrowser머시기)  > 이런식으로 <RouterBroser>쓴 나와는 달랐다....

 

history 과거, 역사, 기록 뭘까......

우선 history 객체를 알아보자

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

설명이 되어있는 md파일 참조하세용~

자바스크립트의 다양한 환경에서 history 세션을 관리한다는 말에 쪼큼 감이 온다.

우선 예제에 저 두 메서드를 쓸것이고 그외에도 위 속성들을 봐주어야한다.

이놈은 라우터를 사용하는 컴포넌트에 props로 사용되고 객체를 사용해서 컴포넌트를 통해서 라우터에 직접적인 접근을 할수있다. 예를들면 특정 함수를 호출했을때 특정경로로 이동하거나, 뒤로가거나, 페이지 이탈방지 등 사용할수 있다.

 

예제를 만들어보자

import React, {useEffect} from 'react';
 
function HistorySample({history}) {
    const goBack = () => {
        history.goBack();
    }
 
    const goHome = () => {
        history.push('/');
    }
 
    useEffect(() => {
        console.log(history)
    }, [history]);
    return (
        <div>
            <button onClick={goBack} >뒤로가기</button>
            <button onClick={goHome}>홈으로</button>
        </div>
    )
}
 
export default HistorySample;

고백은 뒤로가는걸 의미하고 push는 특정경로로 이동하는걸 의미한다 (위 속성표 봐보자)

useEffect()를 이용해 마운트될때 history를 찍어내보자

 

여기까지 이해되쥬?

 

  <Route path="/history" component={HistorySample} />

/history경로로 왔을때 HistorySample 컴포넌트 보여주자구

 

그럼 결과를 보아볼까

버튼을 누르면 홈과 뒤로가기가 맘대로 실행이 된다~ 그런데.... 우리가 찍어낸 콘솔내용을 봐야지?

--->

 

최근(마지막으로) 액션한걸 보여준다는건데...

그냥 이동할때 Push로 되고, 뒤로가기 or 앞으로가기는 POP

 

탐색방지?? 사용자가 페이지에서 이탈하는걸 방지할때 쓰이는거라는데 ...예제 있으니 파해쳐보자

 

listen 경우에는 경로에 변경이 생겼을때 특정 함수를 호출하고싶은경우에 사용

location 은 현재 자신이 있는곳 (자신의 경로에 대한 정보)

push 해당주소로이동

 

replace 해당주소로 이동( 하지만 기록을 남기지 않음 )

-->생각해보면 중요결제나 보안 일회성(전단계)페이지로 넘기지 말아야할때 사용하면 좋을거같다...(왠지 쓸때가 분명 있을거같은...그런)

 

먼저

소개 페이지로 들어가자고

예제 페이지로 이동한후 여기서 홈으로 버튼을 눌러 이동해(Replace)

그럼 <- 뒤로가기 버튼을 누르면 /history 로 가야 하잖아 예제가 있는 그런데 과연??

이렇다는거지.... replace는 본인이 싼 똥을 치운다는 느낌??ㅋㅋ

 

이제는 아까 보았던 페이지 이탈방지를 볼까나?

    useEffect(() => {
        console.log(history)
        const unblock = history.block('정말 떠나실건가요??');
        return () => {
            unblock();
        }

unmount될때 unblock();을 써보자 

 

가실꺼냐 묻는다... 여기서 확인을 누르편 페이지에서 이탈하고, 취소를하면 이게 이탈방지가된다....

쓸곳이 있을거같기도하면서 없기도할거같으면서....

 

========================================================================================================================================================

 

withRouter

라우터 컴포넌트가 아닌 곳에서 math, location, history 사용하는 속성이다.

 

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

(필요하신분은 도큐먼트 참고하세요)

 

이부분은 Route로 사용되지 않은 컴포넌트에서 조건부로 이동할때...-> 보통 로그인 성공했을때 특정경로로가고 실패하면 가만히 있고싶다 할때.....

 

-작성할꺼임 아직 끝 아님.....-  지금 좀힘들어서 쉬는신ㄱ나-------