react ( Udemy강의 ) - 8. Routing

Routing

     - URL을 통해 JS를 사용하여 도메인 뒤의 URL과 해당 경로를 조작 가능

     - 또한 URL을 제어하고 해당 URL이 변경되거나 새 HTML파일을 가져오지 않고 링크를 클릭 시 일부 React코드 작성

       그래서 도메인 뒤의 해당 경로와 작동하는 URL과  작동하는 일부 코드 필요 

 

react-router

npm install react-router-dom

1. 사용 방법 ( 버전 5 ) 

<BrowserRouter>
	<Route path="/welcome" >
		<Welcome />
	</Route>
	<Route path="/products">
		<Products />
	</Route>
</BrowserRouter>

BrowserRouter : 라우터 활성화, 라우터 컴포넌트를 래핑

2. 페이지 이동

     - <a href='#'> 대신 <Link to="#"> 사용

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

<Link to="/welcome">Welcome</Link>

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

<NavLink to="/welcome" activeClassName={classes.active} >Welcome</NavLink>

- 특정 링크에 스타일을 넣어줄 수 있음 : activeClassName

 

3. 동적 경로 세그먼트

<Route path="/product-detail/:productId">

</Route>

- /product-detail/any value : product-detail 뒤에는 아무 값이나 와도 괜찮다.

 

useParams( ) : 상수를 저장할 수 있는 params 객체를 반환, Route의 key값으로 접근

const params = useParams();
console.log(params.productId);

 

<Route path="/products">
  <Products />
</Route>
<Route path="/products/:productId">
  <ProductDetail />
</Route>

- 두 페이지 둘 다 실행

 

Switch : 경로 중 하나만 동시에 활성화

<Switch>
    <Route path="/products" exact>
      <Products />
    </Route>
    <Route path="/products/:productId">
      <ProductDetail />
    </Route>
</Switch>

- 순서에 따른 랜더링

     1. Route 순서변경

     2. exact props : 정확히 일치하는 경우에만 일치 여부를 알려줌

 

4. 중첩 라우팅

- 한 곳에서만 라우트를 정의하는 것이 아니라 원하는 곳 어디에서나 라우트를 정의할 수 있다는 것

- 경로에 대한 해당 시작페이지에 있어야만 활성화 가능

 <Route path="/welcome">
          <Welcome />
</Route>

const Welcome = () => {
  return (
    <section>
      <h1>The Welcome Page</h1>
    <Route path="/welcome/new-user">
        <p>Welcome, new user!</p>
    </Route>
    </section>
  );
};

- /welcome/new-user 로만 접속 시 Welcome, new user! 출력

 

5. 리디렉션

<Route path='/' exact>
	<Redirect to='/welcome'/>
</Route>

 

6. useHistory

     - 브라우저 기록을 변경 가능 - URL을 바꿀 수 있게 해준다.

     - 히스토리 변경작업을 트리거하는 데 사용할 수 있는 히스토리 개체를 확장

import { useHistory } from "react-router-dom";
const history = useHistory();
history.push;

push : 탐색 가능, 페이지 기록에 새 페이지가 표시 - 백 버튼을 사용하여 원래 페이지로 돌아갈 수 있음

         발생한 페이지를 변경하는 리디렉션과 같고

replace : 현재 페이지를 대체 - 백버튼으로 원래 페이지로 돌아갈 수 없음

            새로운 페이지를 추가

 

7. Prompt

     - 렌더링할 수 있는 컴포넌트로 다른 곳으로 이동할 때 자동으로 그걸 감시

     - 특정 조건이 충족되면 떠나기 전에 경고를 표시

<Prompt when={isEntered} message={(location) => 'Are you sure you want to leave?'}/>

    - when : 사용자가 URL을 변경하는 경우 이 프롬프트가 표시되어야 하는지 여부를 찾기 위해 true 또는 false를 전달

    - message : 사용자가 나가려고 할 때 보여주고 싶은 텍스트가 포함된 문자열을 반환해야하는 함수를 취함

                     페이지에 대한 정보를 담고있는 어떤 위치객체를 얻음

 * submit 버튼을 누를 시 when을 false값으로 변경해야한다.

              ( button onClick이벤트에 넣어야함. onSubmit은 이미 늦음 )

 

8. useLocation

     - location 객체에 최근 로드된 페이지와 URL에 대한 정보가 있음

import { useLocation } from "react-router-dom";
const location = useLocation();

const queryParams = new URLSearchParams(location.search);
const isSortingAscending = queryParams.get('sort') === 'asc';

+ new URLSearchParams();

: 자바스크립트의 기본 생성자 함수 겸, 기본 class인데 브라우저에서 사용 가능

 

 

9. Nest Route

- URL을 근거로 다른 콘텐츠를 상황에 따라 렌더 가능

<Route path={`/quotes/${params.quoteId}`} exact>
        <div className="centered">
          <Link className="btn--flat" to={`/quotes/${params.quoteId}/comments`}>
            Load Comments
          </Link>
        </div>
</Route>
<Route path={`/quotes/${params.quoteId}/comments`}>
        {/* path='/quotes/:quoteId/comments' 또한 가능 */}
        <Comments />
</Route>

 

10. useRouterMatch

- URL과 라우터가 알고 있는 내부에서 관리되는 데이터를 가져야함

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

const match = useRouteMatch();

Ex)
      <Route path={`${match.path}/comments`}>

 

---

버전 6의 변경사항들

1. Switch -> Routes

2. element={<Welcome />}

3. exact 생략 - 경로를 정의하면 정확하게 일치하는 것만 찾게 된다.

    라우팅 순서는 중요치 않다. -> 버전6이 해당경로에 대한 가장 적합한 라우팅을 로드하도록 알고리즘 개선

<BrowserRouter>
   <Routes>
      <Route path='/welcome' element={<Welcome />} />
      <Route path='/products' element={<Products />} />
      <Route path='/products/:productId' element={<ProductDetail />} />
   </Routes>
</BrowserRouter>

4. NavLink 의 activeclassName 삭제

<NavLink className={(navData)=> navData.isActive? classes.active : '' } to='/welcome'>
</NavLinK>

navData.isActive : 이 링크가 현재 선택된 경로에 대해 활성화 여부를 알려줌

 

5. Redirect -> Navigate

<Route path="/" element={<Navigate replace to="/welcome" />} />

/welcome 페이지에 대한 탐색을 탐색 스택으로 푸시하게 됨. 리다이랙션을 원한다면 현재의 페이지를 새로운 페이지로 바꾸고 탐색을 위해서는 replace props도 추가

 

6. 중첩 라우팅

- Routes로 감싸주기

- 상위 router path = '/*' 마무리할 것

- 중첩시 해당 컴포넌트는 상위 path는 있다고 판단함 

<Route path="/welcome/*" element={<Welcome />} />
//--------------------------------------------------------------
// Welcome 컴포넌트
<Routes>
	<Route path="new-user" element={<p>Welcome, new user!</p>} />
</Routes>

+ 추가

Link to 또한 해당 컴포넌트안에 있을 시 생략

<Route path="/welcome/*" element={<Welcome />} />
//--------------------------------------------------------------
// Welcome 컴포넌트
<Link to="new-user">New User</Link>

+ 중첩 라우팅 2

<Route path="welcome/*" element={<Welcome />}>
	<Route path="new-user" element={<p>Welcome, new user!</p>} />
</Route>
// ---------------------------------------------------------------

<Outlet />

<Outlet /> : react router에게 중첩 컨텐츠가 어디 있고,

                중첩 라우팅 콘텐츠가 어디 들어갈지 알리기 위해 자리만 채우는 것

 

7. 탐색

     명령형(Imperative) 탐색

           : 탐색할 때 링크 대신 사용할 수 있는 방식, 특정 작업이 완료된 직후나 버튼이 눌렸을 때

            HTTP 요청이 보내졌을 때 등 탐색을 하고 싶은 경우

           useHistory( ); -> useNavigate( );

const navigate = useNavigate();
navigate('/welcome', {replace:true});

navigate(-1) : 이전페이지로 돌아가는 것, -2 전전페이지로 돌아감, 1은 다시 앞으로 간다.

 

8. Prompt : 사라짐