오늘은 SPA가 무엇인지 이해하고 Router에 대해 학습한 후 과제를 통해 주소에 따라 다른 페이지 뷰를 보여주는 방법을 적용해 본다.
React SPA
학습 목표
- SPA(Single-Page Application) 개념을 이해하고 설명할 수 있음
- SPA의 장, 단점에 대해 이해하고 설명할 수 있음
- 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있음
- MPA(Multiple Page Application): 과거의 전통적인 웹사이트에서 사용자가 페이지를 이동하면, 매번 HTML로 만들어진 "페이지 전체"를 불러오는 방식
- 한계점: 중복되는 요소(Header나 Navigation Bar 등)들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생
- 사용자 경험의 저하: 매번 모든 페이지를 불러옴에 따라 느린 반응성
- SPA(Single Page Application): 한 페이지에서 다른 페이지로 넘어갈 때, 페이지 갱신에 필요한 데이터만 받아와 이 데이터를 JS가 동적으로 HTML 요소를 생성해서 현재 페이지를 업데이트 함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트
- SPA 방식 예시: Youtube, facebook, Gmail, airbnb, Netflix 등
SPA 장점
- 사용자와 상호작용에 빠르게 반응
- 서버 과부하 문제가 줄어듬
- 전체 페이지를 렌더링 할 필요가 없어 더 나은 사용자 경험 제공
SPA 단점
- JS 파일의 크기가 큼(대부분의 코드는 HTML이 아닌 JS 파일안에 들어있음)
→ 첫 화면 로딩 시간이 길어짐 - 검색 엔진 최적화(SEO)가 좋지 않음
→ 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하는데 SPA는 HTML 파일이 비어있어서 검색 엔진이 충분한 자료를 수집 못함
→ 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응 필요
But, SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하는 추세
React Router
SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않음. 따라서 화면에 따라 "주소"도 달라짐.
- Routing(라우팅): 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미
- React에는 이 기능이 없음. 그래서 'React Router'라는 라이브러리를 많이 사용
활용법
- React Router 주요 컴포넌트
- BrowserRouter : 라우터 역할
- Routes, Route: 경로를 매칭
- Link: 경로를 변경하는 역할
- Create React App 프로젝트를 생성 후, React Route 라이브러리를 설치해야 함
- 먼저 React 프로젝트를 생성
npx create-react-app@latest 폴더이름
cd 폴더이름
npm start //실행 결과가 잘 나오는지 확인하는 명령어- 이제 라우터를 사용하기 위한 설치
npm install react-router-dom@^6.3.0
- 이 컴포넌트들을 사용하기 위해서 React Router 라이브러리에서 불러와야 함.
import {BrowserRouter, Routes, Route, Link} from "react-router-dom"과제 React Twittler SPA
학습 목표
- npm 을 이용해 react-router-dom을 설치할 수 있음
- 컴포넌트 단위로 Client-side routing 을 할 수 있음
- react-router-dom 를 활용하여 Twittler SPA를 구현할 수 있음
1.과제 시작 전 fork 하고 터미널에서 git clone 명령어로 레포지토리를 클론 후
2.React Router를 이용하기 위해 react-router-dom을 설치
npm install react-router-dom@^6.3.0
React Twittler SPA의 파일구조는 아래와 같음. 파일구조 잘 봐두기!
오늘 과제는 어제하던 과제를 이어서 하는 거였는데, 왼쪽 사이드바에 있는 아이콘을 누르면 페이지가 이동하도록 만들었다.
//App.js
import React from 'react';
import './App.css';
import './global-style.css';
import {BrowserRouter, Routes, Route, Link } from "react-router-dom";
// TODO - react-router-dom을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러오세요.
import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
// TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요.
const App = () => {
return (
<BrowserRouter>
<div>
{/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
<div className="App">
<main>
<Sidebar />
<section className="features">
{/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
<Routes>
<Route path="/" element={<Tweets />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/about" element={<About />} />
</Routes>
</section>
</main>
</div>
</div>
</BrowserRouter>
);
};//Sidebar.js
import React from 'react';
import {Link} from "react-router-dom"
// TODO - import문을 이용하여 react-router-dom 라이브러리의 Link 컴포넌트를 불러옵니다.
const Sidebar = () => {
return (
<section className="sidebar">
{/* TODO : About 메뉴 아이콘과 Mypage 메뉴 아이콘을 작성하고 Link 컴포넌트를 이용하여 경로(path)를 연결합니다. */}
<Link to="/">
<i className="far fa-comment-dots"></i> {/*Tweets 아이콘*/ }
</Link>
<Link to="/about">
<i className="far fa-question-circle"></i> {/*About 아이콘*/ }
</Link>
<Link to="/mypage">
<i className="far fa-user"></i> {/*MyPage 아이콘 */}
</Link>
</section>
);
};
export default Sidebar;
//Mypage.js
import React from "react";
import { dummyTweets } from "../static/dummyData";
import "./MyPage.css";
// ! 위 코드는 수정하지 않습니다.
import Footer from "../Footer";
// TODO - import문을 이용하여 Footer 컴포넌트를 불러옵니다.
const MyPage = () => {
// TODO - filter 메소드를 이용하여 username이 kimcoding인 요소만 있는 배열을 filteredTweet에 할당합니다.
const filteredTweets = dummyTweets.filter((el) => {
return el.username === 'kimcoding'
})
return (
<section className="myInfo">
<div className="myInfo__container">
<div className="myInfo__wrapper">
<div className="myInfo__profile">
<img src={filteredTweets[0].picture} />
</div>
<div className="myInfo__detail">
<p className="myInfo__detailName">
{filteredTweets[0].username} Profile
</p>
<p>28 팔로워 100 팔로잉</p>
</div>
</div>
</div>
<ul className="tweets__mypage">
{/* TODO : dummyTweets중 kimcoding 이 작성한 트윗 메세지만 있어야 합니다. */}
<li className="tweet" key={filteredTweets[0].id}>
<div className="tweet__profile">
<img/>
</div>
<div className="tweet__content">
<div className="tweet__userInfo">
<span className="tweet__username">{filteredTweets[0].username}</span>
<span className="tweet__createdAt">{filteredTweets[0].createdAt}</span>
</div>
<div className="tweet__message">{filteredTweets[0].content}</div>
</div>
</li>
</ul>
<Footer/>
</section>
);
};
export default MyPage;
배운점
- 위의 코드처럼 다른 JS페이지에 있는 컴포넌트는
import로 불러와야 사용할 수 있다. (많이 쓰이니 기억하기..) - React Router에는 4가지의 컴포넌트가 있는데 각각
< BrowserRouter >, < Routes > , < Route >, < Link > 이다. 이 컴포넌트를 쓰기 위해서는 React Router 라이브러리에서 따로 불러와야 하므로 아래와 같은 코드 사용.
import {BrowserRouter, Routes, Route, Link } from "react-router-dom";
Frontend Developer