운영진 스터디 5주차-2

SSO·2022년 2월 27일

LikeLion10th

목록 보기

6/16

URL vs URI

URL : Uniform Resource Lacator, 웹 주소. 자원이 실제로 존재하는 위치
URI : Uniform Resource Identifier, 자원의 위치 + 자원을 식별할 수 있는 고유한 문자열 시퀀스 ⇒ URL의 의미를 포함한다!

예시

Ex1) `[http://likelion.co.kr/main](http://likelion.co.kr/main)`

👆 위와 같은 예시는 `[likelion.co.kr](http://likelion.co.kr)` 에서 `main` 이라는 **경로**를 나타내고 있다.

서버에서는 해당 경로에 대한 알맞은 자원을 전송해줄 것이고 이는 자원의 실제 위치를 나타내므로 **URL**이다!

Ex2) `[http://likelion.co.kr/user/1004](http://likelion.co.kr/user/1004)` 

👆 두 번째 예시에서는 `[likelion.co.kr](http://likelion.co.kr)` 에서 1004의 ID 값을 가지고 있는 자원을 **식별**하고 있다. 따라서 `[http://likelion.co.kr/user/](http://likelion.co.kr/user/1004)`까지는 자원의 실제 위치이므로 **URI임과 동시에 URL**이다. 맨 끝의 `/1004` 는 식별자이므로 `[http://likelion.co.kr/user/1004](http://likelion.co.kr/user/1004)` 이는 **URL을 포함한 URl**이다 !

Router

MPA
Multi Page Application, 여러 개의 페이지로 이루어진 애플리케이션
사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 받아 화면에 보여줌
But, 웹에서 보여줄 페이지가 매우 많은데 이런 식으로 서버에서 많은 페이지를 준비하고 보여주면 성능 상의 문제가 생길 수 있다!
ex) 불필요한 로딩, 인터페이스 사용 상태 유지 어려움 등등
```
     
```
SPA

Single Page Application, 한 개의 페이지로 이루어진 애플리케이션
뷰 렌더링을 사용자의 브라우저가 담당
우선 애플리케이션을 실행시켜 브라우저에 불러오고 사용자의 인터랙션이 발생하면 필요한 부분만 업데이트

그럼 화면이 한 종류인가?
- 그건 x
- 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다!
  - 여기서 주소 상태에 따라 다른 화면을 보여주는 것이 바로 라우팅!!
  - 리액트 라이브러리 자체에는 이 기능이 내장되어 있지 않고 브라우저의 API를 직접 사용해 관리하거나, 라이브러리를 사용해서 관리
```
      ⇒ 라우팅 라이브러리 : react-router / reach-router / next.js 등등
      
          우리가 사용해볼 건 react-router
      
```

설치 및 적용

설치

yarn add react-router-dom

적용

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
**import { BrowserRouter } from "react-router-dom";**

ReactDOM.render(
  <React.StrictMode>
    **<BrowserRouter>**
      <App />
    **</BrowserRouter>**
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

사용 방법

간단한 예시를 통해 알아봅시다:)

src/components/Home.js
```
  import React from 'react';
  
  function Home(){
    return (
      <div>
        <h1>홈</h1>
        <p>여기는 홈</p>
      </div>
    );
  };
  
  export default Home;
```
src/components/About.js
```
  import React from 'react';
  
  function About(){
    return (
      <div>
        <h1>소개</h1>
      </div>
    );
  };
  
  export default About;
```
src/App.js
```
  import React from "react";
  **import { Route } from 'react-router-dom';**
  import Home from './components/Home';
  import About from './components/About';
  
  function App() {
    return (
      <div>
        **<Route path="/" exact={true} component={Home} />
        <Route path="/about" component={About} />**
      </div>
    );
  };
  
  export default App;
```
<Route path="이동할 주소" component={출력할 컴포넌트} />

👆 이렇게 위와 같이 사용하면 된다!

위의 코드를 실행해보면 / 주소에서는 Home 컴포넌트와 About 컴포넌트가 함께 보이게 된다. 왜냐하면 About 컴포넌트가 보여질 path인 /about에도 /이 포함되어 있기 때문이다.

혹시 라우터가 적용이 안된다면!

: 라우터 5버전 기준으로 작성되어 있기 때문에 설치된 라우터가 6버전 이상이면 적용이 안될 수 있음

⇒ **yarn add react-router-dom@5** 를 통해 버전을 5버전으로 낮춰주면 해결될 거에요:)

이를 해결하려면 !
Home 컴포넌트를 렌더링 하는 부분을 보면 **exact={true}** 가 있는데 이는 정확히 해당 path에서만 해당 라우팅이 이루어지도록 하라는 명령이다!

Link

: 클릭하면 다른 주소로 이동시켜 주는 컴포넌트
html의 a태그를 생각하면 된다. 하지만 이 태그를 사용하면 기존의 렌더링된 컴포넌트와 애플리케이션이 들고 있던 상태를 모두 날려버리고 처음부터 새로 렌더링된다.
대신 이 Link 컴포넌트를 사용하면 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 페이지의 주소만 변경해준다.

Link 사용 방법

<Link to="이동할 주소">내용</Link>

이렇게 사용하면 되고 위에서 다뤘던 예제에 적용해보면

src/App.js

         import React from "react";
         import { Route, **Link** } from 'react-router-dom';
         import Home from './components/Home';
         import About from './components/About';
         
         function App() {
           return (
             <div>
               <ul>
                 **<li><Link to="/">홈</Link></li>
                 <li><Link to="/about">소개</Link></li>**
               </ul>
               <Route path="/" exact={true} component={Home} />
               <Route path="/about" component={About} />
             </div>
           );
         };
         
         export default App;

이렇게 클릭하면 넘어가는 링크를 Link컴포넌트를 사용해 추가해보면

이런 결과를 확인할 수 있다.

여러 개의 path 설정하기

사용 방법<Route path={['/about', '/hi']} component={About} /> 이런 식으로 path의 props를 배열로 설정해 주면 된다! 이러면 about과 hi 모두 똑같은 About 컴포넌트가 렌더링되는 것을 확인할 수 있다.

Router의 props

Router는 Route와 연결된 컴포넌트의 props로 match, location, history 객체를 기본적으로 전달.

match

: Route path와 URL의 매칭에 대한 정보를 가진 객체

isExact : true이면 경로가 완전할 경우에만 수행 (Home 컴포넌트는 true로 명시했으니까!)
params : 경로에 전달된 파라미터 값을 가진 객체
path : Route에 정의된 경로
url : 사용자로부터 요청 받은 경로

location

: 현재 페이지에 대한 정보

hash : 현재 페이지의 hash 값
pathname : 현재 페이지의 경로
search : 현재 페이지의 hash 값

history

: history api에 접근하는 객체로 컴포넌트 내에 구현하는 메서드에서 라우터에 직접 접근이 가능
Ex) 뒤로 가기, 화면 전환, 다른 페이지로의 이탈 방지 등등

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

src/components/Home.js

    import React from "react";
    
    function Home({ history }) {
      return (
        <div>
          <h1>홈</h1>
          <p>여기는 홈</p>
          <button onClick={() => history.push('/about')}>about으로 이동</button>
        </div>
      );
    }
    
    export default Home;