『Server 07 』[React] 버튼 클릭 시 페이지 이동

📖 개요

BoardList 는 Client에서 만들었으니, 여기서는 생략할 예정이다. (아래 포스팅 참고바란다.)

『Client 04 』 [React] 게시판 만들기 -BoardList(axios), props 전달

 

오늘은 /template에서 + 버튼을 누르면 /create/template로 페이지가 이동하는 방법을 알아보자!

 

완성된 화면 보기 👉 React

📁 폴더 구조

이전 포스팅에서 말했듯이 웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다.

 

_Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지

_Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다.

_Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할)

_Post : DB에서 데이터 받아와서 테이블에 뿌려주는 역할

 

오늘은 Template_Page에서 Template_Create로 이동하는 방법을 알아볼 예정이다.

 

💻 페이지 이동 버튼 만들기 (useNavigate)

useNavigate는 페이지를 이동할 때 사용된다.  

Link를 써도 페이지 이동을 할 수 있지만, 단순하게 이동하는 경우 Link를 쓰고,

특정 이벤트를 실행할 때 동작하도록 하거나 추가적인 로직이 필요한 경우 useNavigate를 사용한다.

 

useNavigate를 사용하기 위해 react-router-dom으로부터 import 한다.

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

호출한 useNavigate를 navigate 변수에 담는다. 

const navigate = useNavigate();

<button>에 클릭 이벤트를 다음과 같이 넣어준다. 

<button class="button" onClick={() => navigate('/create/template')}>✚</button>

이제 + 버튼을 눌러주면 url이 이동하는 것을 확인할 수 있다. 이 때 화면에 아무것도 안 나오는데, /create/template 이라는 url에 접근 했을 때 어떤 페이지를 보여줄지 설정을 안해서 그렇다. 

 

💻 라우트 설정(App.js)

App.js에 사용자가 입력한 주소(/create/template)를 감지할 수 있게 라우트 설정을 해주자!

//App.js
import React from "react";
import {Route, Routes} from "react-router-dom";

import Menu from './pages/Menubar'
import LoginPage from "./pages/Login/Login_Page";
import TemplatePage from "./pages/Template/Template_Page";
import TemplateDetail from "./pages/Template/Template_Detail";
import TemplateCreate from "./pages/Template/Template_Create";

function App() {
  return (
    <>
        <Routes>
          <Route path ="/" element ={<LoginPage/>}/>
          <Route path =":idx" element ={<Menu/>}/>
        </Routes>

        <Routes>
            <Route path ="/main">
              <Route path =""element={<MainPage/>}/>
            </Route>

            <Route path ="/template">
              <Route path =""  element={<TemplatePage/>}/>
              <Route path=":idx" element={<TemplateDetail/>}/>
            </Route>

            <Route path ="/create">
              <Route path="template" element={<TemplateCreate/>}/>
            </Route>
        </Routes>
    </>
  );
}

export default App;

다음과 같이 해당 url로 갔을 때, App.js에서 설정한 Template_Create 화면이 나오는 것을 확인할 수 있다.

(아래 화면은 다음 포스팅에 다룰 예정이다.)

 

🌈 참고 사이트

누락된 사이트 있으면 말씀 부탁드립니다:)

👉  리액트 라우터 - useNavigate