어제는 React의 개념과 문법, 적용법 등을 학습했다.
오늘은 React를 이용해 SPA를 구축하는법을 알아보자.
SPA(Single Page Application)
페이지 전체를 로딩하는 전통적인 웹사이트가 있고,
중복되는 요소들은 새로 불러오지 않는 SPA가 있다.
HTML 문서 전체를 불러오는게 아니라
업데이트에 필요한 데이터만 받아 화면에 보여주는 방식으로,
필요한 정보만 로딩하기때문에 서버의 과부하가 걸리지 않고,
사용자의 행동에 빠르게 반응하며
보다 나은 UI를 제공하는 장점이 있다.
하지만, 대부분의 코드가 JavaScript 파일에 들어있기때문에
JavaScript 파일이 무거워지고,
이 파일을 기다리는 시간으로 인해 첫 페이지 로딩시간이 길다.
또한, HTML 파일에 별다른 자료가 없기 때문에
HTML 파일에 있는 자료를 분석하는 방식으로 구동되는
검색엔진 구축이 힘들다.
(하지만 검색엔진에 대응할 수 있도록 발전하고있어서 점점
단점이 보완되고있는 상태이다.)
Router
Routing
-> 다른 주소에 따라 다른 뷰를 보여준다.
(경로에 따라 변경한다는 의미로 라우팅이라고 부른다.)
React Router를 사용하기 위해선 npm에서 install이 필요하다.
터미널에서 npm install react-router-dom 을 입력해
react router dom을 인스톨한다.
(npm install시 스펠링에 주의한다. 자칫 멀웨어가 install될 수도 있다)
react router dom이 잘 설치됐는지 확인하려면
package.json에서 dependencies 부분을 살펴보자.
React Route의 주요 컴포넌트
1. 라우터 역할을 하는 BrowserRouter
2. 경로를 매칭해주는 Switch와 Router
3. 경로를 변경하는 역할을 하는 Link
이 컴포넌트를 사용하기 위해서는
import {BrowserRouter, Switch, Route, Link} from "react-route-dom
을 입력해줘야한다.
우선, 사용하고자 하는 곳에 <BrowserRouter> 컴포넌트를 씌우고,
그 안에 <Switch> 컴포넌트, 그리고 그 안에 <Route> 컴포넌트를 넣은 뒤
컴포넌트를 불러온다.
<Switch>
-> 여러<Route>컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의
Router만 렌더링을 시켜주는 역할을 한다.
얘를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
<Route>
-> 'path' 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지
정한다.<Link>컴포넌트가 정해주는 URL 경로와 일치할 때만 작동한다.
<Route path="주소"></Route>
첫번째 Route에서는 path앞에 exact를 넣어주자.
<Route path="/">Home</Route>
<Route path="/mypage">Mypage</Route>
<Route path="/about">About</Route>
위처럼 첫 Route의 path 주소는 '/'인데, exact를 적지 않으면
Mypage와 About의 주소에도 '/'가 들어있기때문에
모든 path 주소는 Home만을 가르킨다.
exact를 적어주면 그 주소와 완전히 일치하는 주소만을 불러온다.
<Link>
-> 경로를 연결해주는 역할을 하는 컴포넌트이다.
HTML에서 페이지를 새로 불러오는<a>태그와는 다르게
페이지 전환을 방지하는 전환이 있어서 SPA를 구현할 수 있다.
HTML에서는
<a href="주소">내용</a>으로 링크를 만들어주지만,
React에서는
<Link to="주소">내용</Link>로 작성한다.
(to로 주소를 가르킨다.)
Router flow
만약 아이콘을 링크로 만들고싶다?
const App () => {
return (
<BrowserRouter> // Router의 가장 바깥으로 들어오는 녀석
<div>
<Switch> // Route를 Switch로 감싸준다
<Route path="/mypage"> // Route 안에 불러올 컴포넌트를 넣어준다
<MyPage /> // 불러올 컴포넌트
</Route>
</Switch>
</div>
</BrowserRouter>
const Icons () => {
return (
<div>
<Link to="/mypage"><i className="far fa-user"></i></Link>
</div>
아주 간단히 코드로 나타내봤다.
React Router Dom으로 App 컴포넌트에
링크로 불러오고 싶은 컴포넌트를 설정한다.
(Route path="Link와 같은 주소")
링크로 만들고 싶은 (여기서는 아이콘을 링크로 만들고싶음)
녀석에 <Link> 컴포넌트를 씌운다.
(Link to="Route와 같은 주소")
