CH1. React SPA (single page apllication)
📌 SPA (single page apllication)
- 예전에는 웹사이트 내의 다른 페이지를 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러옴 (이 때문에 페이지 이동시 화면에 깜박임이 발생).
- 웹페이지는 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달받아서 렌더링함. 하지만 규모가 커질수록 사용자와 상호작용이 많아지고 그에따라 속도 저하 등의 문제가 발생. 이를 해결하기 위해
SPA를 사용.
🔸 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 자바스크립트가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발됨.
🔸 2000년대 중반부터 SPA가 등장하였고, SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹애플리케이션이나 웹사이트를 말함. (Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음).
SPA 장점
🔸 필요한 데이터만 받아서 화면을 업데이트하기 때문에 사용자와의 interaction에 빠르게 반응함.
🔸 서버에서 요청받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어듬.
🔸 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험(UX) 을 제공함.
SPA 단점
🔸 브라우저는 첫 화면 로딩 시에 HTML파일을 읽어들인 후 그 안의 script 요소 안에 있는 자바스크립트 파일을 다시 받아오는 과정을 거침.
🔸 이때 첫 화면 로딩 시 읽어들인 HTML파일은 거의 비어있고, 대부분 코드는 자바스크립트 파일 안에 들어있다 보니 자바스크립트 파일이 무거워지게 되고 이로 인해 자바스크립트 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어짐.
🔸 검색 엔진 최적화(search engine optimization, SEO)가 좋지 않음.
🔸 검색 엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것으로, 작동 방식은 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결괏값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹페이지들을 순서대로 보여주는 방식으로 작동함.
🔸 구글이나 네이버 같은 검색 엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색기능을 구동함. SPA의 경우 HTML파일에는 별다른 자료가없으므로 검색엔진이 적절히 동작하지 않음.
🔸 SPA를 사용하는 대표적인 예시로 Youtube, facebook, Gmail, airbnb, Netflix 등이 있음.
CH2. React Router
SPA & Routing
🔸 라우팅(Routing) : 경로를 변경하는 것. React 자체에는 이 기능이 내장되어 있지 않음. 이를 위해 React Router라는 라이브러리를 가장 많이 사용함.
React Router 활용
🔸 React Router의 주요 컴포넌트는 크게 3가지로, 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link
🔸 npm install react-router-dom : react-router 라이브러리 설치
🔸 이 컴포넌트들을 사용하기 위해 React Router 라이브러리에서 따로 불러와야 함.
import { BrouserRouter, Routes, Route, Link} from "react-router-dom";<BrouserRouter>
🔸 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해주는 컴포넌트.
🔸 최상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있음.
<Routes> & <Route>
🔸 경로를 매칭해 주는 역할을 하는 컴포넌트.
🔸 <Routes> : 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할. <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링.
🔸 <Route> : path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정함. <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동. path 속성을 이용하여 경로를 작성하고, element 속성으로 연결하고자 하는 컴포넌트를 넣어줌.
🔸 path=”*” : 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됨. (지정된 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않음. 이러한 상황에서 사용.)
<Link>
🔸 경로를 연결해 주는 역할을 하는 컴포넌트.
🔸 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해줌.
🔸 ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀜.
💡
<a>요소가 아닌<Link>를 사용하는 이유
<a>요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시켜 새로고침 현상이 일어남.- 하지만
<Link>컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있음.
🔸 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
<div>
...
<Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
<Link to="/mypage">MyPage</Link>
<Link to="/dashboard">Dashboard</Link>
...
</div>
</BrowserRouter>
</div>
);
}
function Home() {
return <h1>Home</h1>;
}
function MyPage() {
return <h1>MyPage</h1>;
}
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;📌 useNavigate()
Link vs useNavigate()
🔸 Link : 클릭시 페이지를 바로 이동. 상품을 클릭하면 해당 상품에 대한 디테일 페이지로 이동
🔸 useNavigate : 조건을 만족했을 때 페이지를 전환하도록 함. 회원가입이 완료되면 메인페이지로 이동
사용법
// 📍 1. react-router-dom으로부터 useNavigate를 import
import { useNavigate } from 'react-router-dom';
// 📍 2. useNavigate 호출
const navigate = useNavigate();
// 📍 3. navigate('이동할페이지') 작성
navigate('/home')fontawesome
(정리중..)
