[230517] React 강의

1. React Router (페이지 전환) 학습

npm install react-router-dom 설치

---

• 요렇게 폴더 만들어줌, 라우터 폴더는 스크린, 페이지등으로도 네이밍 가능
• 브라우서라우터가 있고 해쉬라우터가 있는데 해쉬는 # 쓰는거 브라우저는 우리가 일반적으로 아는거임

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}
export default App;

우리가 라우터 써주는 방식 라우터가 그 경로일때 들어갈꺼임

Link to

: 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

동적 URL (useParams)

<Route path="/movie/:id" element={<Detail />} />

이렇게 콜론 넣어서 아이디 쓰면 아이디 자리에 무언가가 동적으로 온다는 뜻

<Link to={`/movie/${id}`}>{title}</Link>

아이디 보여주는 url

import { useParams } from "react-router-dom";
function Detail() {
  const x = useParams();
  console.log(x);
  return <h1>Detail</h1>;
}
export default Detail;

이렇게 해서 useParams 사용하면 id 키 값에 값 들어감

const { id } = useParams();

이거 써서 객체안에 id 값 뽑아낼수도 있음