[React] React Router 사용하기

김보나·2021년 10월 15일
0

React

목록 보기
4/15

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();
  • 결과
profile
우주최강 개발자가 될 때까지😈

2개의 댓글

comment-user-thumbnail
2021년 10월 15일

울 스터디장님 쩰로 멋져요!

1개의 답글