React - Router

Router

• MPA(Multiple Page Application)
  • 기존 웹페이지 작동 원리
  • Server Side Rendering
  • 사용자가 다른 페이지로 이동할 때(<a> 태그 사용) 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스 전달 받아 해석한 뒤 화면에 출력
  • 사용자에게 보이는 화면을 서버에서 준비하여 전달
  • 웹 출력 내용이 많은 경우 새로운 하면을 보여줄 때 마다 서버 측에서 모든 뷰를 준비
    • 성능 문제 발생
      • 사용하고 있는 상태 유지하는 작업이 번거로움
      • 변경되지 않은 부분까지 새로 불러와야 하므로 불필요한 로딩이 있어 비효율적
      • 캐싱과 압축 기능으로 최적화는 가능.
      • 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케이션에서는 부적합
• SPA(Single Page Application)
  • Client Side Rendering
  • 리액트 등과 같은 라이브러리 또는 프레임워크에서 뷰 렌더링을 사용자의 웹 브라우저가 담당하도록 하고 먼저 애플리케이션을 브라우저에서 불러와 실행
  • 사용자와의 인터렉션이 발생할 경우 필요한 부분만 자바스크립트를 사용하여 업데이트 함
  • 새로운 데이터가 필요한 경우 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용
  • SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저 주소 상태에 따라 다양한 화면 출력
  • 단점
    • 웹의 규모가 커지면 자바스크립트 파일도 너무 커진다는 문제
      • 코드 스플리팅 사용하면 라우트별로 파일들을 나누어 트래픽과 로딩 속도 개선 가능
    • 크롤링 문제
      • 브라우저에서 자바스크립트를 사용하여 라우팅을 관리하는 경우 자바스크립트를 실행하지 않는 일반 크롤러에서 페이지 정보를 제대로 수집하지 못 함
      • 자바스크립트 부분만 있고 컨텐츠가 페이지에 보이지 않음
      • 검색 엔진(구글, 네이버, 다음 등..)에 따라 검색 결과에 페이지가 잘 나타나지 않을 수 있다.
    • 보안 문제
      • Server Side Rendering인 경우 사용자에 대한 정보를 서버측에서 세션으로 관리하지만, Client Side Rendering인 경우 클라이언트 측 쿠키 외에는 사용자에 대한 정보를 저장할 공간이 마땅하지 않다.
• 라우팅(Routing)
  • 다른 URL 주소에 따라 다른 화면을 보여 주는 것 (페이지 이동)
  • 이전 : 새 페이지로 이동 (상태 정보 잃음)
  • SPA : 현재 페이지로 삽입 해서 보여 줌 (상태 정보 유지)
  • 리액트 라이브러리 자체에 라우팅 기능이 내장되어 있지 않고 라우터 라이브러리 설치해서 쉽게 구현 가능
  • react-router-dom 라이브러리 설치 필요 (현재 V6)
    • V6로 바뀐지 오래되지 않았지만 공식버전으로 채택
• 라우팅 기능 추가

1. react-router-dom 라이브러리 설치

2. index.js

   • import { BrowserRouter } from ‘react-router-dom’

        <BrowserRouter> 
        <App /> 
        </BrowserRouter>

3. Route 컴포넌트로 특정 주소에 연결

    import { Link, Routes, Route } from ‘react-router-dom’
    <Routes>
    <Route path=’/’ element={ <Home />} />
    <Route path=’/about’ element={<About />} />
    </Routes>

4. 라우터 설치

   • 설치할 프로젝트 경로에서 npm install react-router-dom

• Link 컴포넌트를 사용하여 다른 주소로 이동
  • 리액트 라우터를 사용할 때는 <a> 태그 사용하지 않음
    • 완전 새로운 페이지로 이동할 때는 사용
    • <a> 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 갖고 있던 상태들이 모두 없어짐
  • <Link> 태그 사용
  • 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 페이지의 주소만 변경
  • 페이지 전환 기능이 내장되어 있음
  • <Link to=’주소’>홈 화면 보기</Link>

라우트로 사용 컴포넌트 페이지 index.js, App.js, Home.js, About.js, Content.js

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

import { Link, Routes, Route } from 'react-router-dom';
import About from './components/About';
import Home from './components/Home';
import Content from './components/Content';

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">홈 화면 보기</Link>
        </li>
        <li>
          <Link to="/about">About 화면 보기</Link>
        </li>
        <li>
          <Link to="/Content">전체 도서 정보 출력</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/content" element={<Content />} />
      </Routes>
    </div>
  );
}

export default App;

function Home() {
    return (
      <div className="App">
        <h1>홈 입니다</h1>
        <h3>방문을 환영합니다</h3>
      </div>
    );
  }

  export default Home;

function About() {
    return (
      <div className="App">
          <h1>브라우저 설명</h1>
      </div>
    );
  }

  export default About;

unction Content() {
    return (
        <div>
            <hr />
            <h2>책 정보</h2>
            <table border='1'>
                <tr><th>제목</th><th>저자</th><th>평점</th></tr>
                <th>출간일</th><th>장르</th>
                <tr><td>개미</td>
                <td>베르나르 베르베르</td><td>5.0점</td>
                <td>1991년</td><td>소설</td></tr>
                <tr><td>데미안</td>
                <td>헤르만 헤세</td><td>4.8점</td>
                <td>1919년</td><td>소설</td></tr>
            </table>
        </div>
    )
}
export default Content;

URL 파라미터 사용하기 : path를 통해 파라미터 전달 - App.js, Book.js

import { Link, Routes, Route } from 'react-router-dom';
import About from './components/About';
import Home from './components/Home';
import Content from './components/Content';
import Book from './components/Book';

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">홈 화면 보기</Link>
        </li>
        <li>
          <Link to="/Book/ant">개미</Link>
        </li>
        <li>
          <Link to="/Book/demian">데미안</Link>
        </li>
        <li>
          <Link to="/Book/threeKingdoms">삼국지</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/book/:keyword" element={<Book />} />
      </Routes>
    </div>
  );
}

export default App;

import { useParams } from "react-router-dom";

const data = {
    ant : {
        title : '개미',
        director : '베르나르 베르베르',
        score : '5.0',
        date : '1991년',
        genre : '소설'
    },
    demian : {
        title : '데미안',
        director : '헤르만 헤세',
        score : '4.8점',
        date : '1919년',
        genre : '소설'
    }
}

function Book() {
    const params = useParams();
    const book = data[params.keyword];

    if(!book) {
        return <div><hr /><div>책 정보가 없습니다.</div></div>;
    }
    return (
        <div>
            <hr />
            <h3> 
                {params.keyword} : {book.title} 
            </h3>
            <p> 저자 : {book.director} </p>
            <p> 평점 : {book.score} </p>
            <p> 출간일 : {book.date} </p>
            <p> 장르 : {book.genre} </p>
        </div>
    )
}
export default Book;