react 이전 페이지 확인 - 어떤 페이지에서 진입하는지 확인

상황

마이페이지를 개발하는데 이전 페이지가 어디 페이지에서 진입하느냐에 따라 보여줘야할 컴포넌트 하나가 차이가 났다. 문제를 해결할 방법을 잘 모르겠어서 우선 코드가 겹치지만 마이페이지에 해당하는 페이지를 두 개를 만들었다. 로직은 똑같지만 이전 페이지가 어떤 페이지인지 정보만 안다면 마이페이지 컴포넌트를 두개 만들 필요가 전혀 없어보였다.

 

내정보 페이지의 로직은 아래와 같다. 

이전 페이지가 수정완료 페이지라면? 내정보 페이지 + 토스트 컴포넌트

이전 페이지가 그 외의 페이지라면? 그냥 내정보 페이지

 

문제 

고민했던 부분은 <MyPage> 페이지 컴포넌트에 Props로 조건을 내려주어 원하는 조건대로 다른 두 방향으로 <MyPage>를 띄워줄 수 있을까? 라고 생각을 했었는데, 애초에 react-router-dom의 useNavigate() hook을 사용해서 마이페이지로의 페이지 전환을 구현했기 때문에,MyPage 컴포넌트에 해당하는 path로 이동을 해버리면, 예를들면 navigate("/mypage") 이런 식으로 페이지 전환을 할텐데 어떻게 컴포넌트를 불러와서 Props를 보낼 수 있다는 것인지? 에 대한 부분이었다. 그래서... useNavigate를 호출할때 히스토리만 저장해둘 수 있다면? 즉, 마이 페이지를 기준으로 내 이전 페이지가 어떤 페이지인지만 정보를 알고있으면 해결이 될 것 같은 문제였다.

 

해결

해결책은 react-router-dom에 있었다.

페이지 전환을 위해 사용한 라우터의 useNavigate 훅으로 페이지 전환시 현재 페이지의 정보를 state라는 옵션을 주면 된다. 

그리고, 전환된 페이지에서는 useLocation이라는 훅으로 저장되어있는 state 값을 가져올 수가 있다.

 

react-router-dom의 navigate hook 을 사용해서 진입해온 페이지를 

이동한 페이지에서는 useLocation을 사용해서 navigate로 페이지가 전환되어도 저장된 state 값을 받아올 수 있어 이전 페이지가 어떤 페이지인지 정보를 확인할 수 있다. 

 

useNavigate() 사용해서 다음 페이지로 전환 

 

import { useNavigate } from 'react-router-dom';

export const MyInfoEdit = () => {
  
  const navigatge = useNavigate();

  const handleClickEditDone = () => {
    navigate('/myinfo', { state: 'nameEdit' });
  };

  return (
      <Button variant='contained' fullWidth onClick={handleClickEditDone}>
        수정 완료
      </Button>
  );
};

 

수정 완료 버튼을 누르면, navigate hook을 사용해서 /myinfo 경로인 <MyInfo /> 페이지 컴포넌트로 이동하고, 이때 현재 상태인 'nameEdit'의 상태를 state 옵션값으로 추가한다. 

 

 

useLocation() 으로 앱이 어떤 페이지에서 왔는지 확인 

 

import { useLocation } from 'react-router-dom';

export const MyInfo = () => {

  const location = useLocation();
  console.log(location, 'location');

  const [isEditDoneToastOpen, setIsEditDoneToastOpen] = useState(false);
  const onCloseEditDoneToast = (
    event: React.SyntheticEvent | Event,
    reason?: string,
  ) => {
    if (reason === 'clickaway') {
      return;
    }
    setIsEditDoneToastOpen(false);
  };

  //이전 진입페이지가 수정페이지 였다면 Snackbar 토스트 띄우기
  useEffect(() => {
    if (location.state) {
      setIsEditDoneToastOpen(true);
    }
  }, []);

  return (
    <PageLayout
      titleBoxTitle={<>내 정보</>}>
      <Snackbar
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        open={isEditDoneToastOpen}
        autoHideDuration={3000}
        onClose={onCloseEditDoneToast}>
        <Alert
          severity='success'
        >
          {location.state === 'nameEdit' && '내 정보 수정 완료'}
        </Alert>
      </Snackbar>
    </PageLayout>
  );
};

 

이제 MyInfo 페이지에서 useLocation 훅을 사용해 저장되어 있는 state 데이터를 확인할수가 있다.

useLocation() 을 location 이라는 변수에 할당해주고, location.state 값을 확인해서 그 값이 있다면? 이전 페이지에서 history 를 저장해서 이 페이지로 보낸 것이므로, 이전 페이지가 어떤 페이지 였는지까지 state 값을 확인할 수가 있다. 

 

 

useLocation 값 콘솔에 찍어보기

 

결론

페이지 전환시 navigate를 사용할 때 현재 페이지의 history 정보를 useNavigate 객체에 구현된 state 에 저장할 수 있다.

useNavigate로 페이지 전환시 현재 위치 페이지를 state로 주고, 전환된 페이지에서는 useLocation으로 이전 페이지 state 값을 받아오는 것으로 해결할 수 있다.

 

 

 

참고

https://reactrouter.com/en/6.17.0/hooks/use-navigate

https://reactrouter.com/en/main/hooks/use-location

https://explain-programming.tistory.com/5