React study/React JS로 영화 웹 서비스 만들기
[React] 7-5. React로 영화 앱 만들기 (3) (Router 사용해 보기)
카누가 좋아요
2023. 6. 7. 18:15
📌React Router를 사용하는 방법
1. react router 튜토리얼에서 다음과 같은 코드를 복사해 App.js 파일의 윗부분에 붙여넣는다.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";App 컴포넌트에는 Router 컴포넌트와 Routes 컴포넌트를 작성한다.
우리는 지금 누군가가 만들어 놓은 컴포넌트를 가져다 사용하는 중이다.
Switch 컴포넌트는 Route를 찾는 역할을 한다. Route 컴포넌트에서는 원한다면 여러개를 렌더링하는 것이 가능하다. 하지만 우리는 하나의 Route만 렌더링되길 원하므로 Switch 컴포넌트를 사용한다.
but 지금 버전에서는 Switch를 사용하지 않게 되어 있으므로 대신에 Routes를 적어주었다.
Route는 URL을 의미한다고 생각하면 된다.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<Routes></Routes>
</Router>
);
}
export default App;✔️ Router, Routes, Route 가 핵심이다! (Router 안에 Routes, Routes 안에 Route 컴포넌트가 들어갈 것!)
2. 유저가 home화면으로 갈 때와 movie(detail) 화면으로 갈 때 사용할 Route에 대한 코드를 작성한다.
.....
import Home from "./routes/Home"; // 주목!
import Detail from "./routes/Detail"; // 주목!
function App() {
return (
<Router>
<Routes>
<Route path="/movie" element={<Detail />} /> // 주목!
<Route path="/" element={<Home />} /> // 주목!
</Routes>
</Router>
);
}
.....path 속성으로 '/'를 적어준 것은 home을 의미한다고 보면 된다.
* Home 컴포넌트는 routes 폴더에 있으므로 가져올 때 위치를 잘 적어주어야 한다.
react app을 열면 바로 나오는 화면의 주소는 'http://localhost:3000/'이다. 우리는 주소가 '/'일 시 Home 컴포넌트를 띄우도록 코드를 작성하였으므로 여러 영화들과 간략한 설명이 적힌 화면이 나오게 된다.
주소를 'http://localhost:3000/movie' 로 /movie를 추가해서 적게 되면 Deatail 컴포넌트의 내용이 뜨게 된다. (아직 작성한 것이 없어 Detail 글자만 볼 수 있다.)
- Broswer Router : 우리가 import 해온 router로, 이것을 사용하면 우리가 생각하는 보통의 웹사이트릐 URL의 생김새를 가진다. 대부분의 경 broswer router를 사용한다.
-Hash Router : hast router를 사용하면 기본 주소인 'http://localhost:3000/'뒤에 '#/'이 붙게 된다.
3. 이제 영화의 제목을 클릭하면 Detail 페이지를 이동하도록 Movie 컴포넌트에 코드를 추가해 보겠다.
function Movie({ coverImg, title, summary, genres }) {
return (
<div>
<img src={coverImg} alt={title} />
<h2>
<a href="/movie">{title}</a> // 주목!
</h2>
<p>{summary}</p>
.....그런데 이게 작동하긴 하지만 영화 제목을 클릭하면 화면 전체가 재실행되는 것을 볼 수 있다. (화면의 맨 위 탭 부분의 favicon에 로딩이 되는 상황이 표시되고 있음을 볼 수 있다.)
우리는 react.js를 사용하고 있는 만큼 재실행하는 것을 피하고 싶다.
✔️ Link
브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트로, 위의 문제를 해결할 수 있다.
Link 역시 react-router-dom에서 import 해와서 다음과 같이 적용해야 한다.
import { Link } from "react-router-dom"; // 주목!
function Movie({ coverImg, title, summary, genres }) {
return (
<div>
<img src={coverImg} alt={title} />
<h2>
<Link to="/movie">{title}</a> // 주목!
.....