1. React-Route의 기본 사용(1) v5

이 글은, 최신버젼이 있지만, 그래도 상용화 되어있는 react-route 를 위하여, v5 에 대하여 정리해 본다.

 

https://www.npmjs.com/package/react-router-dom

 

1. import { Route } from "react-router-dom"

 

기본적인 라우트 기능이다.

path 가 맞을때, 렌더되며, 시작 path 가 동일한 모든, Route 에 대하여, 렌더한다.

 

        import { Route } from "react-router-dom"
        
        <Route path="/welcome">     // path 를 지정하고 불러온다.
            <Welcome />
        </Route>

        <Route path={"/products"}>
            <Products />
        </Route>

 

2. import { BrowserRouter } from "react-router-dom"

 

라우터 기능을 활성화 시키기 위한, 프로바이더 정도 생각한다.

앱을 감싸는 최상위 컴포넌트에 적용시키면, 모든 앱에 라우트 기능을 사용 할 수 있다.

 

App.js 나 index.js 등에 사용한다. 나는 index.js

 

< index.js > 

        import { BrowserRouter } from "react-router-dom";   // 라우트의 기능을 잠금해제한다.

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(
            <BrowserRouter>		// 감싸자
                <App />
            </BrowserRouter>
        );

 

3. import { Link } from "react-router-dom"

 

앵커태그는, HTTP 요청을 통해, 완전히 새 페이지를 받고, 적용시킨다

즉, REACT 의 장점과는 전혀 맞지 않는, 불필요한 메모리를 낭비하는 요소가 된다.

 

REACT 는 부분적인 DOM 의 교체(가상 돔을 이용하여) 를 이용한 빠른 유저 경험을 제공한다.

그러므로, 그에 맞는 Link 를 사용하여, 다른 페이지를 로드 한다.

 

    	import styles from "./main-header.module.css";
        import { Link } from "react-router-dom";
        
        function MainHeader() {
            return (
                <ul className={styles.main_header}>
                    <li>
                        <Link to="/welcome"> 웰컴</Link>
                    </li>
                    <li>
                        <Link to="/products"> 프로덕트 </Link>
                    </li>
                </ul>
            );
        }
        export default MainHeader;

스타일은 그대로 a 로 적용시킨다.

    .main_header a {
            color: gold;
        }
  
    .main_header a:hover {
            color: red;
        }

 

4. import { NavLink } from "react-router-dom"

 

현재 경로와 NavLink 의 경로가 일치하면, 스타일을 적용시키는, 특수한 형태의 Link 이다.

    	import styles from "./main-header.module.css";
        import { NavLink } from "react-router-dom";  
        
         <NavLink to="/profiles/gildong" activeStyle={{ background: 'black', color: 'white' } >
            네브링크
          </NavLink>

         <NavLink to="/profiles/gildong" activeClassName={styles.header} >
            네브링크
          </NavLink>

5. 라우트와 동적 라우트 [ / url / :dynamicURL ]

        <div>
            <Route path={"/products"}>        // products 를 들어가면 이 페이지
                <Products />
            </Route>
            <Route path={"/products/:productsName"}>    // "products/ 이후 아무거나 입력"하면 이 페이지
                <ProductDetail />
            </Route>
        </div>

 

6.  import { Switch } from "react-router-dom" & "exact" // 동시 렌더되는 Route 막기 [ exact ]

 

위의 코드를 실행하면, /products 접근할 경우

<Products> 와 <ProductDetail> 이 동시에 렌더된다.

 

이는, 리액트 라우터의 기본 동작원리로

전체파일을 보고, "시작부분이 일치하는", "모든 URL" 을 검사하고, 실행시킨다.

그러므로, "단 하나의 일치되는 path 에만 렌더 하도록, "Switch" 로 감싸주고,

 

정확한, 주소로만 렌더 되도록 exact 옵션을 사용한다.

   
            <Switch>	// Switch 로 감싸면, "일치하는 단 하나의 컴포넌트만 렌더된다"
                <Route exact path={"/products"}>        // exact 옵션을 선택하면, 정확히 "/products/ 로만 렌더된다.
                    <Products />
                </Route>
                <Route path={"/products/:productsName"}> 
                    <ProductDetail />
                </Route>
            </Switch>

 

 

7. import { useParams } from "react-router-dom" [동적 페이지의 값 가져오기]

 

동적 페이지로 접근했다. 왜?

동적인 값을 받기 위하여.

동적인 값을 받으려면, useParams 를 사용한다.

"localhost:3000/products/chairs"
"localhost:3000/products/books"
"localhost:3000/products/desks"

위의 주소는 전부, /products/:productName 의 주소로 인해, 렌더된다.

 

 [/products/:productName 의 주소로 렌더]

	<product-detail page >

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

        const ProductDetail = () => {
        
        	const params = useParams();	// useParams 를 사용하여
        	console.log(params);       	// 아래 각각 페이지에 들어 갈때,

[결과값] 
    "localhost:3000/products/chairs"	// {productName : chairs}
    "localhost:3000/products/books"		// {productName : books}
    "localhost:3000/products/desks"		// {productName : desks}

 

8. 중첩 라우트 사용하기

라우트에 의해 렌더된 컴포넌트 안에서, 또 하나(여러개)의 라우트를 사용할 수 있다.

 

     <App.js>
     			...
        <div>
            <Route path="/welcome">
                <Welcome />
            </Route>
        </div>
        
        
     <Welcome.js>
        import { Route } from "react-router-dom";

        function Welcome() {
            return (
                <div>
                    웰컴!
                    <Route path="/welcome/new-user">   // 주소가 중요하다. 상위의 주소를 반드시 전부 입력해야한다.
                        <p> 신입이냐!</p>
                    </Route>
                </div>
            );
        }

        export default Welcome;

 

주의사항

http://localhost:3000/welcome, 에 접속해서, Welcome.js 가 렌더되었다.

Welcome.js 안에 중첩된 라우트의 주소가

	path = "/new-user
    
라면, 과연 코드는 실행될까?

그렇지 않다.

http://localhost:3000/new-user 의 URL 주소로 접근하는 순간,

App.js 의 Welcome.js 의 렌더하는 조건(path) 가 달라지므로,

상위의 라우트가 렌더되지 않으므로, 중첩된 라우트는 렌더되지 않는다.

** 반드시, 상위 라우트의 주소를 포함한 "모든 주소" 를 path 에 적어야한다.