React SPA란?
- SPA는 Single Page Application의 약자로 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.
React SPA의 장점
- 전체페이지가 아니라
필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 interaction에 빠르게 반응합니다 - 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에
서버 과부하 문제가 현저하게 줄어듭니다. - 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공합니다.
React SPA단점
- React SPA의 경우
js파일의 크기가 큽니다때문에 이 js 파일을 기다리는 시간으로 인해 첫 화면 로딩시간이 길어집니다. 검색 엔진 최적화가 좋지 않습니다.검색엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 뜻합니다.
wireframe이란?
- Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.
react Router
- 위의 spa에서 각 화면을 가져올때 쓰이는 것으로 화면에 따라 "주소"가 달라지는데, 이때 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로
라우팅(Routing)이라고 합니다.
- 하지만 routing기능은 react에 내장되어 있지 않으므로
React Router라는 라이브러리를 써야한다.
React Router활용
- React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다.
- 라우터 역할을 하는
BrowserRouter, 경로를 매칭해주는Routes 와 Route, 그리고 경로를 변경하는 역할을 하는Link입니다.
React Router사용 환경 세팅
1.react-router라이브러리 설치
npm install react-router-dom@^6.3.0
2.App.js로 react-router 컴포넌트 꺼내오기
import{..} from "react-router-dom"
라우트 준비하기
1. < BrowserRouter >
- 최상위에 존재시킵니다.
- 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다.
function App () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
<li>
MyPage
</li>
<li>
Dashboard
</li>
</ul>
</nav>
</div>
</BrowserRouter>
)
}
export default App;2.Routes, Route
-
경로를 매칭해주는 역할을 하는 컴포넌트입니다.
-
< Routes> 컴포넌트는 여러 < Route> 컴포넌트를 감싸서 그중 경로가 일치하는
단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. < Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다. -
< Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 < Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.
return ( <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="/mypage" element={<MyPage />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </div> </BrowserRouter> ) } export default App;
팁 : 만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있습니다. 이럴 때 사용할 수 있는 속성이 path=”*” 입니다. 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.
3. Link
- 경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.
- 단 < link>는 나중에가면 < a>로 바뀝니다 하지만 처음부터 < a>를 쓰는 경우 화면새로 고침이 일어나기 때문에 < link>를 써야 spa구현이 가능합니다
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
<Link to="/mypage">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function MyPage() {
return <h1>MyPage</h1>;
}
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;
프론트엔드 개발자 안윤경입니다