React JS - Movie App project (part 3)

React JS - Movie App project (part 2)

🔺

지난시간 진행사항

 

- props 이용 

- component 구분 (App.js / Movie.js / Home.js / Detail.js)

- 디렉터리 구분 (components / route)

 

 

---

 

 

 

1/ 우선 React Router을 설치해줌

npm i react-router-dom@5.3.0

 

2/ App.js에 임포트함

 

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

BrowserRouter을 임포트. (Router, Switch, Route)

>> 누군가 이미 컴포넌트를 만들어둔 것임.

 

 

 

3/ Router, Switch, Route 컴포넌트 이용하기

return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );

Router>Switch>Route path="/"> Home(Component)

🔻

누군가 우리 웹사이트의 "/" url에 있다면

Home을 보여줌 (Component)

 

 

** Switch는 route를 찾아주는 역할임.

 

 

 

🔻 App.js 전체코드

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

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

export default App;

 

---

 

이제, Route 컴포넌트를 하나 더 추가해서

path="/movie"인 경우에는 Datail 컴포넌트가 실행되도록 해보자.

 

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

 

전체 코드 🔻

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;

주소에 /movie를 치면 detail로 이동함

 

 

💡 Switch 컴포넌트를 넣어준 이유는?
한번에 하나의 Route만 렌더링하기 위해서.

cr: https://reactrouter.com/docs/en/v6/getting-started/tutorial

React Router | Tutorial

 

 

---

 

이제, Movie.js로 넘어와서

title 부분을 누르면 "/movie"링크로 이동하도록 만들어보자.

 

원래대로라면,

<a href="/movie">를 사용했었다.

 

단, a태그로 이동하는 것은 페이지가 새로고침되기 때문에 비효율적이다.

 

다행히도 refresh없이도 페이지 이동이 가능한 Link 컴포넌트가 react-router-dom에 존재한다!

 

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

우선 Link 컴포넌트를 임포트해온다.

 

// Movie.js 중략

<h2>
  <Link to="/movie">{title}</Link>
</h2>

그리고 h2 안에 Link 컴포넌트 (to = "URL")를 사용한다.

 

 

페이지 새로고침 없이 바로 이동함!

 

 

 

 

 

+) 참고로, Route 안에 직접 html을 입력해줘도 된다.

<Switch>
    <Route path="/hello">
    	<h1>Hello</h1>
    </Route>
</Switch>

 

 

 

 

 

🖐 다음 step > 다이나믹(동적) URL 생성

 

 

---

 

Ref. 

Free Lecture

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders