SPA와 React Router

전통적인 방식의 웹 애플리케이션 단점

• 서버가 화면을 그리기 위해 필요한 html을 만들어서 내려주는 역할까지 하여 서버의 부담이 커짐
• 때문에 속도가 느려짐
• 정보양이 많아져 빠르게 계산하여 내려주기 위한 추가적인 캐싱 작업
• 페이지 이동 시, 새로운 html을 서버에서 내려 받기 때문에 깜빡임 발생
  
  

SPA란?

SPA(Single-page application)
하나의 html 파일을 사용하며 서버로부터 새로운 페이지를 불러오지 않는다.

첫 페이지 요청 시에만 서버에서 html을 내려주고
이후의 라우팅은 url을 이동하더라도 새로운 HTML을 서버에서 받지말고 Client Side에서 그리는 방식(CSR, Client Side Rendering)으로 랜더링한다.

React는 UI 라이브러리이기 때문에 라우팅 라이브러리(react-router)를 사용해야 한다.

라우팅 : url에 따라 알맞는 콘텐츠(UI)를 전달해주는 기능

React Router

• react-router : Web & App
• react-router-dom : Web 개발을 위한 라우터 처리
• react-router-native : App 개발을 위한 라우터 처리

설치

# with npm
npm install react-router-dom

# with yarn
yarn add react-router-dom

Routes 구성

BrowserRouter

• 가장 최상위에서 다른 태그들을 감싸야함
• 웹 브라우저에서 react router를 실행시키기 위해 필요한 인터페이스
• 브라우저 주소에 보여지는 현재 위치를 저장하고 브라우저의 history stack을 사용하여 탐색

Routes & Route

• 현재 위치를 기준으로 React Router에서 무언가를 렌더링하는 주요 방법
• 위치가 변경될 때마다 <Routes>는 모든 하위 요소인 <Route> 요소를 찾아 UI의 분기를 렌더링
• <Route> 요소는 중첩된 UI를 나타내며 중첩된 URL 경로에도 해당됨
  
  

1. import BrowserRouter, Routes, Route 추가

   import { BrowserRouter, Routes, Route } from 'react-router-dom';

2. BrowserRouter → Routes → Route 순으로 감싸기

   function App() {
    return (
    	<BrowserRouter>
      	<Routes>
            <Route></Route>
        </Routes>
      </BrowserRouter>
    );
   }
   export default App;

3. <Route>에 path(경로), element(컴포넌트)를 지정

   function App() {
    return (
    	<BrowserRouter>
      	<Routes>
            <Route path={'/'} element={<MainPage />} />
            <Route path={'tech'} element={<TechPage />} />
            <Route path={'blog'} element={<BlogPage />} />
        </Routes>
      </BrowserRouter>
    );
   }
   export default App;

   
   

React Router 기능

Link 추가

<a>와 <Link> : <a>는 기본적으로 페이지를 이동시키며 새로운 페이지를 불러와 깜빡임이 발생한다. SPA의 장점이 감소되므로 새로운 html을 받아오지 않는 <Link>를 쓰는게 적합하다.

1. 하위 컴포넌트에 import Link 추가

   import { Link } from 'react-router-dom';

2. <Link></Link> 태그 작성

   function MainPage() {
    return (
    	<div>
          <h1>MainPage</h1>
          <Link></Link>
      </div>
    );
   }
   export default MainPage;

3. 상위 컴포넌트에서 지정한 path에 맞게 <Link>의 to(경로) 작성

   function MainPage() {
    return (
    	<div>
          <h1>MainPage</h1>
          <Link to="/blog">Blog</Link> | <Link to="/tech">Tech</Link>
      </div>
    );
   }
   export default MainPage;

   
   

중첩(Nested) 라우팅

중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트를 동시에 렌더링 하는 것이다.

Outlet

• 컨텐츠 이외의 UI는 아무 영향없이 컨텐츠 영역만 교체
• 중첩 라우터는 URL이 분리되어 원하는 탭의 상태를 URL 로 구분하여 직접 접근이 가능
  
  

1. 상위 컴포넌트에 <Route> 추가

   function App() {
    return (
    	<BrowserRouter>
      	<Routes>
            <Route path={'/'} element={<MainPage />} />
            <Route path={'tech'} element={<TechPage />}>
              /* 이 부분 */
              <Route path='javascript' element={<JavascriptPage />} />
            </Route>
            <Route path={'blog'} element={<BlogPage />} />
        </Routes>
      </BrowserRouter>
    );
   }
   export default App;

2. 하위 컴포넌트(추가한 라우팅이 있는)에 import Outlet 추가

   import { Outlet } from 'react-router-dom';

3. <Outlet /> 태그 작성

   function TechPage() {
    return (
        <>
            <div>
                <h1>TechPage</h1>
                <Link to="/tech/javascript">Javascript</Link>
                <Link to="/tech/react">React</Link>
            </div>
            <Outlet />
        </>
    );
   }
   export default TechPage;

   
   

useParams()

useParams()는 클릭하는 <Link>의 to 속성 값을 파라미터로 받는다.
리액트에서 라우터 사용 시 <Link>의 to 속성 값를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다.

1. import useParams 추가

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

2. useParams 정보를 변수에 저장

   const params = useParams();

3. <Link>의 to 속성 값이 들어있는 파라미터 사용

   function ReactDocPage() {
   	const params = useParams();
   	return (
   		<div>
   			ReactDocPage ##{ params }
   		</div>
   	);
   }
   
   export default ReactDocPage;

++
추가로 Components 반복 시 <Route> path의 값에 콜론(:)+변수명으로 지정하면,

export default function App() {
  return (
  	<BrowserRouter>
    	<Routes>
          <Route path={'/'} element={<MainPage />} />
          <Route path={'tech'} element={<TechPage />}>
            /* 이 부분 */
            <Route path=':docTitle' element={<ReactDocPage />} />
          </Route>
          <Route path={'blog'} element={<BlogPage />} />
      </Routes>
    </BrowserRouter>
  );
}

클릭하는 <Link>의 to 속성 값을 받아와 콜론(:)+변수명에 들어가 특정 url을 만들 수 있다.

export default function ReactPage() {
	const docs = [
		{ id: 1, title: 'React 1'},
		{ id: 2, title: 'React 2'},
		{ id: 3, title: 'React 3'}
	];
	return (
		<div>
			{ docs.map((doc) =>
				/* 이 부분 */
				<Link to={`${doc.title}`} key={doc.id}>{doc.title}</Link>
			) }
		</div>
	);
}

useNavigate()

내가 원하는 이동 경로로 페이지 이동 할 수 있으며 Route 컴포넌트 내에서만 사용 가능하다.

1. import useParams 추가

   import { useNavigate } from 'react-router-dom';

2. useNavigate 정보를 변수에 저장

   const navigate = useNavigate();

3. navigate('/이동 경로')

   function ReactDocPage() {
   	const navigate = useNavigate();
   	return (
          <>
              <h5 onClick={() => navigate('/')}>logo</h5>
              <div>ReactDocPage</div>
          </>
   	);
   }
   
   export default ReactDocPage;

---

References

• https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
• https://reactrouter.com/docs/en/v6