React diary - 로그인 페이지로 이동하자 - 라우터

React 앱을 실행했을 때 이 React 앱이 로그인하지 않으면 안되는 앱이라면 필수적으로 로그인화면을 거쳐야만 한다. 물론 이미 로그인된 상태라면 로그인 상태에서 볼 수 있는 초기화면으로 이동해도 되겠지만, 지금 당장은 여기까지 생각하지 않기로 하자.

앱이 실행되자마자 로그인화면으로 이동하게 만들기 위해서는 라우터를 사용해야 한다.

라우터는 요청에 대한 경로를 설정한다는 의미이다. React 프로젝트에서 라우터를 설정하기 위해서는 react-router-dom 패키지를 설치하는 작업부터 진행한다.

react-router-dom 패키지 설치

npm install react-router-dom

React 프로젝트 디렉토리에서 위 명령을 실행시키면 된다. vscode 나 IntelliJ 에는 터미널 창이 존재한다. 별도의 터미널에서 실행시켜도 된다.

명령문이 실행되고 나면 package.json 파일에서 dependencies 항목 아래에 react-router-dom 이 추가된 것을 확인할 수 있다. 

node_modules 디렉토리 아래에 react-router-dom 디렉토리가 생성된 것도 확인할 수 있다.

성공적으로 react-router-dom 패키지가 설치된 것이다.

 

타겟 페이지 Login.js 생성

이제 이동할 로그인 페이지를 생성해보자.

src 아래에 pages 디렉토리를 만들고 Login.js 파일을 생성한다.

import React from 'react';

const Login = () => {
  const handleLogin = (e) => {
    e.preventDefault();
    // 로그인 처리 로직 추가
    alert('로그인 성공!');
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '100px' }}>
      <h1>로그인</h1>
      <form onSubmit={handleLogin}>
        <div>
          <label>
            사용자 이름:
            <input type="text" name="username" required />
          </label>
        </div>
        <div>
          <label>
            비밀번호:
            <input type="password" name="password" required />
          </label>
        </div>
        <button type="submit">로그인</button>
      </form>
    </div>
  );
};

export default Login;

디자인은 생각하지 말자. return 문으로 사용자 이름과 비밀번호를 입력받는 폼 양식의 html 을 리턴하는 함수형 컴포넌트 Login 이다.

실제로 동작할 때는 사용자 이름과 비밀번호 입력란에 무언가를 입력하고 로그인 submit 버튼을 클릭하면 "로그인 성공!" 이라는 Alert 메시지를 표시할 뿐이다.

App.js 에서 /src/pages/Login.js 를 호출하기 위해서 라우터를 사용해야 한다.

라우터 정의

App.js 에 기록되어 있는 기본 소스를 무시하고 아래와 같이 작성한다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Login />} />
            </Routes>
        </BrowserRouter>
    )
}

export default App;

라우터 정의는 아래의 스텝을 따르면 된다.

BrowserRouter
    -- Routes
        -- Route

가장 안쪽의 Route 에 path 별 컴포넌트를 정의하면 된다.

<Route path="/" element={<Login />} />

/ 라는 URL path 로 들어왔을 때 Login 컴포넌트를 표시하도록 한다.

실제 프로젝트를 실행시켜보면 index.js 에서 App 컴포넌트를 렌더링하고

App 컴포넌트에서 Login 컴포넌트를 표시한다.

사용자 이름과 비밀번호 입력란에 아무거나 입력한 뒤에 "로그인" 버튼을 클릭하면 아래와 같이 "로그인 성공!" 메시지가 표시된다.

 

로그인에 성공하면 /home 으로 이동하는 기능까지 구현해보자.

이때에는 React Router 가 제공하는 useNavigate 훅을 사용하게 된다.

Login.js 의 코드를 다음과 같이 수정해보자. 참고로 기존 코드에서 return 문 위로만 수정하면 된다.

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

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

  const handleLogin = (e) => {
    e.preventDefault();

    // 로그인 검증 로직 (예: API 호출)
    const username = e.target.username.value;
    const password = e.target.password.value;

    if (username === 'user' && password === 'password') {
      alert('로그인 성공!');
      navigate('/home'); // /home 경로로 이동
    } else {
      alert('로그인 실패: 올바른 사용자 이름과 비밀번호를 입력하세요.');
    }
  };
...

alert('로그인 성공!'); 으로 Alert 메시지를 표시하고, 사용자가 "확인" 버튼을 클릭하면 navigate('/home'); 으로 경로를 이동하도록 코딩했다.

navigate 는 react-router-dom 으로부터 import 한 useNavigate 훅을 가리키고 있다.

/home 으로 이동하게 하기 위해서는 App.js 에 라우터 정의를 추가해야 한다.

/home 으로 이동했을 때 표시할 페이지를 Home.js 라는 이름으로 src/pages 디렉토리 아래에 다음과 같이 생성한다.

import React from 'react';

const Home = () => {
    return (
        <div style={{ textAlign: 'center', marginTop: '100px' }}>
            <h1>홈 화면</h1>
            <p>로그인에 성공했습니다. 환영합니다!</p>
        </div>
    );
};

export default Home;

App.js 에 Home 사용을 위해 import 를 선언하고 

import Home from './pages/Home';

라우터 항목의 정의를 추가한다.

                <Route path="/home" element={<Home />} />

위 2줄의 코드가 추가되어 완성된 App.js 의 전체 소스코드는 아래와 같다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Home from './pages/Home';

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Login />} />
                <Route path="/home" element={<Home />} />
            </Routes>
        </BrowserRouter>
    )
}

export default App;

React 프로젝트의 장점은 소스코드를 수정했을 때 즉시 반영된다는 점이다. 굳이 프로젝트를 종료했다가 다시 실행시키지 않아도 된다.

아래 스크린샷은 로그인 화면에서 사용자 이름에 user 를 비밀번호에 password 를 입력하고 "로그인" 버튼을 클릭해서 Alert 메시지를 확인한 결과이다.

다음은 로그인의 실제 기능을 구현하고, 로그인된 상태를 파악하는 코드를 구현하는 일이다.