React에서 url을 다루는 방법들

useLocation

path 정보를 담고있는 객체를 반환한다.

const location = useLocation();

useLocation 반환값

 

useMatch

url일치여부를 반환한다. 일치하면 해당 path 정보를 담은 객체를 반환하고, 일치하지 않으면 null을 반환한다.

const matchChats = useMatch('/');
const matchScrapbooks = useMatch('/scrapbooks/:id');

// => object 또는 null

useMatch 일치시 반환값

 

matchPath

Nav에서 위치한 url에 따라 Nav버튼을 활성화시키고 싶어서 현재 url과 라우터를 매칭하는 작업이 필요했다. 
처음에는 다음과 같이 함수 내부에서 useMatch훅을 사용하여 규칙을 어겼다. 리액트 훅은 컴포넌트 최상위 레벨에서 사용해야 한다.

  const match = (path: string) => {
    return useMatch(path) ? true : false;
  };

훅을 최상위에서 사용해야 한다는 규칙을 지키기 위해 다음과 같이 변경했다.

const matchChats = useMatch('/');
const matchChat = useMatch('/chats/:id');
const matchScrapbooks = useMatch('/scrapbooks');
const matchScraps = useMatch('/scrapbooks/:id/scraps');
const matchMypage = useMatch('/mypage');

하드코딩인듯 아닌듯한... 무엇보다도 컴포넌트가 렌더링될때 마다 라우터별로 useMatch훅을 모두 호출하니 비효율적인 것 같았다.

공식문서에 따라 React Router에서 제공하는 함수 내부에서 사용할 수 있는 matchPath함수를 사용하면 가능하다. 실제로 useMatch는 내부적으로 matchPath를 사용한다. 다음의 코드처럼 useLocation훅과 함께 사용한다. 

  const { pathname } = useLocation();

  const match = (routePath: string) => {
    if (matchPath(routePath, pathname)) return true;
    return false;
  };
  
  // matchPath(비교경로, 현재경로): object 또는 null

 

useParams

path parameter를 담고있는 객체를 반환한다.

// 현재경로 /chats/1
const params = useParams();

// => { id: 1 }

 

useNavigate

url을 이동시키는(페이지를 이동시키는) 함수를 반환한다. 페이지를 이동해도 HTTP요청을 새로 하지 않고(새로고침이 안되고) 상태가 유지된다. (내부적으로 window.history.pushState를 사용한다.)

const navigate = useNavigate();

navigate('/'); // 경로 /로 가기
navigate(-1); // 뒤로 가기
navigate(-2); // 뒤로 2번 가기
navigate(1); // 앞으로 가기

 

Link

react-router-dom의 Link컴포넌트. DOM의 a태그로 변환된다. 

return <Link to='/'>Home</Link>

앱 내부 페이지(라우트)끼리 이동할 때 사용한다. 외부 링크로 연결할 때에는 a태그를 사용한다.

<a href=#>는 전체 페이지를 재렌더링 시킨다. 브라우저 주소를 이동하고 페이지 자체를 새로고침한다.
상태 값이 유지되지 못하고 속도도 저하된다.

<Link />는 SPA의 특징에 맞게 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지된다.

출처: https://velog.io/@ahn-sujin/React-Link-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-useNavigate%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

window.location.href

url 이동시, 페이지 이동시 HTTP요청을 새로 한다. 새로고침이 된다.

window.location.replace

기존 페이지를 새로운 페이지로 변경한다. url을 이동하는 것처럼 느껴진다. history에 기록이 안되기 때문에 뒤로가기가 안된다. 

 

참고

useRouter

next.js에서 라우트 이동시 사용하는 훅이다. 

const route = useRouter();

route.push('/login'); // /login 이동 후 뒤로가기 하면 현재 경로로 돌아옴
route.replace('/login'); // 현재경로를 /login으로 대체하는 것이므로 뒤로가기 해도 현재 경로로 이동 불가(이전 경로로 감)

 

Reference

https://velog.io/@bomida/React-useNavigate-useParams-useLocation-useMatch

https://80000coding.oopy.io/b2ba558a-187d-4945-a135-230e8a775931

https://code00.tistory.com/121

https://velog.io/@seokkitdo/React-Link-useNavigate

https://velog.io/@khy226/Next.js-Router-%EC%A0%95%EB%A6%AC