Route 기초 (동물 상세 페이지 만들기)
리엑트 라우터에 대해서 알아보자
위에 화면은 간단하게 만든 동물 상세 페이지 만들기 웹이다.
구현한 기능은 다음과 같다.
1. 메인 페이지에서 동물 목록 화면에 표시하기
2. 동물 상세 정보 페이지 만들기
리엑트 라우터란?
React-Router-Dom
React Router DOM은 React 애플리케이션에서 라우팅을 관리하는 라이브러리이다. 라우팅이란 사용자가 URL을 변경하면 해당하는 화면을 보여주는 것을 의미한다.
React-Router 사용하는 이유
a태그를 사용해도 무방한데 굳이 라우터를 정의하고 사용하냐...
React 애플리케이션은 일반적으로 싱글 페이지 애플리케이션(SPA)으로 개발된다. 이 경우 React-Router를 사용하면 페이지가 전환될 때 서버에 새로운 페이지를 요청하지 않고도 브라우저에서 페이지를 동적으로 렌더링할 수 있다. a태그를 사용하면 페이지 전체가 새로 로딩되고 화면 깜빡임이 필수적으로 발생해 이는 사용자 경험을 떨어뜨린다. 따라서 React-Router를 사용함으로써 부드러운 화면전환을 구현할 수 있다.
우선 리엑트 라우터를 사용하려면
npm install react-router-dom
라는 명령어를 통해 리엑트 라우터 돔을 설치해야 한다.
설치가 끝났다면
ReactDOM.createRoot(document.getElementById("root")).render(
<BrowserRouter>
<App />
</BrowserRouter> main.jsx 파일에서 app컴포넌트를 BrowserRouter로 감싸주자.
function App() {
return (
<>
<header>
<h1>💚 동물 조아 💚</h1>
</header>
<Routes>
<Route path='/' element={<Main />}></Route>
<Route path='/detail/:id' element={<Detail />}></Route>
<Route path='/search' element={<Search />}></Route>
</Routes>
<footer>all rights reserved to OZ</footer>
</>
);
} Route 컴포넌트 사용해서 각각 Main 컴포넌트, Detatil컴포넌트, Search컴포넌트에 연결했다.
(검색 기능은 아직 구현 못 했다...)
각각의 주소값은 path 속성에, 호출할 컴포넌트는 element 속성으로 불러 주면된다. 이때 Route 컴포넌트는 Routes 컴포넌트로 감싸야 한다.
Main page
import { Link } from "react-router-dom";
import { data } from "../assets/data/data";
function Main(){
return <ul>
{data.map((el)=>(
<li key={el.id}>
<Link to = {`/detail/${el.id}`}>
<img src={el.img} />
<div>{el.name}</div>
</Link>
</li>))}
</ul>
}
export default Main;따로 만들어둔 page파일에 있는 Main.jsx이다. 아까 연결해둔 Main컴포넌트를 볼 수 있다.
data를 map()으로 순회하며 el을 렌더링하는데 key값을 넣고, 각 동물데이터를 props로 넘겨준다.
(위에 import한 data는 동물 정보가 담겨있는 더미 데이터이다.)
완성된 메인페이지다.
그럼 이제 해당 동물을 클릭하면 상세 페이지로 넘어가야 하는데, 그래서 이번에 알아볼 게 link 컴포넌트이다.
- Link 컴포넌트 사용하기
a 태그는 페이지를 새로고침하기 때문에 이를 막고자 Link 컴포넌트를 사용한다. Link 컴포넌트는 페이지를 새로고침 없이 주소만 변경한다. to 속성에 이동할 주소값을 적어주면 된다.
위에 보면 Link 컴포넌트로 상세 페이지 주소를 연결했다.
Detail page
function Detail(){
const params = useParams();
const animalData = data.find(
(el)=>(el.id === parseInt(params.id))
)
console.log(animalData)
return (
<section className="detail">
<img src = {animalData.img} />
<h2>{animalData.name}</h2>
<div>{animalData.description}</div>
</section>
)
}useParams()는 URL 경로에 정의된 동적 파라미터 값을 가져오는 훅이다.
const { id } = useParams()을 통해 URL의 :id 값을 추출하고
data 배열에서 해당 id와 일치하는 데이터 1개를 찾아 출력한다.
이제 메인 화면에서 동물 이미지를 클릭하면 해당 동물의 상세 페이지로 넘어갈 수 있다.
