[React] SPA / React Router 라이브러리

young·2022년 6월 3일
0

5/25~6/22 Section 2 TIL

목록 보기
13/27
post-thumbnail

오늘은 좀 더 눈에 보이는 React SPA 실습을 진행했다.
JS DOM을 사용할 때 보다 훨씬 간결하고 편리하게(?) 사용할 수 있는 것 같다!

Before learn...

  • 웹 애플리케이션이란?
    : 동적인 기능을 가진 웹
    웹 브라우저 환경에서 사용할 수 있는 응용 소프트웨어

  • 라우팅이란?
    : 다른 주소에 따라 다른 뷰를 보여주는 것
    : 경로에 따른 뷰 변경



✅ TIL

  • React SPA
  • React Router


💡 SPA (Single-Page Application)


SPA의 등장 이전

Multiple-page Application에서는 페이지 이동을 할 때마다 HTML 파일로 된 페이지 전체를 불러와야 했다. (=깜빡인다)

웹 사이트가 점점 복잡해지고 애플리케이션 형태를 가지게 됨에 따라 사용자와 서비스 간의 상호작용이 많아졌고
중복된 요소들을 매번 불러오는 것은 서버와의 불필요한 트래픽 증가와 사용자 경험의 저하를 야기했다.

SPA의 장단점

  • 페이지 이동을 할 때, 페이지 갱신에 필요한 데이터만 서버에서 받아와서 페이지 업데이트를 한다.
    서버로부터 완전히 새로운 페이지를 불러오지 않아서 사용자의 interaction에 빠르게 반응한다.
    따라서 서버 과부하 문제가 현저히 낮아지고 더 나은 사용자 경험을 제공한다.

  • HTML 파일은 비어있다 싶이 하고 JS 파일에 대부분의 정보가 들어있다.
    따라서 첫 화면 로딩 시간이 길고 검색 엔진 최적화가 좋지 않으나 개선되는 중이다.


컴포넌트 구성하기

와이어프레임을 바탕으로, 각 컴포넌트들이 독립적인 기능을 수행하면서도 웹 앤 안의 데이터를 유기적으로 주고받을 수 있게 설계해야 한다❗️




💡 React Router


: React SPA 라우팅(다른 주소에 따라 다른 뷰를 보여주는 것)을 위한 라이브러리
npm install react-router-dom // @^6.3.0

터미널에서 npm install 후에 해당 js 파일에서 import 해주어야 한다.

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


React Router 주요 컴포넌트

  • Router

    라우터 역할을 한다.
    <BrowserRouter> : 최상위 요소여야 한다.
  • Route matchers

    경로를 매칭해준다.
    <Routes>
    <Route> : Routes의 하위요소여야 page 주소가 render 가능하다.
  • Route changers

    경로를 변경하는 역할을 한다.
    <Link> : 함수가 아니기 때문에 조건을 걸 수 없다
    <useNavigate> : 함수기 때문에 조건문을 작성하여 조건에 따라 페이지 이동을 구현할 때 쓸 수 있다. 주로 변수에 할당하여 사용한다.

Router 적용하기

import {BrowserRouter, Routes, Route, Link} from 'react_router_dom';

const App = () {
  return (
    <div>
      <BrowserRouter>
        ...
        <Routes>
          <Route page='/' element={<페이지를 구현한 다른 JS파일을 import한 변수/>}/>
          <Route page='/...' element={<페이지를 구현한 다른 JS파일을 import한 변수/>}/>
        </Routes>
        <div>
          <Link to="/">home</link>
        </div>
         ...
      </BrowserRouter>
   	</div>
  );   
};

export default App;

<useNavigate> 사용하기
BrowserRouter 내부에 작성해야 동작하니 주의할 것!

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

const Myapp = {
  const navigate = useNavigate(); //변수 정의

  return (
  ...
    <button onClick={() => navigate(-1)}>뒤로가기</button>
  ...
  )
}

export default Myapp;

create-react-app과 react-router-dom을 이용해서 뭐라도 만들어봐야겠다 ㅎ.ㅎ

profile
즐겁게 공부하고 꾸준히 기록하는 나의 프론트엔드 공부일지

0개의 댓글