[React] 프로젝트 구조 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트

1. 프로젝트 구조 및 핵심 개념 이해

이 문서는 프로젝트의 전반적인 구조와 React, React Router, Redux(Redux Toolkit)의 역할에 대해 설명하여 코드 이해의 기초를 다집니다.

1.1. 폴더 및 파일 구조

제공된 파일들을 통해 이 프로젝트의 관리자 페이지 구조를 유추할 수 있습니다.

• src/
  • api/
    • adminApi.js: 관리자 기능과 관련된 모든 서버 API 요청을 모아둔 파일. (백엔드와의 통신 담당)
  • components/
    • AdminNav.jsx: 관리자 페이지에서 공통으로 사용되는 네비게이션 메뉴 컴포넌트.
  • store/
    • adminSlice.jsx: Redux Toolkit을 사용하여 관리자 페이지의 전역 상태(데이터)를 관리하는 파일.
  • adminPages/
    • AdminHome.jsx: 관리자 페이지의 메인 화면.
    • AdminStudyList.jsx: 전체 교육 콘텐츠(장르/주제/예문)를 조회하고 관리하는 목록 페이지.
    • AdminStudyCreate.jsx: 새로운 교육 콘텐츠를 등록하는 페이지.
    • AdminStudyEdit.jsx: 기존 교육 콘텐츠를 수정하는 페이지.

1.2. 핵심 라이브러리 역할

이 프로젝트는 세 가지 핵심 라이브러리를 기반으로 동작합니다.

1) React

• 역할: 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.
• 핵심 개념: 컴포넌트(Component)
  • UI를 독립적이고 재사용 가능한 조각으로 나눈 것입니다. (예: AdminNav, AdminStudyList)
  • 각 컴포넌트는 자신만의 상태(State)를 가질 수 있으며, 상태가 변경되면 UI가 자동으로 업데이트(리렌더링)됩니다.
• 핵심 개념: React Hooks
  • useState: 컴포넌트 내에서 동적인 상태(변하는 값)를 관리하게 해줍니다.
  • useEffect: 컴포넌트가 처음 렌더링될 때, 또는 특정 상태가 변경될 때 특정 작업(예: 서버에서 데이터 불러오기)을 수행하게 해줍니다.
  • useNavigate: 페이지 이동을 위해 사용합니다.
  • useParams: URL의 파라미터(예: /edit/1에서 1)를 가져올 때 사용합니다.
  • useDispatch: Redux의 액션(상태 변경 요청)을 실행할 때 사용합니다.
  • useSelector: Redux 스토어의 상태(데이터)를 가져올 때 사용합니다.

2) React Router

• 역할: 사용자가 접속한 URL에 따라 다른 페이지(컴포넌트)를 보여주는 '라우팅' 기능을 담당합니다.
• 주요 컴포넌트 및 훅
  • <Link to="/path">: 클릭 시 해당 경로로 이동하는 링크를 생성합니다. (페이지 새로고침 없음)
  • useNavigate(): 함수 내에서 특정 경로로 페이지를 이동시킬 때 사용합니다. (예: 등록 완료 후 목록 페이지로 이동)

3) Redux (with Redux Toolkit)

• 역할: 애플리케이션의 '전역 상태'를 한 곳에서 관리하는 도구입니다. 여러 컴포넌트가 공통으로 사용해야 하는 데이터(예: 장르 목록, 교육 목록)를 Redux 스토어에 저장해두고 필요할 때마다 꺼내 씁니다.
• 왜 사용하는가?: 만약 Redux가 없다면, AdminStudyList에서 불러온 데이터를 AdminStudyEdit 컴포넌트에게 전달하기 위해 복잡한 과정을 거쳐야 합니다. Redux를 사용하면 어떤 컴포넌트에서든 스토어에 직접 접근하여 데이터를 사용하거나 변경 요청을 할 수 있습니다.
• Redux Toolkit: 기존 Redux의 복잡한 설정과 문법을 간소화한 공식 도구입니다.
  • createSlice: 상태, 리듀서(상태 변경 로직), 액션(상태 변경 요청)을 한 번에 정의하게 해주는 핵심 기능입니다.