[React] 기타 컴포넌트 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트

7. 기타 컴포넌트 및 라우팅 분석

이 문서는 관리자 페이지의 시작점 역할을 하는 AdminHome.jsx와 공통 네비게이션 메뉴인 AdminNav.jsx를 분석하고, 이 컴포넌트들이 react-router-dom을 통해 어떻게 연결되는지 설명합니다.

7.1. AdminHome.jsx: 관리자 홈 페이지

이 컴포넌트는 관리자가 로그인 후 처음 마주하는 대시보드 페이지입니다. 주요 기능으로 바로 갈 수 있는 버튼들을 제공합니다.

코드 전문 (주석 포함)

// react-router-dom에서 useNavigate 훅을 가져옵니다.
import { useNavigate } from "react-router-dom"

export default function AdminHome(props) {

    // useNavigate 훅을 실행하여 페이지 이동 함수를 얻습니다.
    // 이 함수를 호출하면 특정 URL로 페이지를 이동시킬 수 있습니다.
    const navigate = useNavigate();

    return (<>
        <div style={{ padding: '40px', textAlign: 'center' }}>
            <h3> 관리자 홈 페이지 </h3>

            <div style={{ margin: '40px 0' }}>
                <p>여기에 토돌이 호순이 그림 넣기</p>
            </div>

            <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', marginTop: '60px' }}>
                {/* '교육 등록하기' 버튼 클릭 시 */}
                <button onClick={() => navigate('/admin/study/create')} style={{ /*...*/ }}>
                    교육 등록하기
                </button>

                {/* '교육 목록으로 이동' 버튼 클릭 시 */}
                <button
                    onClick={() => navigate('/admin/study')}
                    style={{ /*...*/ }}
                >
                    교육 목록으로 이동
                </button>
            </div>

        </div>

    </>)
}

핵심 분석

• useNavigate: 이 훅은 함수 내에서 프로그래밍 방식으로 페이지를 이동하고 싶을 때 사용됩니다. onClick 이벤트 핸들러 안에서 navigate('/path')를 호출하는 것이 대표적인 사용 예입니다.
• <Link> 와의 차이점: useNavigate는 함수 호출(동작)을 통해 페이지를 이동시키는 반면, <Link> 컴포넌트는 사용자가 직접 클릭해야 하는 UI 요소를 만들 때 사용됩니다. 예를 들어, "등록이 완료되었습니다." 알림창을 띄운 후 자동으로 목록 페이지로 이동시키는 것과 같은 로직은 useNavigate로만 구현할 수 있습니다.

---

7.2. AdminNav.jsx: 공통 네비게이션

이 컴포넌트는 모든 관리자 페이지 상단에 공통으로 표시될 메뉴 링크들을 담고 있습니다.

코드 전문 (주석 포함)

// react-router-dom에서 Link 컴포넌트를 가져옵니다.
import { Link } from "react-router-dom";

export default function AdminNav(props) {

    return (<>
        <div>
            <ul class="list">
                {/* Link 컴포넌트는 HTML의 <a> 태그와 유사하지만, 페이지를 새로고침하지 않고 이동합니다. */}
                {/* 'to' prop에 이동할 경로를 지정합니다. */}
                <li> <Link to="/admin"> 관리자 홈 </Link> </li>
                <li> <Link to="/admin/study"> 교육 관리 </Link> </li>
            </ul>
        </div>
    </>)
}

핵심 분석

• <Link> 컴포넌트: React Router의 핵심 컴포넌트로, SPA(Single Page Application)의 사용자 경험을 향상시킵니다. 일반 <a> 태그를 사용하면 링크를 클릭할 때마다 페이지 전체가 새로고침되지만, <Link>는 페이지 새로고침 없이 URL만 변경하고 해당 URL에 맞는 컴포넌트를 렌더링하여 훨씬 빠르고 부드러운 화면 전환을 제공합니다.

---

7.3. 라우팅 설정 (예상)

제공된 파일에는 없지만, 이 프로젝트의 메인 라우팅 파일(예: App.js 또는 Router.js)은 아래와 같은 구조일 것으로 예상할 수 있습니다. react-router-dom의 Routes와 Route를 사용하여 각 URL 경로와 렌더링할 컴포넌트를 매핑합니다.

// App.js (예시)
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import AdminLayout from './components/AdminLayout'; // AdminNav를 포함하는 레이아웃 컴포넌트
import AdminHome from './adminPages/AdminHome';
import AdminStudyList from './adminPages/AdminStudyList';
import AdminStudyCreate from './adminPages/AdminStudyCreate';
import AdminStudyEdit from './adminPages/AdminStudyEdit';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                {/* 관리자 페이지 경로들 */}
                {/* path="/admin" 요청이 오면 AdminLayout을 먼저 보여주고, 그 안에 Outlet을 통해 하위 경로의 컴포넌트를 보여주는 중첩 라우트 구조일 수 있습니다. */}
                <Route path="/admin" element={<AdminLayout />}>
                    {/* /admin 경로의 기본 페이지 */}
                    <Route index element={<AdminHome />} /> 
                    {/* /admin/study 경로 */}
                    <Route path="study" element={<AdminStudyList />} /> 
                    {/* /admin/study/create 경로 */}
                    <Route path="study/create" element={<AdminStudyCreate />} /> 
                    {/* /admin/study/edit/:studyNo 경로. ':studyNo'는 URL 파라미터를 의미합니다. */}
                    <Route path="study/edit/:studyNo" element={<AdminStudyEdit />} /> 
                </Route>

                {/* 사용자 페이지 경로들... */}
                {/* <Route path="/" element={<Home />} /> */}
            </Routes>
        </BrowserRouter>
    );
}