7일차 React Router DOM(03장) - 생활코딩! React 리액트 프로그래밍

03 Router

 

라우터 이용하는 실제 코드를 십습해 보는 과정이다. 기본적인 CS 지식이 있다면 문법이나 사용법은 뭔가 익숙하고 쉽다. 공학도의 탐구심으로써 내부적으로 어떻게 돌아가는지가 궁금하긴 하다. BrowserRouter 컴포넌트로 감싼다는 건 라우팅을 수행하는 코드는 이 컴포넌트에 존재한다는 것이고, Route 컴포넌트는 path와 element에 기재된 핸들러(컴포넌트 함수) 매핑을 등록하는구나 정도는 이해할 수 있겠다.

실습한 코드는 아래와 같다. 일일이 코딩하기 귀찮아서 GPT한테 조금 코딩해 보라고 하고, '/*' not found 부분만 추가해봤다.

...
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
...
...
 
function App() {
  return (
    <Router>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/*" element={'Not Found'} />
        </Routes>
      </main>
    </Router>
  );
}