[React] 기초 - React Router, React Twittler SPA

React Router

SPA & Router

• SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예로 Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요.
  

• 라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다." 라는 의미로 라우팅이라 한다.

React Router

: React 자체에는 라우팅 기능이 내장되어 있지 않다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용.

React Router 주요 컴포넌트 3가지

• BrowserRouter : 라우터 역할
  • BrowserRouter는 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할한다.( HTML5의 History API를 사용함 )
  • BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용가능

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

• Switch , Route : 경로를 매칭해주는 역할하는 컴포넌트
  • <Switch> 컴포넌트 : 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할. <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
  • <Route> 컴포넌트: path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

• Link : 경로를 변경하는 역할하는 컴포넌트
  • 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경.
  • ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있다.
    

React Router 에서 <a> 태그가 아닌 <Link>를 사용하는 이유?
: <a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킴. 즉, 새로고침. 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현 가능.

React Router 개발환경 구축하기

1) react app 설치 : npx create-react-app simpleroute
2) react-router 라이브러리 설치(react app 설치폴더에 설치할 것!) : package.json 의 dependencies 에 react-router-dom 이라는 라이브러리가 등록된 것을 확인 가능.
npm install react-router-dom

3) App.js로 react-router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅 :
import{ BrowserRouter, Switch, Route, Link }from "react-router-dom";

• Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용.

4) React Router 사용 환경 세팅

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

//App.js
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; 

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

1. Home 컴포넌트 Route 에만 존재하는 exact 라는 것을 보았습니다, 언제 쓰는 것?
   : React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여준다. exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할.

• exact 속성의 유무에 따른 라우팅 분기

path	location.pathname	exact	matches?
/one	/one/two	O	no
/one	/one/two	X	yes

2. exact 속성을 쓰지 않고도 페이지가 전환되는 것은 왜?
   <Switch> 를 사용하여 exact 역할을 대신 해주는 경우. 하지만 <Switch>는 순서와 위치가 중요. 위에서 아래로 경로를 하나씩 검사하면서 해당 경로에 해당하는 라우트를 실행시키기 때문. 이런 경우, 비교할 라우트를 더 상단에 작성해야 합니다. 하지만 만약 위의 예제처럼 Home을 위에 둔 상태에서 exact없이 활용한다면 중복되는 경로로 인해 다른 라우트로의 이동이 불가능한 것을 확인할 수 있다. 이를 해결하는 방법으로 exact를 사용.

라우터 사용 방법 - React Twittler SPA

• index.js 적을 것
  import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));
• App.js 적을 것
  import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
  • <BrowserRouter><Switch><Route exact path="/">
    : 컴포넌트 바뀌는 위치에 걸어줌
• 버튼 있는 곳(Sidebar.js)에 적을 것
  import { Link } from "react-router-dom";
  • <Link to="/"><i className="far fa-comment-dots"></i></Link>