S2 Unit 5. React SPA

💡 이번에 배운 내용

• Section2.
  서버와 통신이 가능한 구조적인 Web App을 만들 수 있다.
• Unit5. React SPA : React SPA와 React Router에 대해 학습한다.

느낀점

이번에는 React-router 라이브러리를 이용해 직접 페이지를 만들어보며 학습했다. 정말 재미있었다. 깜빡임없이 페이지가 바로바로 전환되다니 이제까지 만들었던 나의 웹페이지들이 주마등처럼 지나갔다. 이 재미가 떨어지지 않도록, 뒤에 좀 더 어려운 개념이 나와도 잘 버틸 수 있도록, 지금부터라도 개념 공부를 잘 다져야겠다!

키워드

SPA, react-router-dom, BrowserRouter, Routes, Route, Link

학습내용

Ch1. React SPA

SPA(Single Page Application)란

SPA는 하나의 페이지로 구성된 웹 어플리케이션으로, 사용자에게는 다른 페이지로 이동하는 것 같아도 실제로는 필요한 부분만을 새로 렌더링하는 방식으로 동작한다.
기존 웹사이트(MPA. Multiple Page Application)가 다른 페이지로 이동할 때 매번 새로운 페이지를 불러왔다면 SPA는 페이지 전환시 기존 페이지와 중복(헤더, 푸터, 내비게이션 등)되는 부분은 새로 불러오지 않는다.

SPA 장점

SPA는 페이지 전체를 업데이트하지 않고 필요한 부분만 새로 업데이트 하므로 사용자의 액션에 빠르게 반응할 수 있다.
그리고 기존 웹 페이지를 전환할 때 화면 전체가 바뀌거나, 잠깐 빈 화면이 보여 깜빡거리는 것처럼 보이게 되었다면 SPA는 그렇지 않다. 때문에 더 나은 사용자 경험을 제공한다.
그리고 서버에서는 업데이트 되는 부분에서 필요한 데이터만 요청받게 된다.
현재는 대부분 메이저 웹 사이트, 웹 어플리케이션들이 SPA 방식으로 제작되었다.

SPA 단점

기존 웹페이지와 다르게 대부분 HTML보다 JS로 이뤄져 있기 때문에 첫 화면의 로딩 시간이 길다.
그리고 검색 엔진 최적화가 좋지 않다.

• 검색엔진 최적화: 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성
• 검색 엔진은 다음처럼 동작한다.
  • 검색 봇이 웹 페이지에 있는 정보를 수집,분석(URL, HTML 내 태그, 링크)
  • 검색결과에 인덱스를 만들어 보관
  • 사용자가 검색어를 입력
  • 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 찾아 순서대로 노출

검색 봇이 자료를 수집하는 과정에서 SPA는 HTML이 비어있어 자료를 수집하기 적합하지 않다. 따라서 검색 노출이 중요한 웹 앱은 검색 엔진 최적화에 따로 대응하고, 앱 내의 브라우저 앞/뒤로 가기 등의 상태도 관리해야 한다.
그러나, SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있다.

SPA Wireframe

Wireframe은 선(wire)를 이용해 틀(frame)을 잡는 다는 의미로, 디자인 전 디자인 컨셉, 사이트 기능 등을 나타낸 것을 뜻한다. 목업(mockup)은 실제 모습을 쉽게 이해할 수 있게 디자인을 간단히 구현, 데모를 의미한다.
이 와이어프레임을 분석하여 SPA의 구성을 설계한다.
React는 컴포넌트 기반이므로 SPA를 만들기 위해서는 먼저 UI의 구성요소인 컴포넌트에 대해 구상해야 한다.
화면의 각 요소를 파악하여 root부터 시작해 자식 컴포넌트로 어떤 컴포넌트로 나눌 것인지, 어떻게 조합할 것인지 wireframe을 통해 설계해야 한다.
예를 들어, 전체 페이지는 헤더, 메인, 사이드 네비게이터 영역, 푸터로 나누고 헤더는 로고, 검색으로 나눈다. 그리고 각 요소는 컴포넌트가 되는 것이다.
그리고 리스트처럼 반복이 되는 요소들은 하나의 컴포넌트를 만들어 반복하는 것으로 설계한다.
그렇게 설계한 컴포넌트는 각 컴포넌트의 상태, 컴포넌트끼리의 상호작용 등도 생각해야 한다.

Ch2. React Router

웹 페이지는 화면에 따라 보이는 페이지, 주소가 다르다.
SPA여도 다른 주소에 따라 다른 페이지(뷰)를 보여주는 과정을 라우팅(Routing)이라고 한다. 라우팅은 경로에 따라 변경함을 의미한다.
React 자체에는 이 기능이 내장되어 있지 않아 직접 주소마다 다른 뷰를 보여야 하지만, React Router라는 라이브러리를 사용하면 가능하다.
이 리액트 라우터에는 주요 컴포넌트가 있다.

React Router의 주요 컴포넌트

create-react-app으로 React 프로젝트를 만들었다면 npm 명령어를 사용해
React Router 라이브러리를 설치할 수 있다.

npm install react-router-dom

라이브러리를 설치했으면 import구문을 사용해 React Router의 컴포넌트를 불러올 수 있다. import는 필요한 모듈을 불러오는 역할을 한다.

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

이 react router의 주요 컴포넌트는 다음과 같다.

• BrowserRouter : 라우터 역할을 한다.
• Routes, Route : 경로를 매칭한다.
• Link : 경로를 변경한다.

페이지 뷰 전환 구현하기

위 처럼 라이브러리를 설치하고 필요한 컴포넌트를 import했으면,
React router의 컴포넌트를 사용해 페이지 뷰 전환을 구현할 수 있다.

1) 기본 컴포넌트 작성
페이지 전환 버튼이 될 컴포넌트, 전환되어 나타날 페이지 컴포넌트가 필요하다.

//App 전체
funcion App(){
  return(
    <div className="wrapper">
      <h1>React Route 실습 페이지</h1>
	  <Navigation/>
      <section className="main">
        <Home/>
        <Menu1/>
        <Menu2/>
      </section>
    </div>
  );
}

//Menu 버튼영역
function Navigation(){
  <nav>
    <ul className="menu">
      <li>HOME</li>
      <li>Menu1</li>
      <li>Menu2</li>
    </ul>
  </nav>
}

//Menu에 맞는 각 페이지 
function Home(){
  return (
    <div class="page_wrapper">
      <p>Hello world!</p>
    </div>
  );
}
function Menu1(){
  return (
    <div class="page_wrapper">
      <h2>Menu1</h2>
      <p>Menu1 페이지입니다.</p>      
    </div>
  );
}
function Menu2(){
  return (
    <div class="page_wrapper">
      <h2>Menu2</h2>
      <p>Menu2 페이지입니다.</p>
    </div>
  );
}

2) BrowserRouter 작성
BrowserRouter는 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
<BrowserRouter> 가 동작할 수 있게 (App.js나 index.js에서) 상위태그로 작성한다.

3) Routes, Route 작성
Route는 path로 경로를 지정하고 element 속성으로 컴포넌트를 지정하여 해당 경로에 해당 컴포넌트를 연결해준다. Routes가 없으면 매칭되는 모든 컴포넌트를 렌더링한다.
Routes는 Route를 감싸서 그 중 경로가 일치하는 라우터만 렌더링되도록 한다.

아래는 2)의 BrowserRouter, 3)의 Routes, Route를 적용한 결과이다.

//App 전체
funcion App(){
  return(
    <BrowserRouter>
      <div className="wrapper">
        <h1>React Route 실습 페이지</h1>
        <Navigation/>
        <section className="main">
          <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/menu1" element={<menu1/>} />
            <Route path="/menu2" element={<menu2/>} />
          </Routes>
        </section>
      </div>
    <BrowserRouter/>
  );
}

4) Link 작성
anchor 요소처럼 경로를 연결해 주는 역할을 하며, 페이지 주소가 바뀌며 페이지를 새로 불러오지 않고 전환된다.
브라우저에 렌더링되었을 때 개발자도구의 elements탭에서 확인하면 a요소로 바뀐것을 확인할 수 있다.
Link 컴포넌트 안의 to 속성에는 Route에 시정했던 path의 속성값을 넣어준다.
아래를 보면 Link 컴포넌트를 적용했다.

//Menu 버튼영역
function Navigation(){
  <nav>
    <ul className="menu">
      <li>
        <Link to="/">HOME</Link>
      </li>
      <li>
        <Link to="/menu1">Menu1</Link>
      </li>
      <li>
      	<Link to="/menu2">Menu2</Link>
      </li>
    </ul>
  </nav>
}

추가학습

1. useNavigate
브라우저의 히스토리를 이용하여 경로에 따라 이동을 가능하게 한다.
이 컴포넌트를 사용하면 뒤로가기, 앞으로 가기, 홈으로 가기, 특정 페이지로 가기 등의 이동이 가능하다.
아래와 같이 import하며

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

아래와 같이 컴포넌트를 작성한다.

const App = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate(-1)}>뒤로가기</button>
      <button onClick={() => navigate(1)}>앞으로가기</button>
      <button onClick={() => navigate("/")}>홈으로가기</button>
    </div>
  );
}      

2. React Router 공식 문서
6.4.1 버전

🔗 React Router