[React] 라우터 구현하기 + reset css 설치

자바스크립트도 병행하면서 리액트를 이제 막 공부하기 시작했는데..

해커톤이 얼마 남지 않았다 (발등에 불 떨어짐🔥)

그래서 연습용으로 만들던 쇼핑몰 외에, 구상했던 다른 아이디어로 리액트 프로젝트를 만들어보기로 했다

 

그런데 라우터.. 전에 대충 다뤄보긴 했지만 너무 생소하고 기억이 잘 나지 않았다

그래서 이번에 열심히 연습해보면서 정리한 내용을 잊지 않기 위해 기록해본다 

 

라우터 만들기는 이 게시물 참고해서 진행했다. 설명이 잘 되어있음!

 

---

 

App.js

 

- import 부분 추가 (BrowserRouter 로 감싸주지 않으면 에러가 생긴다 -> 에러 해결시 참고한 블로그 )

- 아래 내용이 한 세트이다

import Home from "./pages/Home";

function App() {
    return (
          <Router>
            <Routes>
              <Route path="/" element={<Home />} />
            </Routes>
          </Router>
      );
}

 

- 다른 페이지도 추가하고 나면 App.js는 이런 모양이 된다

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Quiz from "./pages/Quiz";
import Album from "./pages/Album";
import React from "react";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/quiz" element={<Quiz />} />
          <Route path="/album" element={<Album />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

 

Home, Quiz, Album.js 페이지를 아래와 같은 형식으로 작성해준다

 

- 형식 전부 유사하게 작성하면 된다

const Quiz = () => {
  return (
    <div>
      <h1>소개</h1>
    </div>
  );
};

export default Quiz;

 

 

- Home.js 는 조금 형태가 다르다

- 첫 번째 버튼을 누르면 Quiz 페이지로, 두 번째 버튼을 누르면 Album 페이지로 이동시키려고 한다

- onClick 후에 함수를 다 작성하면 코드가 길어질뿐더러, 유사한 내용을 두 번 반복해서 써야 하므로 상단에 navigateToXXPage 함수를 따로 작성해준다

- 페이지를 이동하려면 navigate("/이동할페이지") 를 사용한다

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  const navigateToQuizPage = () => {
    navigate("/quiz");
  };
  const navigateToAlbumPage = () => {
    navigate("/album");
  };

  return (
    <div className="Home">
      <div className="title">
        <h4>신비한</h4>
        <h4>제주 동물사전</h4>
      </div>
      <div className="center-block">
        <button className="btn btn-success" onClick={navigateToQuizPage}>
          퀴즈 풀기
        </button>
        <button className="btn btn-success" onClick={navigateToAlbumPage}>
          도감 확인
        </button>
      </div>
    </div>
  );
};

export default Home;

 

 

---

본격적인 구현 이전에 reset css를 적용하려고 한다

이전에는 항상 reset.css 파일을 만들고 파일 내용을 복붙하고는 했다

그런데 찾아보니 Reset css를 설치해서 사용할 수 있다길래 바로 써먹어봤다

 

 

Reset css 설치

 

// yarn 으로 설치하기
$ yarn add styled-reset

// npm 으로 설치하기
$ npm i styled-reset

 

 

App.js에서 사용하기

 

- React.Fragment 부분이 reset한 것이다

- 라우터와 함께 작성해야 하므로 <></> 로 감싸주었다

import { Reset } from "styled-reset";

function App() {
  return (
    <>
      <React.Fragment>
        <Reset />
      </React.Fragment>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/quiz" element={<Quiz />} />
          <Route path="/album" element={<Album />} />
        </Routes>
      </Router>
    </>
  );
}

 

 

 

 

---

 

TIL 끝!