LG CNS AM CAMP - React(3)

Prologue

2편까지는 react 내부끼리 상호작용을 하게 되는 훅에 대해 알아보았다.
오늘은 라우팅 및 라우팅에 관련된 훅에 대해 알아보고자 한다.

React Router Hook

V6 버전부터 React Hook을 기반으로한 React Router Hook이 추가되었다.
react-router-dom 라이브러리에 포함된 BrowserRouter 태그로 감싼 내부에서 라우터 훅들을 사용할 수 있다고 한다.

• 예제

import { BrowserRouter } from 'react-router-dom'

export default function(){
	return(
    	<BroswerRouter>
        	<App />
        </BrowserRouter>
    )
}

Routes, Route

또한 Route 를 사용하여 사용자가 접근할 엔드포인트를 정의하는 것이 가능하다.
path의 id를 인자로 받고자 하는경우 :{id} 로 정의가능하고, Asterisk(*)도 사용가능하다.
그리고 Route 태그는 Routes 내부에서 사용이 가능하다.
즉, BrowserRouter > Routes > Route 이렇게 사용할 수 있다. 그리고 Route 태그 내부에는 또 다른 Route를 위치시킬 수 있다.

• 예제

import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout/>}>
          <Route path="/" element ={<TodoList/>}/>
          <Route path='/profiles' element={<Profiles/>}>
            <Route path=":userId" element={<Profile/>}/>
          </Route>
          <Route path='/login' element={<Login/>}>로그인</Route>
          <Route path='/mypage' element={<Mypage/>}>마이페이지</Route>
          <Route path='*' element={<NotFound/>}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

useParams

위에서 :userId로 정의한 라우트를 호출할때는
/profiles/gwangbu 와 같이 사용할 수 있다. 이때 userId에 해당 되는 값이 gwangbu이다.
해당 인자는 element내부에서 참조가능한데, useParams 훅을 통해 사용할 수 있다.

export default function Profile(){
	const params = useParams();
    const profile = users[params.userId];
  	return(
      </>
    )
}

useLocation, useSearchParams

그리고 라우팅을 세부적으로 관리하기 위한 방법 중 query string이 있는데, 이에 접근하려면 useLocation 혹은 useSearchParam을 사용할 수 있다.
query String 예시는 아래와 같이 표기할 수 있다. ?이후가 query String에 해당된다.
{ip:port}/blabla?something={value1}&something2={value2}
useLocation은 URL에서 현재 위치를 객체로 가져온다. 전체 경로와 쿼리 문자열을 포함하는 반면, useSearchParams는 쿼리 문자열 최적화된 훅이다.

• useLocation 예시

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

const Component = () => {
  const location = useLocation();
  const queries = QueryString.parse(location.search, {ignoreQueryPrefix:true});
  return (
    <div>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
};

• useSearchParams 예시
  setSearchParams을 사용해 사용자의 요청을 변경하기도 가능하다.

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

const Component = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const updateParam = () => {
    setSearchParams({ key: 'newValue' });
  };

  return (
    <div>
      <p>Key: {searchParams.get('key')}</p>
      <button onClick={updateParam}>Update Key</button>
    </div>
  );
};

Navigate, useNagivate

Navigate는 SPA 방식으로 페이지의 리로드 없이 경로를 변경할 수 있다.
리다이렉트와 브라우저기반의 히스토리 스택을 제어할 수 있다.

Navigate는 JSX에서 선언적으로 경로를 변경하고, 조건에 따라 사용자를 리다이렉트한다. (주로 조건부 렌더링에서 사용됨)
useNagivate는 이벤트 핸들러나 프로그래밍적 로직에서 경로를 변경할 때 사용된다.

• Navigate 예시
  replace옵션을 true로 설정하면 사용자가 현재 호출한 히스토리를 지정된 경로로 덮어쓰게된다.
  만약 사용자가 "현재"위치에서 as-is 페이지로 이동하려했는데, 조건에 맞지 않는다면 as-is 의 히스토리 스택이 to-be로 덮어쓰게되고,
  현재 -> as-is -> to-be
  히스토리에는
  현재 -> to-be만 기록된다.
  즉, 사용자가 뒤로가기를 한다면 현재 페이지로 이동하게 된다.

import { Navigate } from "react-router-dom";

export default () => {
    const isLoggedIn = false;
    if(isLoggedIn !== true){
        return <Navigate to={"/login"} replace={true}></Navigate>
    }
    return <h1>마이 페이지</h1>
}

• useNavigate 예시
  이벤트 핸들러에서 동작이 가능하므로 사용자와 인터렉션을 가능하게 해준다.
  useNagivate()에 -1값을 넣으면 뒤로가기를 구현할 수 있다.

import { Outlet, useNavigate } from "react-router-dom";
import { Link,NavLink } from "react-router-dom";
import "./Layout.css"
export default function Layout() {
    const nagivate = useNavigate()
    return(
        <div>
            <header>
                <ul>
                    <li><Link to="/">홈</Link></li>
                    <li><NavLink to="/profiles" style={({isActive})=>
                        isActive ? {color: "red"} : {color: undefined}
                    }>프로파일</NavLink></li>
                    <li><Link to="/login">로그인</Link></li>
                    <li><Link to="/mypage">마이페이지</Link></li>
                    <li><Link to="/movieList">영화조회</Link></li>
                </ul>
                <button onClick={()=>nagivate(-1)}>이전 페이지로 이동</button>
                <button onClick={()=>nagivate("/")}>정보 페이지로 이동</button>
            </header>
            <main>
                <Outlet/>
            </main>
        </div>
    )
}