[DEV] 리액트 06 - Routing!

headerimg

경고

공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co

Router

리액트로 라우팅 기능 만들기

npm i react-router-dom –save

image

폴더구조를 바꿔주고 App.js에 있던 movie list는 home으로 넘겨주었다. 그리고 App.js에 라우터를 달아줄 것이다.

function App(){
  return (
    <BrowserRouter>
      <Navigation></Navigation> //Navigation Component
      <Route path="/" exact={true} component={Home}/>
      // 정확하게 맞을때만 연결해준다.
      <Route path="/about" component={About}/>
    </BrowserRouter>
  )
}

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

갓콜라스는 hashRouter를 썼다. /#/ 못생긴 해쉬가 붙어있고 SEO에서도 불리하다는 소리까지!! 거기다가 레거시 브라우저만 지원하고 location.key 같은건 작동하지 않는단다.. 장점은 깃페이지에 올릴땐 설정하기 쉽다? 라고함.

일단은 페이지 이동은 이렇게한다. 공식 문서를 읽어보면 props도 간편하게 object로 보낼 수 있다.

다음은 무비디테일?

방식은 1가지이다.

  1. 리스트에서 영화를 클릭 시 movie-detail 에 들어가게 하고 props로 데이터를 다 던져준다.
  2. 리스트에서 영화를 클릭 시 영화의 id or key를 줘서

1. props로 다던져준다

// Movie Component 에서 Link를 클릭 하면 다던져주고
class Detail extends React.Component {
  constructor(props) {
    super(props);
    const { location, history } = this.props;
    if (location.state === undefined) {
      history.push('/');
    }
    this.state = {
      infomation: this.props.location.state,
    };
  }
  render() {
    const info = this.state.infomation;
    return <span>
      {info.title}
    </span>;
  }
}

이 방법은 URL로 접근 할 수 없기 때문에 무조건 클릭으로 접속해야만 한다는 것!

2. ID만 받는다 /movie/:id에서 id를 받기 위해선 react router domuseParams()를 써야한다. Hook이기 때문에 아래 규칙을 지켜주자.

image

import React, { useState, useEffect } from "react";
import axios from 'axios';
import { useParams } from "react-router-dom";

function Detail(){
  const [data, setData] = useState({});
  const apiUrl = 'https://yts-proxy.now.sh/movie_details.json?movie_id=';
  let {id} = useParams();

  useEffect(() => {
    async function getMovie(id){
      const {data:{data:{movie}}} = await axios.get(apiUrl + id);
      setData(movie);
    };
    getMovie(id);
  },[]);

  return (
    <span>{data.title}</span>
  )
}
export default Detail;

Hook을 이용하는 방법! 물론 useParams없이 다른 쿼리 해석 방식을 쓰면 class에서도 가능함. function component에서 axios나 여타 life cycle없이 사용하는 방법이다.

마무리

원래라면 redux나 mobx를 이용해서 한번 로딩한 list는 로딩을 안한다든지, list에 page나 limit api를 이용해서 무한 스크롤링 등 더 많이 추가해볼 사항이 있지만 다른 프로젝트를 하기위해! 여기서 마무리하고 다음번엔 더 큰 프로젝트를 해봐야겠다


© 2018. All rights reserved.