Route & Router

WONNY_LOG·2023년 4월 17일
0

Route

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import GlobalStyle from "app/view/style/GlobalStyle";
import { View } from "app/view";
import { Layout } from "app/view/widgets/layout";

const App: React.FunctionComponent = () => {
    return (
        <BrowserRouter>
            <GlobalStyle />
            <Switch>
               <Route
                    path={"/"}
                    render={() => {
                        return (
                            <Layout.TeamWrapLayout>
                                <Route path={"/team"} component={View.TeamView} />
                                <Route path={"/team/:teamId"} component={View.MemberListView} />
                            </Layout.TeamWrapLayout>
                        );
                    }}
                />

            </Switch>
        </BrowserRouter>
    );
};

export default App;

subRoute

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import GlobalStyle from "app/view/style/GlobalStyle";
import { View } from "app/view";
import { Layout } from "app/view/widgets/layout";

const App: React.FunctionComponent = () => {
    return (
        <BrowserRouter>
            <GlobalStyle />
            <Switch>
                  <Route path={"/team"} component={View.TeamView} />

            </Switch>
        </BrowserRouter>
    );
};

export default App;

사용되는 view로직

import React, { ReactNode, useReducer } from "react";import { Route } from "react-router-dom";

import 잊지말기

https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2Fb3578abb-cc23-4b08-b8a2-6570ea9823e5%2Fimage.png

  • **Router**

URL을 통해 서버에게 어떤 행위를 요청하고 응답받는 것

localhost:3000/posts/write (POST 방식) URL+내용물을 서버에게 전송하면, 서버에서 데이터베이스에 통신하고 있어서 내용물을 저장해줌

localhost:3000/posts/write (GET 방식) URL뒤에 있는 내용물을 불러와준다

리액트 라우터 ⇒ (SPA)페이지는 하나인데 URL의 이용으로 html 내용들을 바꿔주는 방식

라우팅 ⇒ 다른 주소에 다른 화면을 보여준다

  • 라우팅 라이브러리 (3가지)→ React라우터, Reach라우터, Next.js

react-router 사용법

yarn add react-router-dom 라이브러리 설치

//index.tsx에 다음과 같이 적는다
ReactDOM.render(<App />, document.getElementById("root"));
  • APP안에 들어있는 component들은 해당주소의 Route가return되면 렌더링된다

BrowserRouter ?

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { View } from "app/view";

const App: React.FunctionComponent = () => {
    return (
//새로고침없이 url이 바뀌고 데이터가 바뀌도록 해준다 //react-router-dom라이브러리에 포함된 것
        <BrowserRouter><GlobalStyle /><Switch>//Route의 path={"/team"} 주소로 유저가 유입했을 때, 아래 컴포넌트들이 render되면서 데이터들이 view로 보여짐
                <Routepath={"/team"}render={() => {
                        return (
                            <Layout.TeamWrapLayout><Route path={"/team"} component={View.TeamView} /><Route path={"/team/:teamId"} component={View.MemberListView} /></Layout.TeamWrapLayout>);
                    }}/></Switch></BrowserRouter>);
};
  • History API = 브라우저에서 제공하는 API (SPA에서 이 API를 사용)
  • html5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있다 / History API를 사용한 UI를 업데이트하는 것 (페이지 깜빡임 없음)
  • 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 만들어 줌
  • 컴포넌트는 컴포넌트를 렌더링 할 때 props로 history 객체를 전달한다

paths

Route가 렌더되면 그안에 있는 컴포넌트들이 렌더되는데 이때 각 컴포넌트들에게 각 URL을 부여하고싶다 .

<Route path="/이동할 주소" component={출력할 컴포넌트}/>
<div><Route path="/" component={Home} exact /> //1번째줄
      <Route path="/about" component={About} /> //2번쨰줄
    </div>

위와같이 / 에는 Home가 뜨길 원하고 /about은 About가 뜨길원한다

그리고 / 를 사용한다면 /about 이렇게 쓴다면 Home와 About가 둘다 뜬다

exact 라는 옵션을 사용하면 정확히 이 path에서만 해당 라우팅을 이뤄지도록 하라 라는 뜻이 된다

1번째 줄에서 '/'포함되어있어도 1번째 줄에 exact가 있기 때문에 2째줄 렌더에 1째줄 데이터는 뜨지 않는다

1 Route N paths

하나의 라우트에 여러가지 패스를 정해줄 수가 있는데, 즉 URL 입력을 여러 개로 해도 동일한 컴포넌트가 렌더링 되도록 할 수 있다.

<Route path={['/about', 'hi']} component={About} />

path부분에는 배열이라는 자바스크립트 코드가 들어가므로 꼭 {}로 감싸야 한다

Router

컴포넌트는 현재의 URL과 관련된 몇몇 정보들을 Context로 구성해서 해당 Context의 Provider 컴포넌트(이하 <RouterContext.Provider>)를 렌더링 한다

이는 트리의 깊은 곳에 위치하는 각종 라우팅 관련 컴포넌트(, 등)들이 어디서든 브라우저의 현재 URL과 관련된 정보들을 참조할 수 있도록 하기 위함이다.

이때 Context로 구성되는 정보로는 match 객체, location 객체, history 객체가 있다.

라우터는 props를 통해 history객체를 전달받는다

컴포넌트는 현재 URL과 path props 값을 다시 매칭 해서 match 객체, location 객체, history 객체를 렌더링 할 컴포넌트에게 넘겨준다. 이때 match 객체와 location 객체는 history 객체와 달리 참조값이 다른 새로운 객체이다.

SubRoute

<Route path="/users" exact render={() => <div>유저를 선택하세요.</div>}/><Route path="/users/:userid" component={User} />

<Route path="/users" exact render={() => <div>유저를 선택하세요.</div>} /> 가 렌더 되면서

해당 컴포넌트안에 새로운 데이터가 뿌려질 컴포넌트 , 버튼 들에 링크 값이 부여된다 (이는 pramas.. 등등을 통해 부여할 수 있다)

그래서 컴포넌트 , 버튼에 어떠한 URL이동 이벤트가 일어났을때 상위 Route 의 path="/about" 였던 /about 뒤에 부여된 값들이 붙어 새URL이 생성된다 /about/user

그럼 해당 url은 어떻게 렌더 되느냐

path 가/users/:userid 이렇게 생긴 route를 찾아 해당컴포넌트가 렌더되며 view가 보여지게 된다

<Route path="/users/:userid" component={User} />

History

History 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props이다. 이객체가 라우터 API를 호출한다

이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있다

브라우저에서 쉽게 내비게이션 기능을 구현할 수 있도록 각종 API를 제공하는 역할을 수행한다

history.goBack(), history.push('\') 이와같이 해당객체는 메서드와 함께 사용 가능하다

히스토리객체는 다양한 메소드 뿐만아니라 관련ㄷ객체들이 존재한다 push등등

https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2F442fde84-f85a-4cdc-87c9-5ae0bedbbc28%2Fimage.png

match

match 객체에는 Route path와 URL의 매칭에 대한 정보를 가지고 있다.

https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2Fbdb01750-fc66-49b2-974c-fdfbdde300b3%2Fimage.png

params 등등,,

  • isExact: true이면 경로가 완전히 정확할 경우에만 수행한다.
  • params: 경로에 전달된 파라미터 값을 가진 객체
  • path: Route에 정의된 경로
  • url: 클라이언트로부터 실제 요청 받은 경로

location

location 객체는 현재 페이지에 대한 정보를 가지고 있다.

https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2Ffac1df7a-570f-4545-ad35-d89c794578f0%2Fimage.png

  • hash: 현재 페이지의 hash 값
  • pathname: 현재 페이지의 경로
  • search: 현재 페이지의 hash 값 ( 이를 사용해서 url의 query string을 가져올 수 있다.)

history

history 객체는 브라우저의 history api에 접근한다.

https://velog.velcdn.com/images%2Fjaewon97%2Fpost%2F202563c6-0c0b-4386-a80e-8b269c378a32%2Fimage.png

  • action: 최근에 수행된 action(push, pop, replace)
  • block(propt): history 스택의 push와 pop 동작을 제어
  • go(n): history 스택의 포인터를 n으로 이동
  • goBack(): 이전 페이지로 이동
  • goForward(): 앞 페이지로 이동
  • length: 전체 history 스택의 길이
  • location: 현재 페이지의 정보
  • push(path, state): 새 경로를 history 스택에 push해서 페이지 이동
  • replace(path, state): 최근 경로를 histroy 스택에서 replace해서 페이지 이동

Params & query

Params => 특정 아이디가 이름을 가시고 조회 할 때 사용.Ex)team/:members -> / 로 사용시작

query => 키워드를 검색하거나 요청할 때 필요한 옵션을 전달하고자 할 때 사용EX)${pathname}?menu=info&setting=user -> ? 물음표로 사용 시작

withRouter

HoC(Higher-order Component)= withRouter

라우트로 사용된 컴포넌트가 아닌데도 match, location, history 객체에 접근가능하게 해줌

import React from 'react';
import { withRouter } from 'react-router-dom';

const WithRouterSample = ({match, location, history}) => {
  return (
    <div>

    </div>);
};

export default withRouter(WithRouterSample);

Switch

switch로 감싸준 이유는 = 이 컴포넌트는 라우트들을 감싸게 되면첫번째 라우트만 보여주고 나머지는 안보여준다여기서 중의할 점은 먼저 비교할 라우트를 위에 적여줘야함

는 브라우저의 현재 URL과 매칭 되는 첫 번째 자식 엘리먼트를 렌더링 하기 위한 컴포넌트

컴포넌트는 현재 URL과 자식 엘리먼트들의 path props 값을 다시 매칭 해서 렌더링 할 엘리먼트를 다시 선택한다.

여러 Route를 감싸서, 그중 일치하는 하나의 라우트만 렌더링 시켜준다

Not Found에 대한 처리를 하기 위해서 주로 쓰인다

링크로 적혀있는 URL은 상관없다

route 동작 원리

  1. 브라우저를 켜서 처음 서버에 적속 하면 컴포넌트에 지역상태가 history.location객체로 초기화 됨
  2. 유저가 브라우저의 특정 액션을 수행함으로써 현재 URL을 바꿈
  3. 그후 URL에 단겨 이동하는 history객체를 이용하여 설정해둔 Router컴포넌트와 path가 부합하는 컴포넌트를 렌더링 시켜준다
profile
WONNY_LOG
이전 포스트

use hook

다음 포스트

Route & Router

0개의 댓글