[React] React Router 사용하기

react-router

• 공식문서 : https://reactrouter.com/
• react의 컴포넌트를 특정 path와 연결하면 해당하는 path진입시 컴포넌트를 렌더링함(화면에 출력)
  → 조건에 맞지 않을 경우 redirect함
• query, path variable 등 URL parameter를 얻어서 활용할 수 있음.
• nested route(중첩라우팅)지원

react-router 사용법

• 예시

  //index.js
  ReactDOM.render(
    <React.StrictMode>
      <Router>
        <App />
      </Router>
    </React.StrictMode>,
    document.getElementById("root")
  );

  1. Router로 감싸 Router Context를 제공해야함.
     →context안에서만 browserRouter가 동작함.
  2. Router의 하위 요소
     → 각각 필요한 라우터를 골라서 사용할 수 있음
     - [<BrowserRouter>](https://reactrouter.com/web/api/BrowserRouter)
     - [<HashRouter>](https://reactrouter.com/web/api/HashRouter)
     - [<MemoryRouter>](https://reactrouter.com/web/api/MemoryRouter)
     - [<NativeRouter>](https://reactrouter.com/native/api/NativeRouter)
     - [<StaticRouter>](https://reactrouter.com/web/api/StaticRouter)
     - https://reactrouter.com/web/api/Router 참고
• 예시2

  		<Router>
           
  		/*기본 주소에 접속하면 보이는 태그*/
              <Route exact path="/">
                <h1 style={{ color: "#000000" }}>STAYC</h1>
                <nav>
  		/*ol태그를 클릭하면 /뒤의 주소가 sieun으로 변경됨*/
                  <Link to="/sieun">
                    <ol>시은</ol>
                  </Link>
  		/*///////////////////////////////////*/
                  
                </nav>
                <h2 style={{ color: "#000000" }}>멤버 이름 클릭</h2>
  		/*기본 주소에 접속하면 보이는 태그*/
  
  /*기본주소/seeun으로 접속하면 보이는 태그*/
              <Route exact path={"/seeun"}>
                <Article member={seeun}></Article>
              </Route>
  		/*기본 주소/seeun으로 접속하면 보이는 태그*/
            
          </Router>

  1. Route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포넌트를 넣음.
  2. Link로 특정 페이지 이동시, 리로드 없이 페이지가 이동함.
  3. Switch로 매칭되는 라우트 하나를 렌더링하게함.
  4. Link는 anchor tag 및 a 태그를 대신하여 사용함.
     → 앵커태그: 웹 문서가 너무 길 경우 필요한 곳에 놓고 그 위치로 한번에 이동하는 링크

react-router 요소

• BrowerRouter
  • html5의 history API를 사용하여, ui와 url의 싱크를 맞추는 역할.
  • 모든 url에 대해 동작하게 하기 위해서는 서버 설정이 필요함.
  • 모든 path 앞의 basename 을 지정할 수 있음.(ex basename="/ko")
  • forceRefresh로 페이지 이동시 리프레시할것인지 지정가능.
• Switch
  • 여러 route중 매치되는 route 위에서부터 하나 선택하여 랜더링
  • 매칭되는 route가 없으면 아무것도 보여주지 않음.
  • fallback용으로 404 not found page를 렌더링함(아무것도 매칭이 안될때)
  • path="/"의 경우 모든 path에 매칭되므로 exact키워드를 추가하거나 가장 아래로 내림
• Route
  • path와 컴포넌트를 매칭함
  • 매칭된 컴포넌트는 children으로 넣어주거나 component prop으로 넘김
  • exact 키워드로 정확하게 매칭하는 path를 설정함.
    →exact가 없을 경우 to prop으로 보낸 path가 포함되면 매칭됨.
  • route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받음.
  • render prop으로 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제함.
• Redirect
  • Link와 비슷하나 렌더링되면 to prop으로 지정한 path로 이동함.
  • Switch 안에서 쓰일 경우 ,from,to 를 받아 이동하게 만듦.
  • ex from="/"to="/login"
• Link,NavLink
  • to prop을 특정 URL로 받아 클릭시 네비게이션함.
  • anchor tag를 래핑함
  • Nav Link의 경우, 매칭시 어떤 스타일을 가질지 등의 추가 기능이 있음.
  • to에 location object나 함수를 받을 수 있음.
• useHistory, useLocation, useParams, useRouteMatch
  • 최상위 컴포넌트가 아니더라도 hook으로 react-router 관련 객체에 접근할 수 있음.
  • history,location,params,match 객체에 접근함.

Private Route

• 특정 조건이 충족되지 않았을 때 다른 페이지로 Redirect 하는 기능
• 유저의 상세페이지, 개인정보 변경 페이지 등을 만들 때 사용함
• 예시

  useEffect(()=>{
  	if(!validateFunc()){
  		history.push("login");	
  	}
  		}, [] )

query string

• url의 query string 정보를 활용해 앱을 구성할 수 있음.
• URLSearchParams API 를 활용함

⇒ Private Route와 query String, URLSearchParams API는
나중에 간단하게 회원가입 폼을 만들어보면서 다시 포스팅 할 예정이다.

404페이지 route

• 404일경우 나타낼 컴포넌트를 만든다.
• Router의 가장 하단에 Route를 넣어주고 404 컴포넌트를 사용한다.

→ 단 이렇게하면 모든 페이지에서 404 페이지가 함께 나타날 수 있다.

그래서 **Switch를 이용하여 많은 라우트중에 하나만** 선택 되게 해야한다.

• 예시

		<Router>
          **<Switch>**
            <Route exact path="/">
              <h1 style={{ color: "#000000" }}>STAYC</h1>
            </Route>
            <Route exact path="/sieun">
              <Article member={sieun}></Article>
            </Route>
            <Route exact path={"/seeun"}>
              <Article member={seeun}></Article>
            </Route>
            **<Route>
              <NotFoundPage></NotFoundPage>
            </Route>
          </Switch>**
        </Router>

간단한 실습

• 경로 : '/'
  • 맨 위에 제목
  • 그 밑에 nav태그로 감싼 ol태그
    → 태그를 클릭하면 태그에 맞는 path로 변함
  • 하단에 설명
• 경로 : '/멤버'
  • 각각의 태그를 클릭하면 해당 멤버의 경로로 바뀜
  • 페이지는 새로고침 되지 않고, 해당 멤버의 이름과 사진이 나옴
  • 메인화면 글씨를 클릭하면 메인화면으로 감
• 그외 기타 경로
  • 위의 두개의 경로 이외의 경로에 접속하면 잘못된 경로 라는 문구가 나옴.
• 코드
  • App.js

    import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
    
    import "./App.css";
    
    function Article({ member }) {
      return (
        <div>
          <h2 style={{ color: "#000000" }}>{member.name}</h2>
          <img src={member.img} style={{ width: 200, height: 500 }} />
          <br />
          <Link to="/">메인화면</Link>
        </div>
      );
    }
    
    function App() {
      const sieun = {
        name: "시은",
        img: "http://static.inews24.com/v1/1504f905239326.jpg",
      };
      const sumin = {
        name: "수민",
        img: "http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/09/06/23185b44-ce33-4310-895b-e37888703a5c.jpg",
      };
      const seeun = {
        name: "세은",
        img: "https://newsimg.sedaily.com/2020/11/12/1ZADOJIIDW_1.jpg",
      };
    
      function NotFoundPage() {
        return (
          <div>
            <h1 style={{ color: "#000000" }}>잘못된 경로!</h1>
          </div>
        );
      }
    
      return (
        <div className="App">
          <header className="App-header">
            <Router>
              <Switch>
                <Route exact path="/">
                  <h1 style={{ color: "#000000" }}>STAYC</h1>
                  <nav>
                    <Link to="/sieun">
                      <ol>시은</ol>
                    </Link>
                    <Link to="/sumin">
                      <ol>수민</ol>
                    </Link>
                    <Link to="/seeun">
                      <ol>세은</ol>
                    </Link>
                  </nav>
                  <h2 style={{ color: "#000000" }}>멤버 이름 클릭</h2>
                </Route>
                <Route exact path="/sieun">
                  <Article member={sieun}></Article>
                </Route>
                <Route exact path="/sumin">
                  <Article member={sumin}></Article>
                </Route>
                <Route exact path={"/seeun"}>
                  <Article member={seeun}></Article>
                </Route>
                <Route>
                  <NotFoundPage></NotFoundPage>
                </Route>
              </Switch>
            </Router>
          </header>
        </div>
      );
    }
    
    export default App;

  • index.js ⭐잊지말자 route를 사용할때는 Index.js에도 꼭 적용 시켜줘야한다는걸 ⭐

    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
    
    ReactDOM.render(
      <React.StrictMode>
        <Router>
          <App />
        </Router>
      </React.StrictMode>,
      document.getElementById("root")
    );
    
    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    reportWebVitals();

• 결과