패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자

KDT_Megabyte School 핀테크 서비스 프론트엔드 과정 2기

 

## 220812 Day Today I Learned

• React Router

React Router

 특정한 주소와 컴포넌트를 연결시켜주고, 주소 이동을 통해 다른 컴포넌트 화면을 보여줄 수 있도록 하는 기능을 제공하는 라이브러리

 

라우터 설치하기

 터미널에서 아래와 같은 명령어를 작성

yarn add react-router-dom@6

 

라우터 사용하기

 사용하기 앞서서  index.js 에서 app 을 BrowserRouter 로 감싸주어야 해당 앱에서 브라우저 라우팅 기능의 사용이 가능

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

Routes

 포함하는 주소 변경을 감지하고 일치하는 Route 를 찾아서 표시해주는 역할

     <Routes>
        <Route path="posts" element={<Posts/>}/>
        <Route path="users" element={<Users/>}/>
      </Routes>

 

Route

 컴포넌트와 주소를 연결시켜놓기 위한 태그

<Route path="posts" element={<Posts/>}/>

 

해당 페이지에 접속하기

 a태그나 버튼태그가 아닌 Link를 사용

<Link to="posts">Posts</Link>

 

리액트 라우터 app.js

import { Link, Route, Routes } from 'react-router-dom';
import Posts from './components/Posts'
import Users from './components/Users'

function App() {
  return (
    <div>
      <nav>
        <Link to="/posts">Posts</Link> |{" "}
        <Link to="/users">Users</Link>
      </nav>
      <Routes>
        <Route path="posts" element={<Posts/>}/>
        <Route path="users" element={<Users/>}/>
      </Routes>
    </div>
  );
}

export default App;

 

리액트 라우터6 vs 라우터6이전

 버전 5 에서는 “/” 라는 route 랑 “/posts” 라는 route 가 각각 존재할 경우, /posts 에서 그냥 / 에 지정된 것까지 같이 보이도록 만들어짐

  -> exact 라는 props 를 통해서 정확히 일치하는 주소일 때만 표시하도록 하는 기능이 존재

버전 6 에서는 정확히 일치하는 주소일 때만 Route 에 연결된 element 를 표시
  -> path 에 * 문자를 쓰면 위와 일치하는 것이 없는 모든 경우에 해당 Route 에 연결된 element 를 표시

      <Routes>
        <Route path="posts" element={<Posts/>}/>
        <Route path="users" element={<Users/>}/>
        <Route path="*" element={<p>Not Found</p>}/>
      </Routes>