[React] 간단한 CRA + Typescript 기반 React 프로젝트 구성 : 프로젝트 생성, Router 구성

해당 글에서는 빠르게 구성할 수 있는 CRA를 이용하고 Typescript 템플릿을 이용하여 React 프로젝트를 간단하게 구현하는 방법에 대해 알아봅니다.

 

 

1) 프로젝트 환경

---

💡 프로젝트 개발환경

- 프로젝트에서 사용된 환경과 버전입니다.

환경	버전
Node	18.17.1
yarn	1.22.19
IDE	Visual Studio Code
react	18.2.0
typescript	4.9.5
react-router	6.21.2
react-router-dom	6.21.2

 

 

2) 프로젝트 환경 구성

---

 

1. CRA + Typescript 프로젝트 구성

---

# format
$ npx create-react-app <프로젝트명> --template typescript

# 프로젝트 구성 예제
$ npx create-react-app multi-flex-lunch --template typescript

 

 

Getting Started | Create React App

 

 

 

 

 

2. VSCode를 실행하여 프로젝트를 열어줍니다.

---

 

 

3. 패키지 매니저 yarn을 통해 초기 패키지를 설치합니다.

---

💡 command에 아래의 명령어를 통해 설치합니다.

$ yarn 

 

 

 

4. 구성한 프로젝트를 실행합니다.

---

💡 command에 아래의 명령어를 통해 실행합니다.

$ yarn start

 

 

 

3) 페이지 이동 구성 : Router

---

💡 페이지 이동 구성

- 기본적인 페이지 이동 구성을 위해 ‘Router’를 구성합니다.

 

 

1. 라이브러리 설치

---

💡 아래의 명령어를 통해 라이브러리를 설치합니다.

$ yarn add react-router react-router-dom 

$ yarn add --dev @types/react-router @types/react-router-dom

 

 

 

2. 프로젝트 패키지 구성

---

💡 프로젝트 패키지 구성

- 각각의 역할을 수행할 수 있도록 프로젝트 패키지를 구성합니다.

 

💡 변경 이전 프로젝트 패키지

 

💡 변경 이후 프로젝트 패키지

 

 

 

3. 간단한 코드 구성을 합니다.

---

💡 간단한 코드 구성을 합니다

- 해당 구성은 App.tsx → Layout.tsx → Routers.tsx → MainComponents.tsx 파일로 수행이 됩니다.
- 아래와 같은 기본 패키지 형태로 구성이 되었습니다.

 

 

💡 MainComponent.tsx

- 메인 페이지가 되는 컴포넌트입니다. 우선은 h1 태그로 텍스트만 출력되도록 구성하였습니다.

import React from "react";

const MainComponenet = () => {
    return (
        <>
            <h1>메인 컴포넌트입니다!</h1>
        </>
    )
}
export default MainComponenet;

 

 

 💡 Routers.tsx

- 기본 Router를 구성하였습니다.

import React, { Suspense } from "react";
import { Navigate, Route, Routes } from "react-router";
import MainComponenet from "../components/MainComponent";

const Routers = (props: any) => {
    return (
        <Suspense fallback={<></>}>
            <Routes>
                <Route path='/' element={<Navigate replace to='/main' {...props} />} />
                <Route path={'main'} element={<MainComponenet {...props} />} />
            </Routes>
        </Suspense>
    )

}
export default Routers;

 

 

💡 Layout.tsx

- header, footer, body를 나눌 수 있는 영역으로 추후 사용될 예정입니다.

import React from "react";
import Routers from "../routers/Routers";

const Layout = (props: any) => {
    return (
        <Routers {...props} />
    )
}
export default Layout;

 

 💡 App.tsx

- 최초 페이지가 불러와지는 곳입니다.

import React, { useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import Layout from "./components/Layout";
const App = (props: any) => {

  useEffect(() => {

  }, []);

  return (
    <BrowserRouter basename={props.basename}>
      <Layout {...props} />
    </BrowserRouter>
  )

}
export default App;

 

 

 

4. 패키지 매니저(yarn)를 통해 실행합니다.

---

 

$ yarn start

 

 

 

4) 페이지 간 이동 구성 : navigator

---

 

1. 페이지 이동을 위한 컴포넌트를 구성합니다.

---

 

 

 

💡 Page1Component

- 구분을 위해 아래와 같이 간단히 구성하였습니다.

import React from "react";
const Page1Component = () => {
    return (
        <div>
            <h2>Page1 Component입니다.</h2>
        </div>
    )

}
export default Page1Component;

 

 

💡 Page2Component

- 구분을 위해 아래와 같이 간단히 구성하였습니다.

import React from "react";
const Page2Component = () => {
    return (
        <div>
            <h2>Page2 Component입니다.</h2>
        </div>
    )

}
export default Page2Component;

 

 

 

2. Router에서 요소를 추가합니다.

---

💡 Router에서 요소를 추가합니다

- 아래에 page1, page2 경로에 따라서 컴포넌트를 띄우도록 구성하였습니다.

import React, { lazy, Suspense } from "react";
import { Navigate, Route, Routes } from "react-router";

const MainComponenet = lazy(() => import("../components/MainComponent"));
const Page1Component = lazy(() => import("../components/Page1Component"));
const Page2Component = lazy(() => import("../components/Page2Component"));

const Routers = (props: any) => {
    return (
        <Suspense fallback={<></>}>

            <Routes>
                <Route path='/' element={<Navigate replace to='/main' {...props} />} />
                <Route path='main' element={<MainComponenet {...props} />} />
                <Route path='page1' element={<Page1Component {...props} />} />
                <Route path='page2' element={<Page2Component {...props} />} />
            </Routes>
        </Suspense>
    )

}
export default Routers;

 

 

 

3. 페이지를 이동하며 확인합니다.

---

 

 

 

 

4. 메인 페이지에서 page1, page2에 대해 이동할 수 있는 버튼을 만들어 봅니다.

---

 💡 MainComponent.tsx

- page1으로 이동하거나 page2로 이동하는 버튼을 구성하였습니다.

import React from "react";
import { useNavigate } from "react-router";

const MainComponenet = () => {

    const navigate = useNavigate();

    return (
        <>
            <h1>메인 컴포넌트입니다!</h1>
            <button onClick={() => navigate("/page1")}>페이지1으로 이동합니다.</button>
            <button onClick={() => navigate("/page2")}>페이지2으로 이동합니다.</button>

        </>
    )

}
export default MainComponenet;

 

💡 버튼을 눌러서 페이지를 이동이 됨을 확인하였습니다.

 

 

 

 

오늘도 감사합니다. 😀