[TIL] React - React Router

오늘은 어제에 이어 React로 트위터 클론을 만들었다. react-router-dom을 설치하여 좌측 사이드바 아이콘을 누를때 마다 url주소가 바뀌고 해당하는 컴포넌트가 feature div 안에 보여지도록 하였다. 최소 기능 요구사항을 모두 만족시키고 Advanced Challenge까지 하고도 한두 시간 정도 남아 CSS로 다크모드로 꾸며 보았다. 색상 팔레트는 One Dark Pro 테마에서 따왔다. 스크롤바도 기본 스크롤은 다크 테마에서 너무 튀어서 여기를 참고해서 커스텀으로 꾸몄다.

추가 과제 중에 history 객체를 사용해서 뒤로가기 버튼을 만드는 것이 있었는데 나와 내 페어는 useHistory hook으로 구현했는데 스프린트 오피스 아워에서는 withRouter() 고차 컴포넌트를 사용하였다. 주말에 history 객체와 사용법에 대해 좀 더 찾아보고 정리해야 겠다.

Today I Learned

SPA (Single Page Application)

• 이전에는 페이지 하나당 HTML 파일이 따로 존재했고, 페이지를 이동하면 그에 맞는 HTML 파일로 화면을 새로 그렸다 (page reload). 서버에 새로 데이터를 요청할때마다 페이지 전체가 새로 그려지기 때문에 페이지 전환 사이에 잠깐의 깜빡임이 존재한다.
• 웹 사이트가 발전하면서 서버에서 많은 데이터를 요청해야 했고 그때마다 화면 전체를 새로 그리는 것은 비효율적이기 때문에 HTML 문서 전체가 아닌 바뀔 부분에 필요한 데이터만 받아 JS가 동적으로 HTML 요소를 생성하여 그리는 SPA가 등장하게 되었다.
• SPA는 변화하는 부분만 새로 그려지며 나머지 부분은 그대로 있기때문에 페이지 깜빡임이 존재하지 않는다.

React Router

• 라우팅(Router)이란 URL 주소에 따라 다른 뷰를 보여주는 것을 말한다. React 자체에서 제공하지 않기 때문에 서드파티 라이브러리가 필요한데, 가장 유명한 것이 react-router이다.
• react-router에는 Web용 react-router-dom과 React Native용 react-router-native가 있다.
• 설치 : npm install react-router-dom

라우팅이 없다면...

• 컴포넌트가 바뀌더라도 주소창의 URL은 고정되어 있다.
• 웹사이트 내의 특정 페이지 URL로 즐겨찾기 등록을 하거나 다른사람이 해당 페이지로 찾아올 수 있도록 URL 공유를 할 수 없다.
• 새로고침을 하면 보고 있던 컴포넌트가 아닌 웹사이트로 처음 들어갔을 때 렌더링 되었던 컴포넌트로 이동하게 된다.
• 뒤로가기를 하면 웹사이트내에서 이전에 봤던 컴포넌트로 이동하는 것이 아니라 그 전에 열었던 다른 웹사이트로 이동하게 된다.

기본 구조

import React from "react";
// 필요한 컴포넌트 BrowserRouter, Switch, Route, Link를 react-router-dom에서 import하기
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
// URL주소에 따라 <main> 안에 보여줄 Home, About, Contact, PageNotFound 컴포넌트 import하기
import Home form "./Pages/Home";
import About form "./Pages/About";
import Contact form "./Pages/Contact";
import PageNotFound form "./Pages/PageNotFound";

const App = () => {
  return (
    {/* BrowserRouter: 라우팅 컴포넌트들의 최상단에 위치해야 하는 컴포넌트 */}
  	<BrowserRouter>
   	  <header>
        <nav>
       	  <ul>
            {/* Link: 페이지 리로드 없이 해당 패스로 내비게이션을 수행하는 컴포넌트 (<a>태크를 사용하면 페이지 리로드 발생) */}
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
      </header>
      <main>
        {/* Switch: 현재 주소창의 URL과 일치하는 path를 가진 첫번째 Route를 렌더링하는 컴포넌트 */}
      	<Switch>
          {/* Route: path값이 현재 주소창의 URL과 일치할 때 감싸고 있는 컴포넌트를 렌더링하는 컴포넌트 */}
          <Route exact path="/" component={Home} />
		  <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route component={PageNotFound} />
        </Switch>
      </main>
    </BrowserRouter>
  );
}

export default App;