리액트 라우터(React Router) 라이브러리 설치방법과 사용방법
리액트 라우터(React Router)란?
리액트 라우터(React Router)는 싱글 페이지 애플리케이션(SPA)에서 페이지 간의 라우팅을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이는 사용자가 애플리케이션 내에서 다른 페이지로 이동할 때 새로운 페이지를 로드하지 않고, 필요한 컴포넌트만을 렌더링하여 빠른 사용자 경험을 제공합니다.
리액트 라우터 기본 설치 및 설정
리액트 라우터를 사용하기 위해서는 먼저 패키지를 설치해야 합니다. 터미널에서 아래의 명령어를 실행합니다:
1 |
npm install react-router-dom |
설치가 완료되면, 애플리케이션의 최상위 컴포넌트를
태그로 감싸줍니다. 이는 리액트 라우터가 애플리케이션의 라우팅을 관리할 수 있도록 해줍니다.
라우팅 구성
라우팅을 설정하기 위해서는Route 컴포넌트를 사용합니다. 각 Route는 한 페이지에 대응되며, path속성으로 어떤 URL에서 해당 컴포넌트를 렌더링할지 정의합니다.
예를 들어, 홈페이지와 정보 페이지에 대한 라우팅을 설정하는 코드는 다음과 같습니다:
1 2 3 4 5 6 7 8 9 10 11 |
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route path="/" exact component={HomePage} /> <Route path="/info" component={InfoPage} /> </Switch> </Router> ); } |
링크 생성
페이지 간의 이동은 Link 컴포넌트를 사용하여 구현할 수 있습니다. Link 컴포넌트는 HTML의 a 태그와 유사하지만, 페이지를 새로고침하지 않고 라우팅을 처리합니다.
예를 들어, 홈페이지로 이동하는 링크는 다음과 같이 생성할 수 있습니다:
1 2 3 4 5 6 7 8 9 |
import { Link } from 'react-router-dom'; function Navbar() { return ( <nav> <Link to="/">Home</Link> <Link to="/info">Info</Link> </nav> ); } |
동적 라우팅
리액트 라우터는 URL 파라미터를 사용한 동적 라우팅도 지원합니다. 이를 통해 사용자가 입력한 URL에 따라 다른 컴포넌트를 렌더링하거나, 같은 컴포넌트에 다른 데이터를 전달할 수 있습니다.
예를 들어, 사용자 ID에 따라 다른 프로필 페이지를 보여주는 라우팅은 다음과 같이 설정할 수 있습니다:
1 |
<Route path="/profile/:userId" component={ProfilePage} /> |
URL 파라미터와 쿼리 스트링
웹 애플리케이션에서 URL 파라미터와 쿼리 스트링은 사용자 또는 클라이언트가 서버에 정보를 전달하는 데 사용되는 중요한 메커니즘입니다. 리액트 라우터에서도 이들을 활용하여 다양한 기능을 구현할 수 있습니다.
URL 파라미터란?
URL 파라미터는 경로의 일부로서, 주로 특정 리소스나 아이템을 식별하는 데 사용됩니다. 예를 들어, /users/:userId
경로에서 :userId
는 URL 파라미터입니다. 이를 통해 각 사용자의 고유한 프로필 페이지를 렌더링할 수 있습니다.
쿼리 스트링이란?
쿼리 스트링은 URL의 끝에 ?
뒤에 오는 키-값 쌍의 집합입니다. 주로 검색, 필터링, 페이지네이션 등의 기능을 구현할 때 사용됩니다. 예를 들어, /search?query=react
에서 query=react
는 쿼리 스트링입니다.
리액트 라우터에서 URL 파라미터 사용하기
리액트 라우터에서 URL 파라미터를 사용하는 방법은 간단합니다. Route
컴포넌트에서 파라미터를 정의하고, 해당 컴포넌트에서 match.params
를 통해 접근할 수 있습니다.
예시 코드:
1 2 3 4 5 6 |
import { useParams } from 'react-router-dom'; function UserProfile() { let { userId } = useParams(); return <div>User ID: {userId}</div>; } |
리액트 라우터에서 쿼리 스트링 사용하기
쿼리 스트링을 사용하기 위해서는 URL에서 쿼리 스트링을 파싱해야 합니다. 리액트 라우터 자체에는 쿼리 스트링을 파싱하는 기능이 내장되어 있지 않기 때문에, query-string
라이브러리 같은 외부 도구를 사용할 수 있습니다.
예시 코드:
1 2 3 4 5 6 |
import queryString from 'query-string'; function SearchPage({ location }) { const query = queryString.parse(location.search); return <div>Search Query: {query.search}</div>; } |
URL 파라미터와 쿼리 스트링은 리액트 라우터에서 강력한 도구입니다. 이들을 활용하면 동적 라우팅, 데이터 검색 및 필터링 등 다양한 기능을 구현할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.
마무리
리액트 라우터를 사용하면 싱글 페이지 애플리케이션의 페이지 간 이동을 효율적으로 관리할 수 있습니다. 이를 통해 사용자에게 더욱 빠르고 부드러운 경험을 제공할 수 있으며, 개발자는 페이지 간의 라우팅을 쉽게 구성할 수 있습니다. 여러분들께 도움이 되었으면 좋겠습니다. 감사합니다.