[React] Vite로 React 프로젝트 세팅하기

 

강의를 듣고 세팅하는 방법을 기록해두는 포스팅..

 

Vite는 프론트엔드 개발을 더 용이하게 해주는 일종의 개발 툴이라고 할 수 있다. vite는 go로 작성된 esbuilder를 사용하기 때문에 매우 빠른 빌드 속도를 자랑한다.

 

 

먼저 새로운 vite 프로젝트를 생성해보자

 

 npm create vite@latest

 

 

터미널을 열고 위 명령어를 실행한다.

 

 

 

프로젝트 이름을 정하고 프레임워크를 선택하라고 나오는데 나는 React를 선택할 거니까 React를 골라준다.

 

 

 

그 다음엔 자바스크립트를 사용할지 타입스크립트를 사용할지 고르라는 선택지가 나오는데 난 Rust typescript 컴파일러인 SWC가 포함된 두번째 옵션을 선택했다.

 

 

그럼 프로젝트가 생성이 되었다.

 

 

 

위 설명대로 프로젝트 경로로 이동해서 패키지들을 설치하고 실행을 해보자

 

 

 

저 url로 이동하면 

 

 

 

쉽게 실행이 되었다.

 

이제 Routing이나 navigation을 위한 react-router-dom이나 스타일을 위한 Style components와 같은 Dependency들을 설치해보자.

 

먼저 필요없는 파일들은 다 삭제하고 App.tsx 파일 안 코드도 다 지워준다.

 

 

 

그 다음 Dependency들을 설치

npm i react-router-dom @6.14.2

 

npm i styled-reset

 

npm i styled-components@6.0.7

 

npm i @types/styled-components -D

 

이러면 설치가 끝!

 

그러면 router 설정을 해보자. 다음과 같이 App.tsx에 입력한다.

 

import { createBrowserRouter } from 'react-router-dom'
import Layout from './components/layout'
import Home from './routes/home'
import Profile from './routes/profile'

const router = createBrowserRouter([
  {
    path:'/',
    element:<Layout/>,
    children:[
      {
        path:"",
        element:<Home/>
      },
      {
        path:"/profile",
        element:<Profile/>
      }
    ]
  }
])
function App() {

  return (
    <>
      <div>
      </div> 
    </>
  )
}

export default App

 

 

그리고 다음과 같이 폴더와 파일들을 만든다.

 

 

 

각각 다음과 같이 코드를 작성한다.

 

//layout.tsx

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

export default function Layout() {
    return (
        <>
            <h2>layout</h2>
            <Outlet/>
        </>
    )
}

 

//home.tsx

export default function Home(){
    return (
        <h1>
            home
        </h1>
    )
}

 

//profile.tsx

export default function Profile() {
    return <h1>profile</h1>
}

 

 

이렇게 한 뒤 App.tsx 코드에 다음과 같이 추가한다.

 

 

이렇게 되면 

 

 

여기서 설정한 route 대로 렌더링이 되는 것을 확인 할 수 있는데 createBrowerRouter 안에는 배열이 전달된다. 배열 안에는 객체가 들어가게 되는데 path로 경로를 지정하고 element에 렌더링할 컴포넌트를 넣게 된다. children에도 배열이 전달 되며 그 안에도 똑같이 path와 element를 지정할 수 있는데 다시 말하면 바깥에 있는 element가 레이아웃으로 렌더링 되고(파일 이름대로) layout.tsx 파일 안의 <Outlet/> 컴포넌트가 children 안에 있는 컴포넌트로 대체 되는 것이다. 즉 <layout/>의 경로가 '/'으로 되어있기 때문에 그 다음 경로로 무엇이 오던지 레이아웃이 되고 children 안에 있는 것이 렌더링이 되는 것이다. 브라우저를 열어 확인해보면

 

 

'/' 경로 일 때

'/profile' 경로 일 때

 

이렇게 렌더링 되는 것을 볼 수 있다. 그 다음 간단하게 스타일을 설정해보자.

 

App.tsx에 다음과 같이 적는다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />
      },
      {
        path: "/profile",
        element: <Profile />
      }
    ]
  }
]);

const GlobalStyles = createGlobalStyle`
  ${reset}
  * {
      box-sizing: border-box;
    }
    body {
      background-color: black;
      color: white;
      font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
`;
function App() {

  return (
    <>
      <div>
        <RouterProvider router={router} />
      </div>
    </>
  )
}

export default App

 

 

그리고 렌더링 되는 부분에 GlobalStyles를 적용해주면 끝이다.

 

 

 

 

이러면 간단하게 기본 세팅 끝!!