ReactJS 5일차

#6.0 Getting Ready for the Router

• react-router-dom: 네비게이션을 만들어주는 패키지다.
  npm i react-router-dom

---

#6.1 Building the Router

• Router의 path를 통해 원하는 파일로 들어간다.
• Route객체의 props
  -path: 접속 경로
  -component: 실제 경로
  -exact
  이 속성을 설정해주지 않으면 path="/"와 path="/about"가 같은 '/'을 포함하므로 같이 랜더링 된다. 따라서 "true"로 설정해 줘야한다.

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

function App(){
  return (
    <HashRouter>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

---

#6.2 Building the Navigation

• 흔히 페이지를 이동할 때 a태그를 이용하곤 한다. 하지만 a태그는 html을 새로 불러오기 때문에 느리다. 따라서 react에서는 Link를 import한다.

import React from "react";
import {Link} from "react-router-dom";
import "./Navigation.css";

function Navigation(){
    return (
        <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}

export default Navigation;

• 모든걸 router안에 써야되는건 아니다. 하지만 link는 router안에 써야한다.

function App(){
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

---

#6.3 Sharing Props Between Routes

• <Link to=""><Link>에서 string 대신 object로 넘겨서 props를 전달 할 수 있다.

import React from "react";
import PropTypes from "prop-types";
import {Link} from "react-router-dom";
import "./Movies.css";

function Movie({id, year, title, summary, poster, genres}){
    return (
        <Link to={{
            pathname: "/movie_detail",
            state: {
                year,
                title,
                summary,
                poster,
                genres
            }
        }}
        >
            <div className="movie">
                <img src={poster} alt={title} title={title}/>
                <div className="movie__data">
                    <h3 className="movie__title">{title}</h3>
                    <h5 className="movie__year">{year}</h5>
                    <ul className="movie__genres">
                        {genres.map((genre, index) => ( //map함수에 index 자동 생성
                        <li key={index} className="genres__genre">{genre}</li> //key값 추가해줘야함 
                            ))}
                    </ul>
                    <p className="movies__summary">{summary.slice(0,180)}...</p>
                </div>
            </div>
        </Link>
    );
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;

---

#6.4 Redirecting

• "Home"을 안 거치고 바로 "Detail"로 들어갈 시 넘겨 받는 값이 없어서 오류가 발생할 수 있다. 이 때 받아온 값이 없으면 "Home"으로 돌아가게 해주는 것이 redirecting이다.

import React from "react";

class Detail extends React.Component{
    componentDidMount(){
        const {location, history} = this.props;
        if(location.state === undefined){
            history.push("/");
        }
    }
    render(){
        const {location} = this.props;
        if(location.state){
            return <h1>{location.state.title}</h1>
        }else{
            return null;
        }
        
    }
}

export default Detail;