react-router-dom
예전방식은 페이지를 요청할때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 되었지만
SPA의 경우 서버에서 제공하는 페이지가 한 개이며
첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는게 아니라
새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만든다.
리액트에서는 이 라우팅 기능이 기본으로 내장되어 있지 않기 때문에,
라우팅 관련 라이브러리인 react-router-dom을 설치해서 구현할 수 있다.
SPA(single page aplication)를 만들 때 페이지 전체가 reload 되지 않고
실제 동적으로 가져오는 데이터는 코딩으로 만들거나
Ajax와 같은 비동기적으로 데이터를 가져와서 코딩으로 동적으로 만들어주는 것이 중요한 요소이다.
리액트는 Single Page Application이다.
리액트와 같은 프레임워크나 라이브러리를 사용하여 View렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자가 변경이 필요한 부분을 요청하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해주고 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와서 어플리케이션에서 사용할 수 있다.
리액트 라우터의 Link태그로 사용하면 변화가 필요한 페이지의 부분을 불러올 때
페이지 전체를 새로고침하지않고 변화가 있는 컴포넌트만 업데이트해서 더 효율적으로 관리 할 수 있다.
SPA의 단점
-앱이 커지면 자바스크립도 파일도 커진다. 페이지 로딩시 실제 필요 하지않을 수도 있는 페이지의 스크립트도 불러오기 때문이다.
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
- BrowserRouter
react-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트에 감싸주는 컴포넌트
- Route 태그
-url에 따른 컴포넌트를 불러오기 위해서 각기 다른 url의 컴포넌트를 감싸준다.
경로를 설정해주기 위해서는 path 속성을 사용
<Route path = "/">사용자가 아무런 path 없이 접속했을경우 맨처음 보여주는 컴포넌트에 사용
그런데, 만약 http://localhost:3000/Home 으로 사용자가 접속시 path에 "/"와 "/Home" 두개가 걸리게 되므로 두개의 컴포넌트가 렌더링된다.
이를 해결하기 위해선 "exact"
<Route exact path="/">를 사용하여 정확하게 path가 일치하는 경우에만 매칭을 시켜주거나
Switch태그로 path 전체를 감싸 path가 일치하는 경로가 발견되면 나머지 컴포넌트는 무시하도록한다. 대신
<Route path = "/">부분을 마지막에 작성해주거나 이부분에만 exact를 추가해준다.
- NavLink 태그
Link태그 대신 사용 할 수 있다. NavLink태그 사용시 경로마다 동일한 클래스가 생성되는데
사용자가 자신이 어떤페이지에 접속해있는지 직관적으로 이해 할 수 있게 네비게이션에 표시 할 수있다.
- HashRouter 태그
Browser Router대신 사용하게 되면 경로뒤에 "#"식별자를 입력하면 브라우저는 서버에 요청을 보내지 않고 현재 페이지에서 식별자에 해당하는 id 속성이 있는 엘리먼트를 찾아서 렌더링해준다.
사용시 모든 경로앞에 "#"이 붙는다 백엔드가 필요없는 작은 클라이언트 사이드를 만들 때 유용하다.
