🍅 REACT 뽀모도로 타이머 만들기 (2) 🍅

 

SPA 방식으로 페이지 이동을 구현하고자 했다. 

  SPA 방식

  : 페이지 전환 시에도 서버에서의 새로운 HTML 요청 없이 현재 페이지에서 필요한 부분만 변경하는 방식이다.

    새 HTML을 요청하지 않기에 페이지 전환이 빠르고 useState 등을 이용해 프론트엔드에서 상태 관리가 가능하지만

    처음에 자바스크립트 파일을 한 번에 다운로드해야 하기에 초기 로딩 속도가 느릴 수 있다.

 

 

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

 

<BrouserRouter> 을 사용해 라우팅 기능을 활성화하여 App 컴포넌트 내부에서 <Route>를 사용할 수 있게 했다.

---

// App,js

import { Route, Routes } from "react-router-dom";
import Pomodoro from "./pages/Pomodoro/mo876 Pomodoro";
import Study from "./pages/Study/Study";
import TodoList from "./pages/TodoList/TodoList";
import Setting from "./pages/Setting/Setting";

function App() { 
  return (
      <Routes> // 라우팅 설정
        <Route path="/" element={<Pomodoro />} />
        <Route path="/study" element={<Study />} />
        <Route path="/todolist" element={<TodoList />} />
        <Route path="/setting" element={<Setting />} />
      </Routes>

  );
}

export default App;

 

App 컴포넌트는 리액트 애플리케이션의 최상위 컴포넌트 역할을 한다.

<Routes>로 페이지 이동 기능을 설정했다.

path="/"는 기본 경로에서 element 안의 컴포넌트를 렌더링 한다.