게임모드공유웹 <ModHub> 제작기 - 페이지 이동 구현하기

우리는 프론트에서 라우팅으로 페이지 이동을 처리할 것이다.

npm install react-router-dom axios

라우터 내장기능을 설치한다.

그전에 리액트 디랙토리를 정리할 필요가 있다.

src/
├── components/    # 고정된 기능 탭
├── assets/        # 이미지, 폰트 등 정적 파일
└── pages/         # 라우팅 가능한 이동 가능한 페이지

App.jsx는 애플리케이션의 전체 구조와 흐름을 관리하는 역할을 한다. 이 모듈에 라우터를 사용해 각 페이지로 가는 링크를 연결하자.

App.jsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Users from './pages/Users'
import './App.css'

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>\
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App

pages디렉토리에 각 페이지를 생성했다.

• Home.jsx - 홈페이지

  const Home = () => {
      return (
        <div>
          <h1>홈페이지</h1>
          <p>Welcome to our website!</p>
        </div>
      )
    }
    
    export default Home

• About.jsx - 사이트 소개 페이지

  const About = () => {
      return (
        <div>
          <h1>모드게임서버입니다</h1>
          <p>This is the about page</p>
        </div>
      )
    }
    
    export default About

• Users.jsx - 유저, 로그인 관련 페이지

  import { useState, useEffect } from 'react'
  import axios from 'axios'
  
  const Users = () => {
    const [users, setUsers] = useState([])
  
    useEffect(() => {
      axios.get('http://localhost:8080/api/users')
        .then(response => {
          setUsers(response.data)
        })
        .catch(error => {
          console.error('Error fetching users:', error)
        })
    }, [])
  
    return (
      <div>
        <h1>Users Page</h1>
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </div>
    )
  }
  
  export default Users

Users에는 백엔드로부터 받아온 유저 정보가 뿌려진다.

백쪽으로 돌아가보자. 기존에 임시로 만들어놨던 HelloController는 삭제했고, 유저 정보를 제어할 UserController와 User앤티티를 생성했다.

• UserController.java

  @RestController
  @RequestMapping("/api")
  @CrossOrigin(origins = "http://localhost:5173")
  public class UserController {
  
      @GetMapping("/users")
      public List<User> getUsers() {
          return Arrays.asList(
                  new User(1L, "John Doe"),
                  new User(2L, "Jane Smith"),
                  new User(3L, "Bob Johnson")
          );
      }
  }
  

• User.java

  public class User {
      private Long id;
      private String name;
  
      public User(Long id, String name) {
          this.id = id;
          this.name = name;
      }
  
      // Getters and Setters
      public Long getId() { return id; }
      public void setId(Long id) { this.id = id; }
      public String getName() { return name; }
      public void setName(String name) { this.name = name; }
  }

임시로 세 명의 유저 정보를 리턴값에 리스트로 넣었다. 이 목록을 프론트서버에서 정상적으로 받아오는지 확인해보자.

정상적으로 유저 정보가 뿌려진다.