2021년08월18일

Note

• SPA

React

• router

  • react-router-dom
  import { HashRouter, Route } from "react-router-dom"
  
  function App() {
    return (
      <HashRouter>
        <Route path="/" exact={true} component={Home} />
        <Route path="/about" component={About} />
      </HashRouter>
    )
  }

  • path: 경로
  • exact: url 이 path와 일치한 경우에만 렌더링되게 한다.
    • exact가 없는 경우
      • url이 /about이면, Home 컴포넌트와 About 컴포넌트가 둘다 렌더링된다.
  • component: 렌더링할 component

import { Link } from "react-router-dom"

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

• a 태그를 사용해 링크를 만들면 아예 새로고침이 되기 때문에 Link를 사용한다.
• 전달하고 싶은 데이터가 있다면 to 속성을 이용한다.
  • redirect
    const { history } = this.props 
    history.push("/")

log

• 30분 달리기 성공했다. 거리 딱 맞추려고 1분 더 달렸다. 근데 무릎이 슬슬 아프다. 별일 아녔음 좋겠다. 제발!!!!!
• 기분이 왔다 갔다 했다. 밤이 되어서야 조금 정신차린 것 같아 다행이다.
• 그저께 한 유튜버가 리액트와 뷰의 차이를 간략하게 설명한 영상을 봤는데 그날 보면서는 실감을 못하다가 라우터 처리를 하는 부분을 보고 뷰가 정말 간단하다는 것을 알게되었다.
  • 해당 유튜버는 댓글을 보니 인기가 좀 있는듯 싶었지만 욕설을 쓰는 관계로 안보려고 한다.