다른 페이지로 이동하거나 페이지를 로딩할 때마다 보여지는 화면을 서버에서 관리했던 기존에는 과부하와 비효율적인 측면이 있었습니다.
현재는 리액트를 사용해 사용자의 브라우저를 담당하고 새로운 데이터가 필요할 때 서버 API를 호출해 필요한 데이터만 불러와 사용합니다.
우리가 사용하는 웹 또는 앱에서 한 개의 페이지로 이루어진 애플리케이션인 SPA(Single Page Application) 방식을 볼 수 있습니다.
서버에서 제공하는 페이지는 한 종류이지만 사용자 브라우저의 주소 상태에 따라 다양한 화면을 제공합니다.
여기서 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 합니다.
리액트 라이브러리 자체에 내장되어 있지 않기 때문에 클라이언트 사이드에서 이루어지는 라우팅을 리액트 라우팅 라이브러리(ex. react-router)를 사용해 쉽게 구현할 수 있습니다.
리액트 라우터 적용하기
'react-router-dom'에 내장되어 있는 BrowserRouter라는 컴포넌트로 감싸 라우터를 적용할 수 있습니다.
History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있습니다.
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);Route 컴포넌트로 특정 주소에 컴포넌트 연결하기
Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 맞는 보여주고 싶은 컴포넌트를 정의할 수 있습니다.
// example
<Route path="주소(경로)" component={컴포넌트명} />
<Route path="/" component={Home} exact={true} />Link 컴포넌트를 사용하여 다른 주소로 이동하기
Link 컴포넌트는 클릭하면 다른 주소로 이동시켜주는 컴포넌트입니다.
리액트 라우터를 사용할 때는 페이지를 새로 불러와 기존 상태를 리셋시키는 ❌a 태그❌를 직접 사용하면 안됩니다.
Link 컴포넌트를 사용하여 페이지를 전환하면 페이지를 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 페이지의 주소만 변경해줍니다.
Link 컴포넌트 자체는 a 태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있습니다.
// example
<Link to="주소(경로)">내용</Link>
<Link to="/home">홈</Link>URL parameter와 query
유동적인 값을 전달하기 위해 파라미터 또는 쿼리를 사용해 페이지 주소를 정의합니다.
정해진 규칙은 없으나 각각 주로 사용하는 예시는 다음과 같습니다.
- parameter: 특정 아이디나 이름을 사용해 조회할 때
- query: 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때
URL parameter
URL 파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아 오는 match라는 객체 안의 params 값을 참조합니다.
match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어 있습니다.
// User.js
const USER_DATA = {
newbie: {
name: 'younglys',
desc: 'Front-End Developer',
}
};
const UserInfo = ({ match }) => {
const { username } = match.params;
const profile = USER_DATA[username];
return (
<h3>{username}(profile.name)</h3> // newbie(younglys)
<p>{profile.desc}</p> // Front-End Developer
);
};App 컴포넌트에서 페이지를 이동하는 링크와 User 컴포넌트를 위한 라우트를 정의합니다.
'/user/:username' 이라는 path 규칙을 설정하면 match.params.username 값을 통해 username 값을 조회할 수 있습니다.
// App.js
import { Route, Link } from 'react-router-dom';
import User from './User';
const App = () => {
return (
<div>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/user/newbie">younglys profile</Link>
</li>
</ul>
<Route path="/user/:username" component={User} />
</div>
)
};
export default App;URL query
query는 location 객체에 들어 있는 search 값에서 조회할 수 있습니다.
location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 애플리케이션의 현재 주소에 대한 정보를 갖고 있습니다.
location 형태는 아래와 같습니다.
http://localhost:3000/about?detail=true 주소로 들어갔을 때의 값입니다.
{
"pathname": "/about",
"search": "?detail=true",
"hash": ""
}URL query를 읽을 때는 문자열 형태인 search 값을 확인해야 합니다.
문자열에 여러 값을 설정할 수 있는데 search 값에서 특정 값을 읽어오기 위해서는 문자열을 객체 형태로 변환해야 합니다.
query를 사용할 때 주의해야할 점은 쿼리 문자열을 객체로 파싱한 결과값은 항상 문자열(ex. "1", "true")입니다.
리액트 라우터 부가 기능
history
라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나인 객체
history 객체를 활용해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있습니다.
- 특정 버튼을 눌렀을 때 뒤로가기
- 로그인 후 화면 전환하기
- 다른 페이지로 이탈 방지하기
withRouter
라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있는 함수
내보내주는(export) 컴포넌트를 withRouter 함수로 감싸는 방법으로 사용합니다.
Switch
여러 Route를 감싸서 일치하는 하나의 라우트만을 렌더링시키는 컴포넌트
모든 규칙과 일치하지 않을 때 보여줄 'Not Found' 페이지도 구현할 수 있습니다.
NavLink
현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일을 적용할 수 있는 컴포넌트
Link 컴포넌트와 유사하며, 적용하고 싶은 스타일을 객체 형태로 작성해 props로 설정해 사용합니다.
출처: 리액트를 다루는 기술
