목표

• React로 네비게이션을 만드는지 알고, 쉬운지 알 수 있도록 하자
  • 네비게이션을 만들어주는 package
    • react-router-dom
    • npm install react-router-dom

• src 폴더에 components, routes 를 만들어준다.
  • Movie.js , Movie.css를 components folder에 넣어준다
  • routes folder에 Home.js , About.js 를 새로 만들어준다
    • 이렇게 두 개의 라우터를 가지게 될 건데(두 개의 스크린 개념), 첫번째 화면은 영화설명 페이지가 될 것이고, 두번째 화면은 about페이지가 될 것이다.
    • App.js 에 있는 코드를 복사해서 Home.js 에 복사해준다.
    • 그리고 App.js 에 코드를 작성해줬다.

import React from "react";

function App() {
	return <span>something<span>;
}
      
export default App;

• 이렇게 폴더를 정렬하는 이유는 router를 App.js 에 넣을 것이기 때문이다.
• App.css 로 routes folder에 가져와서 Home.css 로 수정해주고 안에 코드도 바꿔준다.
  • 맨 위에서 import Movie form "../components/Movie"; 로 수정하였는데, dot 을 하나 더 붙인 이유를 생각해봤다.
  • routes folder 안으로 들어갔어서 상위개념으로 하나를 더 붙여 준 것 같다.

router 만들기

• App function 에 router를 만들 것 이다.
• 그냥 코드에 Home.js 를 return 하는 것이 아닌, router를 return 할 것이다.
  • router is very simple react component
  • 만약 내가 페이지에 있다면, Home.js 로 가던지 아니면 About.js 로 보내는 것이다.
  • 이것이 라우터가 하는 일인데, url을 가져와 확인하고, 라우터에게 명령하는 것에 따라서 특정 컴포넌트를 불러온다.

코드추가

import React from "react";
import { HashRouter, Route } from "react-router-dom";
import About from "./routes/About"

function App() {
	return <HashRouter>
    	<Route/>
    </HashRouter>
}

• react-router-dom 은 다른 종류의 라우터들이 존재한다.
• 그 중에서 HashRouter를 쓰는 것 뿐이다.
• 그리고 Route 도 import 해준다.

• <HashRouter>를 리턴해준다.
  • <HashRouter> 안에 Route를 넣어준다.
  • <Route> 안에는 중요한 props가 들어간다.
    • 1. screen will be rendering
    • 2. props is what URL is going to do

• 그리고 <Route/> 를 <Route path="/about" component={About}/ >로 수정해준다.
  • 이 뜻은 이 path로 가면 component를 보여줘라는 뜻이다.

• 하지만 지금은 About.js 가 비어있기 때문에 만들어줘야한다.

import React from "react"

function About() {
	return <span>I made this page because I like movie so much </span>
}

export default About;

실행 후 확인해보기

• 이렇게 /about 으로 들어가면 내가 입력한 텍스트가 나온다.
• 근데 기본화면은 path를 / 로 설정해줘야한다
  • 아까 Home.js 에 App.js 코드를 복사해서 가져왔으니
  • 위에 import Home from "./routes/Home" 추가해주고,
  • <Route path="/" component={Home}/> 도 추가해준다.

• 그러면 기본 페이지가 설정이 다음과 같이 되었다.
  

문제점

• 하지만? 여기서 /about으로 들어가면 ?
  
• 이렇게 두 개의 component 가 동시에 렌더링 된 상황이다.
• 이게 react router가 작동하는 방식이라 어쩔수 없다..

해결방법

• 코드를 수정해야한다.

import React from "react";
import { HashRouter, Route } from "react-router-dom";
import About from "./routes/About"

function App() {
	return <HashRouter>
    	<Route path="/home">
          <h1>Home></h1>
      	</Route>
      	<Route path="home/introdunction">
          <h1>Introduction</h1>
      	</Route>
       	<Route path="/about">
          <h1>About </h1>
      	</Route>
    </HashRouter>
}

• 이렇게 해도 /introduntion path로 들어가도 /home + /introduction 이 합쳐져서 렌더링된다.
• 왜냐하면 , react router는 기본적으로 url을 가져온다.
• 그 다음 비교한다.
• 그리고 매치가 되면 컴포넌트를 보여준다.

그러면 어떻게 해야하나?

• exact={true} 를 첫번째 route에 추가해주는 것이다.
  • exact 는 설정한 path가 아니면 렌더링 안해준다는 뜻이다.
• 그러면 URL이 / 일 때면 Home.js 를 렌더링 해준다.