9월 6일 월요일 TIL

김병훈·2021년 9월 6일

til

목록 보기

73/89

목표

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
  - 1. 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>
}