React SPA

moono·2023년 1월 25일

목록 보기

2/12

SPA(Single Page Apllication)

전통적인 웹사이트는 페이지 이동 시페이지 전체 를 로딩 해야 했는데(깜빡이는 현상)
⇒ SPA 는 페이지 전환 시 중복되는 부분은 새로 불러오지 않습니다.

사용자와 서비스 사이의 상호작용이 많아지면서
중복 요소들을 매번 볼러오는건 서버와의 불필요한 트래픽을 발생 + 사용자 경험 저하

HTML 문저 전체가 아닌 업데이트가 필요한 데이터만 서버에서 전달받아
JS가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발
⇒ 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에 해당 부분만 업데이트 하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

장점

필요한 부분의 데이터만 받아 화면 업데이트 하기 때문에 사용자와의 인터랙션에 빠르게 반응
서버에서 요청 받은 데이터만 넘기기 때문에 서버 과부하 문제 감소
전체 페이지 렌더링 필요 없어 더 나은 유저경험 제공
⇒ 대표적인 서비스 : Youtube, facebook, Gmail, airbnb, Netflix 등

단점

JavaScript 파일의 크기가 큼
⇒ 때문에 JS 파일 기다리는 시간으로 첫 화면 로딩 시간이 길어짐
검색 엔진 최적화(SEO)가 좋지 못함
⇒ 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 구동되는데 SPA는 HTML에 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함
브라우저의 앞으로가기, 뒤로가기 등의 상태 관리도 해야 하기 때문에 개발 복잡도가 늘어남

와이어프레임

페이지를 먼저 만들기보다 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상하고 계획
애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계 필요
⇒ React Router와 함께 컴포넌트 활용 가능

React Router

하나의 화면을 구성할 때 다른 페이지의 화면들이 필요할 수 있고, 그 화면에 따라 주소가 달라지는데
⇒ 다른 주소에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경한다 의미로 라우팅(Routing) 이라고 한다.
(예: xx.com/ xx.com/mypage xx.com/notification)

React SPA 에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용

React Router 주요 컴포넌트

router	route matchers	route changers
`<Brower Router>`	`<Routes>` `<Route>`	`<Link>`

라우터 역할 : <Brower Router>
⇒ <BrowserRouter> 컴포넌트는 페이지를 새로고침하지 않고 주소를 변경할 수 있게 해주며, 상위에 작성되어야 React Router의 컴포넌트들을 사용할 수 있다.
경로 매칭해주는 역할 : <Routes> <Route>
- <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할,
  ⇒ 만약 <Routes> 를 사용하지 않으면 매칭되는 모든 요소 렌더링
- <Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
경로 변경하는 역할 : <Link>
⇒ 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 API를 이용해 페이지의 주소만 변경
⇒ <a> 같은 역할인데 <Link> 를 쓰는 이유는 <a> 는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시키는 새로고침 현상이 발생, 하지만 <Link> 는 페이지 전환 방지하는 기능이 내장되어 있어 SPA를 구현 가능

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 하고
import { BowserRouter, Routes, Route, Link} from "react-router-dom"; 이 명령어를 통해 사용할 수 있다.

실습해보기

개발 환경 준비하기

npx create-react-app 원하는 폴더명 입력
cd 입력한 폴더명 입력
npm start

// Create React App 프로젝트 잘 생성되었으면 React Router 설치

npm install react-router-dom@^6.3.0

잘 설치 되었으면 package.json 파일의 dependencies 항목에 react-router-dom 라이브러리 생성 완료
⇒ App.js 파일로 가서 최상단에 import 명령어 추가

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

라우트 준비하기

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

주소에 따라 페이지뷰 다르게 만들기(+ 메뉴만들기)

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
              {/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
             <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        
       {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
        <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

{/* 위에 작성한 라우트를 붙여준다 */}

export default App;

⇒ Tip : 만약 사용자가 지정된 주소인 /, /mypage, /dashboard 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있는데,
이럴 때 사용할 수 있는 속성이 path=”*”
지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 된다.