☆KDT 2024-04-24★프로젝트(1)-FrontEnd-React

개발환경 설정

---

1) 터미널(powershell)에서 tailwind.css 설치

 

2) 터미널(powershell)에서 tailwind.css 라이브러리 추가

 

3) 터미널(powershell)에서 router 설치

 

4) 마켓플레이스에서 Simple React Snippets 설치 - React의 자동완성을 도와줌

 

5) 마켓플레이스에서 Tailwind CSS IntelliSense 설치 - TailwindCss의 자동완성 기능을 도와줌

 

 

import

---

import { createBrowserRouter } from "react-router-dom";

 

createBrowserRouter는 React Router에서 사용하는 유틸리티 함수 중 하나로, 애플리케이션의 라우팅 설정을 생성하는 데 사용됩니다. 이 함수를 사용하여 브라우저 기반의 라우터를 만들고, 다양한 경로와 컴포넌트에 대한 맵핑을 정의할 수 있습니다.

 

createBrowserRouter 함수는 경로와 해당 경로에 매핑된 컴포넌트를 정의한 배열을 인자로 받아 라우터를 생성합니다. 각각의 경로(path)에 매핑된 컴포넌트(element)는 해당 경로에 대한 라우팅을 처리할 때 렌더링됩니다.

 

이렇게 생성된 라우터는 애플리케이션의 Router 컴포넌트에 전달되어 사용되며, 애플리케이션 내에서 경로에 따라 다른 컴포넌트를 렌더링할 수 있게 해줍니다.

 

Code

---

function App() {

  return (

    <RouterProvider router={root}/>

  );

}

 

 

위의 코드에서 App 컴포넌트는 react-router-dom의 RouterProvider 컴포넌트를 사용하여 애플리케이션의 라우팅을 관리하고 있습니다. 이 코드는 프로젝트의 라우팅 설정을 root라는 이름으로 정의한 변수에 전달하고, RouterProvider 컴포넌트에 이를 주입하여 애플리케이션의 라우팅 기능을 제공합니다.

 

RouterProvider 컴포넌트

---

 react-router-dom 라이브러리에서 제공하는 컴포넌트로, 애플리케이션에 라우팅 기능을 제공하기 위해 사용됩니다. RouterProvider는 라우터를 받아들이고 애플리케이션의 다른 부분에서 라우팅을 관리할 수 있도록 합니다.

 

root 변수

---

 

root 변수는 라우터를 정의하고 있습니다. 이 변수는 router/root 파일에서 가져온 것으로, createBrowserRouter 함수 등을 사용하여 경로와 그에 해당하는 컴포넌트를 매핑하는 설정을 담고 있습니다. 예를 들어, 특정 경로(예: /about 또는 /todo 등)에 대해 해당하는 컴포넌트를 렌더링할 수 있도록 설정됩니다.

 

App 컴포넌트

---

 

App 컴포넌트는 RouterProvider 컴포넌트를 사용하여 root 라우터를 주입합니다. RouterProvider가 라우팅 기능을 관리하면서 애플리케이션 전체에 라우팅 기능을 제공할 수 있습니다.

 

export default App

---

 

App 컴포넌트를 기본 내보내기로 지정하여 다른 파일에서 App 컴포넌트를 import하여 사용할 수 있도록 합니다.

이 코드는 App 컴포넌트를 통해 RouterProvider 컴포넌트를 사용하여 라우팅 기능을 설정하고, root 변수에 정의된 라우팅 설정을 적용합니다. 이를 통해 애플리케이션에서 URL 경로에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

 

---

 

// import { createBrowserRouter } from "react-router-dom";

// // createBrowserRouter : 어떤 경로(path)에는 어떤 컴포넌트를 보여 줄 것인지를 결정하는 역할

// //                    경로의 추가는 파라미터로 전달되는 배열의 내용으로 결정

// const root = createBrowserRouter([

// ]);

// export default root;

import { Suspense, lazy } from "react";

import todoRouter from "./todoRouter";

const { createBrowserRouter } = require("react-router-dom");

const Loading = <div>Loading....</div>

const Main = lazy(() => import("../pages/MainPage"))

const About = lazy(() => import("../pages/AboutPage"))

const TodoIndex = lazy(() => import("../pages/todo/IndexPage"))

const TodoList =  lazy(() => import("../pages/todo/ListPage"))

const root = createBrowserRouter([

  {

    path: "",

    element: <Suspense fallback={Loading}><Main/></Suspense>

  },

  {

    path: "about",

    element: <Suspense fallback={Loading}><About/></Suspense>

  },

  {

    path: "todo",

    element: <Suspense fallback={Loading}><TodoIndex/></Suspense>,

    children: todoRouter()

  }

])

export default root;

 

 

 

import 구문

---

Suspense 및 lazy를 react 모듈에서 가져옵니다. Suspense는 지연 로딩된 컴포넌트의 로딩 중 상태를 표시할 때 사용됩니다.
createBrowserRouter를 react-router-dom에서 가져옵니다. 이 함수는 브라우저를 위한 라우터를 생성하는 역할을 합니다.

 

지연 로딩된 컴포넌트

---

Main, About, TodoIndex, TodoList는 lazy 함수로 지연 로딩된 컴포넌트입니다. 이들은 각각 MainPage, AboutPage, IndexPage, ListPage를 지연 로딩합니다. 지연 로딩을 사용하면 컴포넌트의 로딩을 필요한 시점에만 수행하여 성능을 향상시킬 수 있습니다.

 

 

Loading

---

Loading은 컴포넌트 로딩 중에 표시될 로딩 메시지를 나타내는 JSX 요소입니다.

 

 

todoRouter 함수

---

todoRouter 함수는 todo 경로에 대한 라우터 설정을 반환하는 함수로 보입니다. 이 함수는 하위 라우팅을 설정할 때 사용됩니다.

 

 

createBrowserRouter 함수

---

createBrowserRouter 함수를 사용하여 root 라우터를 생성합니다.
함수에 전달된 배열은 라우팅 설정을 정의합니다. 각 객체는 개별 경로에 대한 설정을 나타냅니다.

 

 

루트 라우팅 설정

---

path: 경로를 지정합니다. 예를 들어, 빈 문자열 ""는 루트 경로 (/)를 의미합니다.

 

element

---

해당 경로에 대해 렌더링할 컴포넌트를 지정합니다. Suspense 컴포넌트는 로딩 중에 Loading 요소를 표시하면서 지연 로딩된 컴포넌트를 렌더링합니다.

 

children

---

todo 경로에 대해 하위 라우팅 설정을 포함합니다. 이 예제에서는 todoRouter() 함수가 반환하는 라우팅 설정을 사용합니다.

 

export default root;

---

root 라우터를 다른 모듈에서 사용할 수 있도록 내보냅니다.

 

요약하자면, 이 코드는 react-router-dom 라이브러리를 사용하여 브라우저 라우팅을 설정하고, 지연 로딩된 컴포넌트를 사용하여 성능을 향상시키고 있습니다. root 라우터는 경로에 따라 Main, About, TodoIndex 컴포넌트를 렌더링하도록 설정되어 있으며, todo 경로에는 하위 라우팅 설정이 포함되어 있습니다.

 

---

 

element: <Suspense fallback={Loading}><Main/></Suspense>

 

element

---

<Suspense fallback={Loading}><Main/></Suspense>은 react-router-dom에서 라우팅 설정을 정의하는 객체의 프로퍼티 중 하나입니다. 이 설정은 특정 경로에 대해 렌더링할 컴포넌트를 정의합니다. 구체적으로 이 코드의 의미는 다음과 같습니다:

 

 

Suspense 컴포넌트

---

Suspense는 React에서 제공하는 컴포넌트로, 지연 로딩된 컴포넌트를 로드하는 동안 대체 콘텐츠를 표시할 수 있도록 합니다.
fallback 속성은 컴포넌트가 로드 중일 때 표시할 요소를 지정합니다. 이 예제에서는 Loading 요소를 fallback으로 사용하여 컴포넌트가 로드 중일 때 로딩 메시지를 표시합니다.

 

 

<Main/> 컴포넌트

---

Main은 MainPage 컴포넌트를 지연 로딩한 결과로 생성된 컴포넌트입니다.
이 컴포넌트는 경로에 따라 렌더링되어 해당 경로에 대한 페이지를 표시합니다.

 

 

전체 구성

---

Suspense 컴포넌트로 Main 컴포넌트를 래핑하고, fallback 속성으로 Loading 요소를 지정합니다.
이 설정은 라우팅 설정에서 특정 경로에 대해 사용되며, 경로에 액세스할 때 Main 컴포넌트를 렌더링합니다.
Main 컴포넌트가 지연 로딩 중일 때 Loading 요소가 표시됩니다. 지연 로딩이 완료되면 Main 컴포넌트가 렌더링됩니다.

 

이 설정은 지연 로딩된 컴포넌트인 Main을 렌더링하는 동안 사용자가 기다리는 시간을 줄이기 위해 로딩 중 화면을 표시하는 데 사용됩니다. 이는 사용자 경험을 향상시키는 데 도움이 됩니다.

 

---