오늘은 리액트의 꽃 SPA와 만드는데 도움되는 Router 라이브러리를 공부하고 어제 만들었던 Twittler에 적용해보는 연습을 할 것이다!

SPA

• SPA(Single-Page Application) 개념을 이해하고 설명
• SPA의 장, 단점에 대해 이해하고 설명
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 결정

• MPA : 과거의 전통적인 페이지들은 매번 HTML로 만들어진 '페이지 전체'를 불러왔음
  • 한계점이 명확 : 중복되는 요소(Header나 Navigation Bar 등)를 매번 불러오는 것이 서버와의 불필요한 트래픽 유발
  • 반응성 저하 : 사용자들은 매번 불러와 불필요한 트래픽을 체감, EX적인 면모에서 떨어졌음
• SPA : MPA의 단점을 보완하기 위해 90년대부터 개발되어져 왔음
  • 페이지 갱신, 업데이트에 필요한 데이터들만 서버에서 전달받아 JS가 동적으로 HTML 요소를 생성해 렌더링하는 방식
  • 빠른 반응성 - EX 향상, 서버 과부하 강하
  • 단점 : JS로 구현하기에 파일 자체 크기가 큼 - 첫화면 로딩 시간 증가, 검색 엔진 최적화(SEO) 하향 - 검색어 노출 기술 부족(<meta>없음)

만들기

• 전에 했던 와이어프레임, 목업을 잘 짜야 SPA의 질이 달라짐
• 우리가 배운 컴포넌트 기반 개발(리액트)로 만들거기에 일단 먼저 어떤 기능-컴포넌트를 만들고 조합할지 기획하기(예시 : 유튜브)
  • Header엔 Search와 Setting 들어가기 : Header는 항상 상단에 떠있는 컴포넌트를 조합하고, 한번만 만들어서 모든 페이지에 사용 가능케 하기
  • 이제 헤더 아래에 ContentList를 만들건데 Content라는 영상이 뜰 것 : ContentList는 담는 그릇이니 한번만, Content는 내용이 달라져도 기능과 레이아웃은 동일하니 재사용 가능케
  • 전체를 짰다면 이제 자세한 것도 보기 : Content의 기능과 레이아웃 설정(날짜, 제목, 썸네일, 아바타 등)
  • 클릭해 영상을 보고있음에도 옆에 재생목록으로 Content가 뜬다! 즉! 위치만 달라질뿐 기능과 레이아웃은 같음!

결론 : 재사용하는 컴포넌트, 한번만 사용되는 컴포넌트 등을 구별해 사용하자! 다시 말해 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계하자!

---

React Router

• React에서 npm으로 React Router를 설치(npm install react-router-dom(@6.3.0))하고 이용
• React Router를 이용하여 SPA를 구현
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용

SPA에선 페이지를 바꿀 때 페이지 자체가 바뀌어지지 않고 각 구역마다 다른 컴포넌트 다른 기능을 보여준다고 배웠다. 그렇다면 '바뀌어지는 단서'가 있어야 JS가 맞춰서 HTML 요소를 생성할 것이다. 여기서 그 '단서'를 리액트는 '주소'로 판단한다.

• 라우팅(Routing) : '다른 주소'에 따라 '다른 뷰'를 보여주는 과정, "경로에 따라 변경한다."라는 의미
  • Route : 어떤 이동수단이나 물품 등이 이동하는 경로를 뜻함
  • 리액트에는 이 기능이 없음, 그래서! 리액트 라우터라는 라이브러리를 따로 사용함

사용법

• 리액트 라우터의 주요 컴포넌트
  • Router : 라우터 역할을 하는 BrowserRouter
  • Route Machers : 경로를 매칭해주는 Routes 와 Route
  • Route Changer :그리고 경로를 변경하는 역할을 하는 Link
• 사용하기 위해 패키지 설치
  • npm i react-router-dom(@^버전)
• 이 컴포넌트들을 사용하기 위해서 불러옴
  • import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

예시

import React from "react";
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 (
    <div>
      <nav>
        <ul>
          <li>Home</li>
          <li>MyPage</li>
          <li>Dashboard</li>
        </ul>
      </nav>
    </div>
  );
}

export default App;

1. 주소 설정 : <BrowserRouter>

• 라우터 태그를 변경하려는 곳에 감싸주기(App, index 2가지 선택)
  1. Home 페이지의 주소 "/"
  2. MyPage 페이지의 주소 "/mypage"
  3. Dashboard 페이지의 주소 "/dashboard"
• 참고: HTML의 History API를 통해 새로고침하지 않고도 주소 변경 가능!

// 2가지 선택 가능
// App.js
function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>Home</li>
            <li>MyPage</li>
            <li>Dashboard</li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  );
}
// index.js 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
); 

2. 경로 매칭 : <Routes>, <Route>

• Routes : Route를 감싸 일치하는 단 하나의 라우터만을 매칭시켜주게 만듬, 안쓰면 모든 요소가 렌더링;;
• Route : Path 속성을 지정해 해당 Path에 어떤 컴포넌트를 보여줄지 지정, Link 컴포넌트와 동일해야 실행 가능

<BrowserRouter>
  <div>
    <nav>
      <ul>
        <li>Home</li>
        <li>MyPage</li>
        <li>Dashboard</li>
      </ul>
    </nav>
    {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결 */}
    {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 함 */}
    <Routes>
      {/* 경로는 path로 컴포넌트는 element로 연결 */}
      {/* <Route path="*" element={<Home />} /> */}
      <Route path="/" element={<Home />} />
      <Route path="/mypage" element={<MyPage />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </div>
</BrowserRouter>

팁: 사용자가 지정한 주소 이외의 주소(“/’, “/mypage”, “/dashboard”)로 접근한다면 의도된 화면이 안보일 때가 있다! 가장 메인이 되는 컴포넌트 같은 곳에 path=”*”를 한다면 이 속성이 설정돼 있는 컴포넌트를 보여주게 된다!

3. 경로 연결 : <Link>

• 앱을 그대로 유지하며 HTML History API를 통해 주소가 변경되게 연결
• 렌더링 되면 Link가 <a> 요소로 바뀜
  • <a>는 기본적으로 전체를 새로고침하지만 <Link>는 페이지 전환을 방지하는 기능이 내장돼있어 SPA에 더 적합!
• <Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결

<ul>
  <li>
    {/* Link 컴포넌트를 이용하여 경로를 연결 */}
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/mypage">MyPage</Link>
  </li>
  <li>
    <Link to="/dashboard">Dashboard</Link>
  </li>
</ul>

---

Twittler SPA 과제

• npm 을 이용해 react-router-dom을 설치
• 컴포넌트 단위로 Client-side routing 가능
• react-router-dom 를 활용하여 Twittler SPA를 구현

어제 만들었던 과제에 라우터를 넣은 SPA를 만들어보자!
깃에서 포크 해오고~ 클론하고~ 패키지 깔고~ 라우터도 깔고~ 컴포넌트 불러오자!

├── /Twittler React SPA
│   ├── README.md
│   ├── /public               # create-react-app이 만들어낸 파일
│   └── /src                  # React 컴포넌트
│        ├── static           # dummyData
│        │    └── dummyData.js
│        ├── Pages            # 페이지를 표시하는 컴포넌트가 들어가는 폴더
│        │    ├── About.css
│        │    ├── About.js
│        │    ├── MyPage.css
│        │    ├── MyPage.js
│        │    ├── Tweets.css
│        │    └── Tweets.js   # 저번에 했던 트윗 내용이랑 같음
│        ├── App.css
│        ├── App.js
│        ├── Footer.js
│        ├── index.js
│        └── Sidebar.js
├  package.json
└ .gitignore

알게된 것

1. 페이지 마다 js, css 파일 만들어놔서 조합하는 형식?!
   • 전 과제에서는 App.js 한 파일에서 각 컴포넌트를 조합했다면 이제 나타낼 페이지마다, 각 컴포넌트마다 나눠 css도 같이 나눠준 모습!
2. 마이페이지 filter 후
3. 추가의 라우터의 라이브러리
   • useNavigator : 특정 행동을 하면 어떤 결과를 보여주는 라이브러리 - 특히 로그인 했는지 안했는지 상태(state)를 지정할 때 유용
   • NavLink : Link 대신 NavLink를 사용해 포커스되면 확대되고 그런 느낌으로 사용해 더 나은 EX를 제공할 수 있음
4. 미리 예습
   • State : 상태가 변한다. - 가변적임! 다크모드를 예시로 들어 스위치로 변할 수 있다는
   • Props : 불변, 하지만 class처럼 따로 정의해 재사용 가능한?