[React] React Router2

학습일 : 2023. 03. 20

---

<Switch> 컴포넌트는
한번의 하나의 Route만 렌더링 시켜주게 된다.

 

먼저, 두개의 Route를 생성해 볼 것이다.

---

1.

첫번째 Route는 Home 컴포넌트를 보여줄 것이다.

유저가 홈화면에 있을때 즉, 경로가 localhost:3000에 머물러 있을 때

우리는 유저에게 Home Route를 렌더링 해줄 것이고,

Home 컴포넌트를 보여주게 될 것이다.

사용방법은

<Route> 안에 path="/" 라고 써주면 된다.

 

 

localhost:3000의 실행결과

 

 

 

 

---

2.

두번째 Route는 Detail컴포넌트를 보여줄 것이다

유저의 경로가 localhost:3000/movie 에 있을 때 보여줄 컴포넌트이므로

<Route path="/movie">
	<Detail />
</Route>

 

이렇게 작성해주면 된다.

 

 

 

 

localhost:3000/movie 의 실행결과

 

 

 

---

전체 코드

 

<App.js>

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/movie">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

 

 

<Detail.js>

function Detail() {
    return <h1>Detail</h1>
}

export default Detail;

 

 

<Home.js>

import { useEffect, useState } from "react";
import Movie from "../components/Movie";

function Home() {
    const [loading, setLoading] = useState(true);
    const [movies, setMovies] = useState([]);
  
    const getMovies = async () => {
      const json = await (
        await fetch(
          `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
        )
      ).json();
  
      setMovies(json.data.movies);
      setLoading(false);
    };
  
    useEffect(() => {
      getMovies();
    }, []);
  
    return (
      <div>
        {loading ? (
          <h3>로딩 중...</h3>
        ) : (
          <div>
            {movies.map((movie) => (
              <Movie
                key={movie.id}
                coverImg={movie.medium_cover_image}
                title={movie.title}
                summary={movie.summary}
                genres={movie.genres}
              />

            ))}
          </div>
        )}
      </div>
    );
}

export default Home;