[리액트 MBTI - 기획부터 배포까지] 1. React로 하위 페이지 만들기(React Router Dom)

0. 홍보

http://my-mythology-character.site/

신화 속 나의 사랑 유형 찾기

젭알 광고 많이 눌러주세요 엉엉

코드는 여기서 보실 수 있습니다.

https://github.com/BUZZINGPolarBear/Myth-MBTI

GitHub - BUZZINGPolarBear/Myth-MBTI: react + node.js&express

1. 라우팅 페이지?

MBTI페이지를 구성하기 위해선 3가지 페이지가 필요합니다.

첫번째로는 맨 처음 페이지를 방문했을 때 보여주는 index페이지 -> [주소]로만 연결해도 보여지게 하고 싶습니다.

두번째로는 검사 페이지 -> [주소]/test 로 연결했을 때 보여지게 하고 싶습니다.

세번째로는 검사 결과를 보여주는 페이지입니다. -> [주소]/result 로 연결했을 때 보여지게 하고 싶습니다.

 

리액트는 SPA, 즉 Single Page Application입니다.

기존의 웹 페이지처럼 새로운 하위 주소에 접근하면, 하위 주소에 맞는 새로운 Html을 전달하는 것이 아니라 하나의 페이지 안에서 필요한 데이터만 가져오는 형식이라는 뜻입니다. 이러한 작업을 도와주는 것이 react-router-dom입니다.

 

2. 설치

create react app을 통해 리액트 프로젝트가 구성되어있고, Vscode를 통해 접근해있는 상태라고 가정하겠습니다.

npm으로 다음 명령어를 Vscode 터미널에 작성해주세요.

npm install react-router-dom

 

3. 코드에 적용

APP.js로 이동하여 파일을 열어줍니다.

그리고 최 상단에, 우리가 설치한 react router dom을 활용하기 위해 다음과 같이 써줍니다.

import { BrowserRouter, Route, Router, Routes } from "react-router-dom";

create-react-app명령어를 통해 프로젝트를 생성했다면, app.js 파일에 function App()이 정의되어 있을 것입니다.

다음과 같이 작성해줍니다.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<BrowerMain />} />
    <Route path="/result" element={<Result />}></Route>
    <Route path="/test" element={<Test />}></Route>
    <Route path="/*" element={<NotFound />}></Route>
  </Routes>
</BrowserRouter>

element부분은 일단 무시해줍니다. element부분은 작성된 페이지를 반환해주는 부분입니다.

중요한 부분은, BrowserRouter 하위에 Routes 하위에 우리가 원하는 라우팅 페이지를 작성한다는 것입니다.

 

라우팅을 설정하지 않으면 모든 페이지가 한 번에 보이게 됩니다. 
라우팅 규칙에 맞게 페이지를 보여주도록 설정해 봅시다.

1. 우선 라우팅 할 페이지를 <BrowserRouter>컴포넌트로 감싸주어야 합니다.

2. <BrowserRouter>컴포넌트 하위에 <Routes>컴포넌트를 넣어줍니다.

    - 여러 라우팅 규칙들을 검사하고, 해당 라우팅 규칙에 맞는 페이지를 반환하기 위해서 <Routes> 컴포넌트로 감싸주어야 합니다.

3. <Routes> 컴포넌트 하위에 <Route>컴포넌트를 넣어줍니다.

    - 이 부분에는 라우팅 규칙과 반환할 페이지 컴포넌트를 지정해줄 수 있습니다.

 

우리는 index페이지, 테스트 페이지, 결과 페이지를 만들고 싶어 했으므로 "/", "/test", "/result"부분을 추가해 주었습니다.

또한, 사용자가 장난꾸러기여서 페이지 주소 뒤 "/"이후에 아무런 글자를 입력해줬을 때 직접 만든 404페이지로 연결되도록 "/*"도 추가해주었습니다. 

 

element부분에는 본인이 만든 모듈화된 JSX를 연결해주시면 됩니다. 간단한 예를 들어,

import React from "react";
import Result from "./pages/Result";
import Test from "./pages/TestPage";
import NotFound from "./pages/NotFound";
import styled from "styled-components";
import "./App.css";
import { isBrowser, isMobile } from "react-device-detect";
import { useEffect } from "react";
import characterResult from "./characterResult";
import kakaoAdfit from "./pages/kakaoAdfit";
import { BrowserRouter, Route, Router, Routes } from "react-router-dom";

function BrowerMain() {
  const randCharacterNum = Math.floor(Math.random() * 7);
  const BrowserApp = styled.div`
      width: 60vw;
      height: 100vh;
      margin: auto;
      padding-top: 5vh;
    `;
    const KakaoAdfitArea = styled.div`
      width: 300px;
      height: 250px;
      margin: auto;
      margin-top: 5vh;
    `;
  return(
    <BrowserApp>
      <MainPicArea>
        <MainPic
          src={characterResult[randCharacterNum].imgsrc}
          alt="main"
        />
        <TitleArea>나의 신화 속 사랑 유형 알아보기</TitleArea>
        <SubTitleArea>
          신화는 우리의 삶과 맞닿아있습니다. <br></br> 여러분은 어떤
          신의 사랑을 하고 있을까요?
        </SubTitleArea>
        <StartButton
          onClick={() => {
            window.location.href = "/test";
          }}
        >
          시작하기
        </StartButton>
        <KakaoAdfitArea className="adfit"></KakaoAdfitArea>
      </MainPicArea>
    </BrowserApp>
  )
}

function App() {
  if (isBrowser) {
    return (
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<BrowerMain />} />
            <Route path="/result" element={<Result />}></Route>
            <Route path="/test" element={<Test />}></Route>
            <Route path="/*" element={<NotFound />}></Route>
          </Routes>
        </BrowserRouter>
    );
  }
}

export default App;

사용자가 주소로 바로 접근하면 내부 DIV dom을 상단에서 만들어 놓은 <BrowserMain>으로 변경하고,

[주소]/test로 접근하면 외부에 선언한 Test모듈로 변경하고,

[주소]/result로 접근하면 외부에 선언한 Result모듈로 변경합니다.

 

서비스 부분에서는 다음과 같이 구현됩니다.

 

주소로 바로 접근시 -> 랜딩 페이지 반환
http://my-mythology-character.site/

신화 속 나의 사랑 유형 찾기

주소/test로 접근시 -> 테스트 페이지 반환

http://my-mythology-character.site/test

신화 속 나의 사랑 유형 찾기

주소/result로 접근시 -> 결과 페이지 반환

http://my-mythology-character.site/result

신화 속 나의 사랑 유형 찾기

 

감사합니다.