React_part7.5_React Router
react-router-dom을 사용하기 위해서는 몇가지를 import 해야 한다.
튜토리얼에서..
https://reactrouter.com/docs/en/v6/getting-started/overview
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
Router 사용 방법
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; //react=router=dom은 아주 쿨한 컴포넌트의 모음집이다.
//BrowserRouter은 보통의 웹 사이트 처럼 생겼다. 다른 종류는 HashRouter은 뒤에 뭔가 /#/를 덧붙인다.
import Detail from "./routes/Detail";
import Home from "./routes/Home";
function App() {
return (
<Router>
//라우터는 렌더링 먼저 해준다
//라우터 안에 라우트 만들었다
<Switch>
//한번에 하나의 route만 렌더링 하기 위해 swich 컴포넌트를 넣어준 것이다.
<Route path="/movie">
<Detail /> //url마다 원하는 페이지를 보여주게 한다.
http:
//localhost:3000/movie 하면 detail페이지가 나온다
</Route>
<Route path="/"> //home 컴포넌트이다.
<Home />
</Route>
</Switch>
</Router>
//이러한 방식은 react 공식문서에 따라 적은 것이다.
//https://reactrouter.com/docs/en/v6/getting-started/overview
);
}
export default App;
다음은 detail 컴포넌트와 movie 컴포넌트이다
유저가 영화 제목을 클릭하면 Detail 스크린으로 가게 하고 싶다
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
// a href="" 를 사용하는 대신에 Link to=""를 사용할 것이다.
function Movie({ coverImg, title, summary, genres }) {
return (
<div>
<img src={coverImg} alt={title} />
<h2>{title}</h2> //평범한 html이었다면
{/* <a href="./">{title}<a/>을 사용했을 것이다 */}
//하지만 우리는 Link를 사용할 것이다. link는 브라우저 새로고침 없이도
유저를 다른 페이지로 이동시켜주는 컴포넌트이다. //Link는 원하는 곳
어디에든 사용 가능하다.
<h2>
<Link to="/movie">{title}</Link>
//Link를 사용하면 페이지를 이동하긴 하지만 새로고침 되지는 않는다. 이러면 빠르게 반응하는 것 처럼 보인다.
</h2>
<p>{summary}</p>
</div>
);
}
Movie.propTypes = {
coverImg: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
};
export default Movie;
Recap
이전에는 App 컴포넌트가 모든 것을 다 하고 있었다.
그 다음에는 App컴포넌트에 만들었던 모든 로직을 별개의 장소로 옮겼다.
Home이라는 별개의 컴포넌트로..
그리고 Detail이라는 컴포넌트도 만들었다.
App컴포넌트에는 대신 react-router-dom의 컴포넌트를 가져다 썼다.
이 컴포넌트들이 하는 일은
url을 바라보고 있으면서 url이 바뀌면 어떤것을 보여줄지 결정한다.
제공된 router컴포넌트를 활용해서
유저가 /movie path에 있다면 Detail 컴포넌트를 보여주라고 하기만 하면 된다.
유저가 /(home) path에 있다면 Home 컴포넌트를 보여주라 한다.
url로 home으로 가면 Home컴포넌트가 실행된다. Home은 모든 영화를 보여주는 컴포넌트이다.
기억하기 쉽다.
Route를 만들면 그 안에 넣어준게 렌더링 된다는 것이다. 그러면 해당 경로일 때 보여줄 것이다.
Author And Source
이 문제에 관하여(React_part7.5_React Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@angel_eugnen/Reactpart7.5React-Router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)