54 :: SPA, react-router,

엘리스 SW 엔지니어 트랙 54일차

온라인 강의날

 

 

MPA(Multi Page Application)

서버에 미리 여러 페이지 두고 유저가 요청시 적합한 페이지 전달

서버에 라우팅 처리하는 기능 있고, 서버에서 여러 페이지 관리

페이지 요청마다 모든 리소스 받아오니까, 페이지 간 데이터 재활용하기 힘들다

 

 

SPA는 데이터를 재활용하기 편하다는 뜻이겠구나

SPA(Single Page Application)

한 페이지에서 다른 페이지로 안넘어가고 전체 웹앱을 사용

Client side routing 기술 활용해서 페이지 진입시 리로드 없이 라우팅

AJAX 기술 활용, 페이지 이동시 서버에 데이터만 요청하고 자바스크립트로 페이지 만든다

 

여러 페이지를 구성요소로 보고 여러 페이지 스타일 컴포넌트 재활용

자바스크립트만을 활용해서 전체 페이지 만드니까 첫 요청시 빈 페이지 받게 된다

(스타일조차 컴포넌트 방식 styles components로 재활용 가능)

 

SPA 기술적 장점

• CDN: 서버에 페이지 만들 필요 없어서 CDN 캐싱 가능
• 네트워크 요청 감소: 매번 페이지 요청 필요 없기 때문
• 고도의 소프트웨어 설계 패턴 적용 가능: 상태관리, 라우팅, 컴포넌트 재사용, 훅 등

 

SPA 난관

• SEO 불리: 그때 그때 그리니까 MPA보다 SEO 불리하다 
• 메모리 관리, 성능, 데이터 활용 중요: 하나의 자바스크립트 앱이 지속해서
• 속도 느림: 거대한 자바스크립트 앱 받을시 코드 많아져서 로드 속도 느려진다
  이러면 여러 페이지 받는 방식이 빠를 수도
  => code-splitting, tree-shaking, lazy loading 등 속도 도움 줄 수 있다

 

 

SPA와 라우팅

History API, URL Hash 이용 리로드 없는 페이지 전환 구현

history, location 등 HTML5 API 활용

window event(visibilitychange, popstate, beforeunload 등) 활용 페이지 전환 이벤트시 핸들러 등록

라이브러리(react-router, reach-router) 활용 쉽게 사용 가능

 

 

react-router

Declarative routing 선언전 라우팅

JSX, History API 사용해서 라우팅 구현

 

react-router 기능

• 특정 path와 연결, 해당 path로 들어가면 컴포넌트 렌더링
• URL parameter 활용: query, path variable 등
• redirect: 조건 안맞을 때
• 이벤트 핸들러: 페이지 이동시
• nested route

 

react-router 사용

1. <BrowserRouter>로 감싼다
2. Route로 path 정의, 그 안에 렌더링 원하는 컴포넌트 넣는다
3. switch로 매칭되는 라우트 하나 렌더링

 

react-router 사용 예시

Switch 안에서 순서대로 매칭되서

기본 path(/)가 맨 위에 있으면 /contact /about으로 가지 않는다

// react-route 
import { BrowserRouter, Route, Switch } from 'react-router-dom'

export function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/about"><AboutPage /></Route>
        <Route path="/contact"><ContactPage /></Route>
        <Route path="/"><HomePage /></Route>
      </Switch>
    </BrowserRouter>
  )
}

 

 

react-router의 컴포넌트

 

<BrowserRouter> </BrowserRouter>

라우터 기능을 이용하게 해준다

HTML5 History API 사용, UI와 URL 싱크 맞춘다

모든 URL 동작위해 서버 설정 필요

모든 path 앞에 basename 지정 가능

(예시 basename="/ko" )

forceRefresh로 페이지 이동시 리프레시 결정 가능

 

 

<Switch> </Switch>

Route 위에서부터 하나 선택해서 렌더링

매칭 없으면 아무것도 안보여준다

404 추가하면 되겠지

path="/" 는 모든 path에 매칭되서 exact 키워드 추가하거나 가장 아래에 나두자

 

 

<Route> </Route>

path와 컴포넌트 매칭

Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받는다

 

 

<Redirect> </Redirect>

Link와 비슷

렌더링되면 to prop으로 지정한 path 이동

 

 

<Link> </Link> 

to prop으로 URL 받아 클릭시 이동

anchor tag로 감싸진다

 

 

<NavLink> </NavLink>

매칭시 스타일 추가 가능

매칭 됐을 때 강조가 Link 컴포넌트랑 다른듯

 

 

Private Route

조건 불충족시 다른 페이지로 이동시키기

개인 정보 페이지 등

Route를 사용하는 것은 같은데

아예 컴포넌트를 만들어서 사용하면 편한듯

 

Private 페이지 사용 예시

// Private Route

function PrivateRoute({ children: Component, ...props }) {
  const location = useLocation();

  return (
    <Route
      {...props}
      render={(componentProps) => {
        // location.state가 없으면, /login 페이지로 이동합니다.
        const isLoggedIn = !!location.state?.user;

        if (!isLoggedIn) {
          return <Redirect to="/login" />;
        }

        return Component;
      }}
    />
  );
}

 

 

404 페이지

Route path에 아무것도 안주면

설정 가능

 

404 페이지 예시

// 404 page
<Route>
  <NotFoundPage />
</Route>

 

 

 

query string

URL의 query 문자열 정보를 이용하는 것

santa.com?email=abc&ursername=elf

보라 부분이 쿼리 문자열

URLSearchParmas API 이용하면 간단히 조작 가능

 

query string 정보 전달 사용 예시

// ...

  return(
    <Link to="/contact?email=santa@santa.com&address=Seoul">
      Contact
    </Link>
  )

// url에 쿼리 담는 예시
history.push(`/detail?email=${email}&password=${password}`)

 

쿼리 읽을 때 예시

// 파라미터에 전한 정보 읽는 방법
const location = useLocation();
const searchParams = new URLSearchParams(location.search);

const email = searchParams.get("email");
const password = searchParams.get("password");

 

 

 

 

라우터를 사용하는 이유에 대한 생각

리액트는 가지고 있는 사이트를 보여주지 않고, 조건에 따라서 화면을 그려주는 방식으로 하는 것 같다

그래서 SPA에 특화되어 있는 것 같고. (화면을 그리는 것을 렌더링이라고 하자)

 

여러 페이지를 저장하고 있는 MPA 같은 경우는 페이지가 이동함에 따라 URL이 변하지만,

리액트는 렌더링 할 때 URL이 바뀌지 않는다. 그냥 화면 구성만 해주니까

 

그럼 유저들은 당혹스럽다 페이지 URL이 없으니까

이 페이지, 저페이지 구경하고, 즐겨찾기도 해야 되는데 URL이 없다.

이럴 때 구원하기 위해 라우터가 등장한다. 페이지 구분이 필요하다면 라우터를 사용한다

 

가르치다 teact, 가르치는 사람 teacher

길, 보내다 route, 보내는 사람 router

갑자기 영어고 라우터는 사람이 아니지만 아무튼 라우터는 보내는 녀석이다

 

SPA에서는 라우터를 이용해서

개별 페이지로 보내는 것처럼, 도착한 것처럼 구성한다

이렇게 꾸미기 위해

방문 정보를 나타내는 객체(history)에 방문한 것처럼 url을 보내주는 것이고

그 url에 정보(query string)를 붙여서 주고 받고 하는 것이다. 

 

 

오늘 강의는 사정없이 어려워졌다

이런게 있구나 하고 넘어가자