#7.5 React Router

먼저 React Router 를 사용하기 위해서 몇 가지 import 해야 함

 

import {
	BrowserRouter as Router, Switch, Route, Link
} from "react-router-dom";

 

Switch는 Route를 찾는 것

Route는 웹브라우저 상에 입력된 url을 말한다
route를 찾으면 컴포넌트를 Rendering한다 

 

App.js

강의가 조금 옛날 꺼라서 프론트엔드가 슉슉 바뀌는 것도 감안해서

강의에서 설명하던 Switch라는 기능은  Routes로 변경되었다.

 

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './routes/Home';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </ Router>
  );
}
export default App;

 

react-router-dom은

아주 멋진 컴포넌트 모음집이다

첫번째 컴포넌트는 Router였다

Router를 먼저 렌더링 해주고, 그 안에 들어가는 것들은 url 주소에 따라 사용자에게 보여주고 싶은 것들이다

 

Link 컴포넌트

a 태그를 통해서도 방금 만든 컴포넌트들 간의 이동이 가능하지만 그렇게 될 경우 전체 페이지를 로딩 하는 문제가 생긴다. 리액트를 사용하는 이유가 불필요한 로딩을 없애주는 장점 때문에 쓰는 것이니.... 

그런 기능을 제공하는 것이 Link , HTML에서 a 태그의 역할을 한다고 생각하면 된다. 그러네 전체 페이지를 로딩하지 않고 SPA 기능을 제공하는 유용한 것, 새로고침 없이 스무스하게 이동하는 것을 느낄 수 있다

import { Link } from 'react-router-dom';

 from 'react' 라고 했다가 또 한창 헤맴

 

---

<Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie" element={<Detail />} />
      </Routes>
    </ Router>

Route들의 path는 url 주소이다. 

즉 url 주소에 따라서 element에 작성된 컴포넌트들이 화면에 rendering 되는 것

 

다음 시간에는 특정 값을 넘겨주는 경우와 같은 dynamic url 을 만드는 법에 대해서 배운다!

 

전체 코드

App.js

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Home from './routes/Home';
import Detail from './routes/Detail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie" element={<Detail />} />
      </Routes>
    </ Router>
  );
}
export default App;

 

Movie.js 

import { Link } from 'react-router-dom';
function Movie({ id, title, summary, coverImg, genres }) {
  return (
    <div key={id}>
      <h1>
        <Link to="/movie">
          {title}
        </Link>
      </h1>
      <p>{summary}</p>
      <img src={coverImg} alt={title} />
      <ul>
        {genres.map((genre) => <li key={genre}>{genre}</li>)}
      </ul>
    </div>
  );
}

export default Movie;