코드스테이츠 프로젝트(WebPaper_04: React Router)

Route

Route는 특정경로에 컴포넌트를 렌더링 시켜주는 역할을 합니다.

<Route exact path='/' component={Read} />
<Route path ='/about' component={About} />

path는 주소창의 들어갈 경로이고, 앞에 exact가 있으면 정확히 그 주소에 들어가야 해당 컴포넌트를 볼 수 있습니다.
예를 들어서, 위 코드에서 exact가 없다면 /about을 들어가도 Read컴포넌트만 볼 수 있습니다.
component는 해당 주소에 접속했을때 보여줄 컴포넌트입니다.

Route 파라미터 활용하기
Route로 설정한 컴포넌트는, 3가지의 props를 전달받게 됩니다.

• history : 경로 이동에 정보
• location : 현재 경로에 대한 정보, url쿼리 정보
• match : 어떤 라우트에 매치 되었는지에 대한 정보

Link to

Link to는 Route에 설정된 경로로 이동시켜주는 역할을 합니다.

<Link to='/'>Home</Link>
<Link to='/about'>About</Link>

HTML anchor태그와 역할은 비슷하지만, 가장 큰 차이는 페이지의 새로고침 여부입니다.
a 태그를 사용해서 이동한다면 페이지를 이동하면서 새로고침되면서 리액트 앱이 갖고 있는 상태들도 초기화되고, 렌더링된 컴포넌트도 사라지고 새로 렌더링하게 됩니다.
Link를 사용하게 되면 브라우저의 주소만 바꿀 뿐, 페이지는 새로고침하지 않습니다.
페이지의 이동이 있을때는 Link컴포넌트를 사용하고 이외의 경우에는 Button컴포넌트를 사용하는 것에 주의를 해야겠다.

프로젝트 내에서 활용

WebPaper의 메인화면에 있는 HotTopic 컴포넌트입니다.
그리드 리스트로 구현을 했고, 그리드리스트의 아이템 클릭시 해당 기사를 읽을 수 있는 페이지로 넘어가게 구현을 했습니다.

import { Link, Route } from 'react-router-dom';
import Axios from 'axios';
import React, { Component } from 'react';
import { GridList, GridListTile, GridListTileBar } from '@material-ui/core';

class HotTopic extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentDidMount() {
    Axios.get(`http://localhost:3001/api/hottopic`).then(res => {
      const data = res.data.slice(0, 6);
      this.setState({ data });
    });
  }

  render() {
    return (
      <div>
        <GridList cellHeight={120} cols={3}>
          {this.state.data.map(item => (
            <GridListTile key={item._id} cols={1} rows={3}>
              <img src={item.img} alt={item.topic} />
              <Link to={{ pathname: `/read/${item._id}`, state: { item }}}>
                <GridListTileBar title={item.topic}></GridListTileBar>
              </Link>
              <Route path={item._id}></Route>
            </GridListTile>
          ))}
        </GridList>
      </div>
    );
  }
}

export default HotTopic;

Reference

• understanding the fundamentals of rounting in react