React-Router-dom Page Routing Quick Start

패키지 설치

yarn add react-router-dom

main.jsx BrowserRouter 설정

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

필요한 컴포넌트에서 페이지 라우팅 설정

import { Route, Routes } from 'react-router-dom'
import './App.css'

import Donation from '../pages/Donation'
import HeaderNav from '../components/HeaderNav'

function App() {

  return (
    <>
      
        <HeaderNav />
        <Routes>
          <Route path="/" element={<Donation />} />
        </Routes>
      
    </>
  )
}

export default App

그 외 라우팅 꿀팁

사용자 인증 상태에 따라 조건부 렌더링 하기 (RTK)

Redux Toolkit 패키지 설치

yarn add @reduxjs/toolkit react-redux

authSlice.js 생성

// src/redux/slices/authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isAuthenticated: false,
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    login: (state) => {
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.isAuthenticated = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

store.js 생성

// src/redux/store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './slices/authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;

ProtectedRoute 컴포넌트 생성

// src/components/ProtectedRoute.js
import React from 'react';
import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

const ProtectedRoute = ({ element }) => {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return element;
};

export default ProtectedRoute;

Login.jsx 페이지 생성

// src/pages/Login.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { login } from '../redux/slices/authSlice';

const Login = () => {
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(login());
  };

  return (
    <div>
      <h2>로그인 페이지</h2>
      <button onClick={handleLogin}>로그인 하기</button>
    </div>
  );
};

export default Login;

App 컴포넌트에서 보호된 라우트 설정

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider } from 'react-redux';
import './App.css';

import Donation from '../pages/Donation';
import HeaderNav from '../components/HeaderNav';
import Login from '../pages/Login';
import ProtectedRoute from '../components/ProtectedRoute';
import store from '../redux/store';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <HeaderNav />
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<ProtectedRoute element={<Donation />} />} />
        </Routes>
      </Router>
    </Provider>
  );
}

export default App;