[2024 중앙 해커톤] UI 적용 및 페이지 전환 (Router)

2024 / 07 / 16

내가 맡은 부분은 로그인 및 회원가입 페이지와 내 정보를 볼 수 있는 마이페이지이다.

그리고 나름 프론트 팀장(?)으로서 페이지 간 연결을 하는 역할도 맡게 되었다.

 

첫 번째로 사용했던 방법은 이 블로그를 참고했다.

 

https://velog.io/@moolbum/%EC%B2%B4%ED%81%AC%ED%95%9C%EA%B2%83-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%ED%95%98%EA%B8%B0

React - 버튼클릭으로 원하는 컴포넌트 렌더링하기

 

그러나 이 방법은 임시로 사용했던 방법이라 잠깐 쓰다가 Router로 페이지 전환하는 방식을 택했다.

개인 포트폴리오 페이지 만들 때 간단하게 쓰기 좋은 방법인듯

Router

npm install react-router-dom

해당 명령어를 통해 설치 가능하다.

 

설치 후에는 index.js파일로 가서 App을 BrowserRouter로 감싸준다.

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

 

그리고 필요한 부분에 다음과 같이 import 해서 사용하면 된다.

import { Routes, Router, useNavigate } from "react-router-dom"; //중괄호 안에 사용하고싶은 것들 불러오면 됨.

활용하기

1. 불러올 컴포넌트(페이지) 만들기

//Signin.js

import React from 'react';

const Signin = () => {
    return (
        <div>
            <h1>Signin Page</h1>
        </div>
    );
};

export default Signin;

 

2. App.js 파일에 경로 설정하기

//App.js

import "./App.css";
import Navbar from "./components/Navbar.js"; //Navbar에 로그인 버튼을 넣어두었으므로 불러와야 함
import { Routes, Route } from "react-router-dom";
import Signin from "./pages/SigninPage.js"; //컴포넌트 불러오기

//Routes로 Route들을 감싸줌
function App() {
  return (
    <div>
      <Navbar></Navbar>
      <Routes>
        <Route path="/login" element={<LoginPage></LoginPage>}></Route>
      </Routes>
    </div>
  );
}

 

3. useNavigate() 함수를 적절한 곳에 작성

//Navbar.js

import { useNavigate } from "react-router-dom";
import logoImage from "../img/logo.png";

const Navbar = () => {
  const navigate = useNavigate();

  const goToLogin = () => {
    navigate("/login");
  };

  return (
      <div>
        <LoginButton onClick={goToLogin}>로그인</LoginButton>
    </div>
    );
   }

export default Navbar;

 

4. 결과

요로코롬 잘 이동되는 것을 확인할 수 있다. 

시간 관계상 많은 코드를 생략하였다.

 

참고로 비밀번호 input 부분에 있는 눈 모양은 장식이 아니고 실제로 작동하는 기능이다. 이건 로그인 페이지 구현이 완료되면 따로 작성해보려고 한다. 본 포스팅은 라우터에 집중하고 싶기 때문에..

 

다음의 벨로그를 참고했더니 금방 적용할 수 있었다. 역시 코딩은 구글링 싸움인듯.

https://velog.io/@jaeochoiii/React-Router%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99

[React] Router을 이용한 페이지 이동

---

할 일

07/17 23:00까지 회원가입, 마이페이지 UI 적용하기

 

오늘의 소감

내일 출근이 걱정되지만 난 해낼 것이다.

늘 그랫듯이..!