React Router

최정훈·2022년 6월 1일
0

SPA

  • SPA (Single Page Application) - 페이지가 한 개인 애플리케이션
  • 리액트 프로젝트에서 .html 파일의 개수는? 1개 >>> SPA(Single Page Application)

Routing

  • 라우팅(Routing) - 다른 경로(주소)에 따라 다른 View(화면)를 보여주는 것
  • React Router - 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리
  • Framework vs. Library
  • cf. Third-party Library

React Router

  • React Router install -
  • index.js - ReactDOM.render(<Routes />, document.getElementById('root'))
  • Routes.js
    function Routes() {
      return (
        <Router>
          <Switch>
            <Route exact path="/" element={Login} />
    				<Route exact path="/signup" element={Signup} />
            <Route exact path="/main" element={Main} />
          </Switch>
        </Router>
      )
    }
    
    export default Routes;

Route 이동하기

  1. <Link> 컴포넌트 사용하는 방법 - <Link to="/signup">회원가입</Link>
  2. useNavigate, useHistory

Sass

  • Sass install - npm install node-sass --save
  • .css.scss
  • Nesting
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
    		
    		li {
    			display: inline-block;
    		}
      }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
profile
사과

0개의 댓글