[리액트 실습] 간단 영화 앱 만들기 5 (React Routing)

 

[리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드)

 

---

 

 

헤더 + 상세페이지가 있는 앱을 만들어볼 예정이다. 

---

1. SPA vs MPA

이번에는 지난번까지 만들었던 간단 영화 앱에서 최신 영화 목차에서 더 나아가 클릭하면 영화의 일부 정보가 뜨는 '상세 페이지'와 페이지 이동까지 만들어 볼 예정이다. 

리액트에서는 페이지 이동을 위해 react-route-dom을 활용한다. 

 

 ** react-route-dom : SPA방식의 애플리케이션에서 여러 페이지를 처리할 수 있는 라이브러리 

** Routing 

- 사용자가 요청한 URL(주소)에 맞는 페이지를 보여줌

 

이 부분에 대해서 말해보기 전, SPA와 MPA에 대해 짚고 넘어가보자 ! 

 

리액트는 SPA(Single Page App) 개발 라이브러리이다. 그렇기에 리액트로 개발된 SPA에서는 사이트 페이지가 새로고침 되지 않고 바뀐 부분만 화면에 렌더링이 된다. SPA에서 이 다중 페이지를 구현할 수 있도록 해주는 라이브러리가 바로 앞서 말했던 react-route-dom이다. 

 

MPA(Multi Page Application) 

- 전통적인 웹 애플리케이션 개발방식

- 전체 페이지 새로고침 ( 유저들에게 좋은 사용자 경험을 줄 수 없음)

- 백엔드와 프론트엔드 결합 ( 2계층 구조 :: 정보가 많으면 관리가 힘들어짐)

- SEO(검색엔진 최적화) 친화적 

 

SPA(Single Page Application)

-동적으로 화면 구성 

- 최초 로딩 시 실행한 HTML파일에서 변경되는 부분만 렌더링 (효율적인 변경 가능)

- 최초에 모든 정적 자원을 가져옴 -> 초기 렌더링 속도느림 

- SEO에 취약함 

 

 

 

---

2. react-router-dom 활용하기 

 

기본 지식을 알았으니 본격적으로 코드 작성을 진행해보겠다 !  

우선 리액트 자체에는 라우팅 기능이 내장되어 있지 않다. 따라서 라이브러리를 먼저 설치해보겠다 ~ 

npm i react-router-dom

 

 

라우트 정의하기 

function App() {
  return (
    <div className="root-wrap">
    <BrowserRouter>
    <Header/>
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/movie" element={<Movies/>}/>
      <Route path ="/movie/:title" element={<MovieDetail />} />
      
      <Route path="/tv" element={<TV/>}/>
      <Route path="/person" element={<Celebrity/>}/>
      <Route path="/*" element={<NotFound/>}/>
    </Routes>
    </BrowserRouter>
    </div>
  );
}

<BrowerRouter>

- react-router-dom의 라우터

-라우팅에 포함시킬 페이지들을 모두 이 <BrowserRouter>컴포넌트로 감싸준다.

 

<Routes>

-여러 <Route>를 감싼 뒤 그 중 규칙이 일치하는 <Route>하나를 렌더링 시켜준다.  

 

<Route>

- 요청받은 pathname에 해당하는 컴포넌트를 렌더링한다. 

- path속성에는 경로, element속성에는 컴포넌트를 넣어준다.

- 여러 경로를 매칭하고 싶을 때에는 URL뒤에 *을 붙여준다. 

예시 : 

<Route path="/*" element={<NotFound/>}/>

 

 

페이지 이동하기 

<Link> 컴포넌트 사용

- 웹 내에서 다른 라우트로 이동 할 때에는 일반적으로 사용하는 <a> 태그를 사용할 수 없다. (새로고침 불가) 

    - a : 외부 웹으로 이동

    - Link : 웹 내에서 페이지 전환 

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

<Link to ="경로"> 링크 명 </Link>

- 클릭 시 바로 이동하는 로직을 구현할 때 유리하다. 

- DOM에서 a태그로 변환이 된다. 

 

useNavigate Hook사용

- useNavigate Hookdmf 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 

- 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우에 유리하다. 

 

예시 : 

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

export default function NotFound() {
    const navigate = useNavigate();

    const onClickButton = () => {
        navigate('/');
    }
    
  return (
    <div className='page-container'>
        <div 
            onClick={onClickButton}
            style={{
            fontSize :"32px",
            lineWeight:1.6,
            color:'red',
            cursor:'pointer'
        }}
        >메인페이지로 이동</div>
    
    
    </div>
  )
}

 

---

기본적인 React-route-dom 라이브러리에 대한 것은 이해를 할 수 있다. 

다음 포스팅에서는 직접 코드를 통해 SPA를 구현해보겠다.