[react] 라우팅하기...2

react에서 a태그를 사용할 수 있었다.

단 라우팅을 통해 주소에 컴포넌트를 배정해 준 후 그 주소를 a태그에 걸 수 있다.

라우팅

• App.js

import './App.css';
import Footer from './components/footer';
import Header from './components/header';
import HomePage from './pages/homePage';
import { Route,Routes } from 'react-router-dom';
import Login from './pages/login';

function App() {
 
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" exact={true} element={<HomePage />} />
        <Route path="/login" exact={true} element={ <Login/>}/>
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

“/login”이라는 주소에 Login 컴포넌트를 지정해 주었다.

이제 “/login”으로 이동하면 Login페이지가 보여진다.

직접 주소창에 /login이라고 입력한 페이지다.

헤더에 네비게이션을 만들어보자

네비게이션: a태그

• header.js

import styled from 'styled-components';

const HeaderStyle= styled.div`
    background-color: blue;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
`;

function Header() { 

    return (
        <HeaderStyle>
            header입니다.
            <ul>
                <li><a href = "/login">로그인하기</a></li>
            </ul>
        </HeaderStyle>
    );
}
export default Header;

헤더에 a태그가 추가되었다 클릭하면 로그인페이지로 넘어간다.

하지만 단점이 있다. react는 최초 로딩이 굉장히 오래 걸리는데 a태그를 사용하면 a태그를 클릭할때마다 로딩이 수행된다.

네비게이션: Link태그

• header.js

import { Link } from 'react-router-dom';
import styled from 'styled-components';

const HeaderStyle= styled.div`
    background-color: blue;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
`;

function Header() { 

    return (
        <HeaderStyle>
            header입니다.
            <ul>
                <li><Link to= "/login">로그인하기</Link></li>
            </ul>
        </HeaderStyle>
    );
}
export default Header;

 

겉보기에는 똑같다 하지만 수행과정이 완전히 다르다.

• App.js

import './App.css';
import Footer from './components/footer';
import Header from './components/header';
import HomePage from './pages/homePage';
import { Route,Routes } from 'react-router-dom';
import Login from './pages/login';

function App() {
 
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" exact={true} element={<HomePage />} />
        <Route path="/login" exact={true} element={ <Login/>}/>
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

<Link>태그는 to에 지정된 주소로 가는것이 아니다!!

to에 지정된 주소를 지정시킨 <Route>태그로 간다.

그 <Route>태그의 컴포넌트를 보여주는 것이다.

따라서 페이지를 다시 로딩시킬 필요가 없으므로 로딩시간을 단축시킬 수 있다.

되도록 <Link>태그를 쓰자