React / 페이지 라우팅 - React SPA & CSR

PAGE ROUTING

라우팅은 무엇인가?

• 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
  • 카카오톡으로 친구한테 야 뭐해?
  • 친구에게 데이터를 전송하는 과정
  • 데이터는 직통으로 전송되지 않는다. (라인이 완전 일자가 아니다.)
  • 데이터들도 지하철을 타듯이 네트워크 장치들을 거쳐서 이동
  • 네트웍 장치 = 지하철 역
  • ROUTER = 데이터의 경로를 실시간으로 지정해주는 역할을 해주는 무언가
  • 그렇다면 ROUTING 은?
  • 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말

페이지 라우팅이란 무엇인가?

• 인터넷을 통해서 웹사이트에 접속한다는 것은 브라우저를 통해 웹서버에게 경로의 요청을 날리고 웹 문서를 받아보는 과정이다.
• 단순히 어떤 요청에 따라 어떤 페이지를 반환해줄지 결정하는 과정.
• 경로에 알맞는 페이지를 선별해서 웹 서버가 돌려준다, 이 요청에 명시되어 있는 과정에 따라서 알맞은 페이지를 선택하고, 그 페이지를 반환해서 사용자가 페이지에 접속하는 과정 자체 = 페이지 라우팅
• 보통 웹 사이트들은 MPA (multi page application) 사용, 새로고침 하듯이 깜박이면서 다른 페이지를 보여줌

그런데 리액트는

• SPA (single page application) 마이 페이지든 요청 페이지든 똑같은 index.html을 반환하는 것임
• 이럴때 routing을 잘 활용해야한다!!
• 페이지 이동이 아주 빠르고 쾌적하다 새로고침처럼 안되니까..
• 페이지 이동이 리액트에서는 페이지 업데이트가 되는 것임 → 시간 단축
• 페이지 이동할때마다 서버가 기다리는 시간 자체가 없음.
• SPA를 사용한 페이지 이동은 데이터가 없다면 로딩을 잠깐 띄어놓으면 되니까.. 그냥 전체적으로 페이지 이동이 엄청 빠르다.
• 이런 렌더링을 클라이언트들이 직접 렌더링 한다고 해서 CSR (client side rendering) 이라고 부른다!

라우터 사용법

1. 라우터 설치하기

npm install react-router-dom

2. 라우터 임포트 하기

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

사용할 리액트 라우터를 임포트 하기

BrowserRouter as Router: 브라우저에서의 라우팅을 위한 컴포넌트.
Route: 어떤 경로에 어떤 컴포넌트를 렌더링할지 정의한다.
Switch: 여러 Route 중 경로가 일치하는 첫 번째 Route만을 렌더링하게 도와줌.
Link: 페이지를 새로고침하지 않고 경로를 변경.

3. 페이지를 임포트!

import Home from "./Home"

function Home() {
  return <h2>홈 페이지</h2>;
}

function About() {
  return <h2>소개 페이지</h2>;
}

function Users() {
  return <h2>사용자 페이지</h2>;
}

함수로 되어있지만 홈, 소개, 사용자가 각각 페이지 컴포라고 했을때 메인(ex.App.jsx)페이지에 임포트 해줌.

4. 라우트로 설정해주기

function App() {
  return (
    <Router>
      <div>
        {/* 네비게이션 */}
        <nav>
          <ul>
            <li>
              <Link to="/">홈</Link>
            </li>
            <li>
              <Link to="/about">소개</Link>
            </li>
            <li>
              <Link to="/users">사용자</Link>
            </li>
          </ul>
        </nav>

        {/* 라우트 설정 */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

리액트 라우터 에서는 페이지 관련한 여러가지 기능들이 있는데
사용법이 아주 간단하므로 한번 익혀두면 안 까먹고 쓸 수 있다.
다만 아예 처음 사용할때는 컴포넌트 분리하는 구조가 좀 헷갈릴 수 있다.
근데 이것도 개발하는 사람마다의 성향에 따라 조금 차이가 있는 듯 하여, 어떤 교과서적인 방법이 있는 건 아닌듯 하다..
이래서 더 헷갈리나? ㅜㅜ