최근 트렌드 Vite를 사용한 React 시작하기

Leos 2023. 7. 4. 02:09

ReactJS는 Facebook에서 개발한 UI 라이브러리로,

사용자 인터페이스 구축에 탁월한 성능과 확장성을 제공합니다.

Vite는 Vue.js의 창시자인 Evan You가 만든 빠른 웹 개발을 위한 빌드 도구입니다.

이번 글에서는 ReactJS와 Vite를 함께 사용하는 방법에 대해 알아보겠습니다.

ReactJS와 Vite를 함께 사용하려면, 먼저 Node.js와 npm을 설치해야 합니다.

그리고 다음 명령어를 사용하여 새로운 프로젝트를 만들 수 있습니다.

npx create-react-app my-app --template vite

위 명령어는 create-react-app을 사용하여 Vite를 템플릿으로 사용하는 새로운 ReactJS 프로젝트를 만듭니다.

이제 프로젝트 디렉토리로 이동하고, npm start 명령어를 실행하여 개발 서버를 시작할 수 있습니다.

ReactJS와 Vite를 함께 사용하기 위해서는 Vite 설정을 변경해야 합니다.

기본적으로 Vite는 ES Modules를 사용하여 모듈을 로드합니다.

그러나 ReactJS는 CommonJS 모듈을 사용하므로, vite.config.js 파일을 만들고 다음과 같이 설정합니다.

export default {
  esbuild: {
    jsxInject: `import React from 'react'`
  },
  optimizeDeps: {
    include: ['react', 'react-dom']
  }
}

jsxInject는 Vite가 자동으로 React를 로드할 수 있도록 해주는 옵션입니다.

optimizeDeps는 Vite가 최초 로딩 시 미리 React와 React-DOM을 불러올 수 있도록 해주는 옵션입니다.

ReactJS에서 컴포넌트는 함수나 클래스 형태로 작성할 수 있습니다. 다음은 함수형 컴포넌트의 예시입니다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

위 코드에서는 React를 import하여 JSX를 작성하고, export하여 다른 파일에서 사용할 수 있도록 합니다.

ReactJS에서 컴포넌트를 작성할 때 주의해야 할 점이 몇 가지 있습니다.

첫째, 컴포넌트는 항상 큰 덩어리로 나뉘어져야 합니다.

즉, 한 컴포넌트에 너무 많은 기능을 넣지 않도록 해야 합니다.

둘째, 컴포넌트는 최대한 재사용성이 높도록 작성해야 합니다.

셋째, 컴포넌트는 가능한 한 부모-자식 관계로 구성되어야 합니다.

ReactJS와 Vite는 둘 다 빠르고 효율적인 웹 개발을 위한 강력한 도구입니다.

이 두 가지를 함께 사용하면 더욱 효율적으로 웹 어플리케이션을 개발할 수 있습니다.

이번 글에서는 ReactJS와 Vite를 함께 사용하는 방법과 ReactJS 컴포넌트 작성 방법,

그리고 컴포넌트 작성 시 주의할 점에 대해 알아보았는데, 이를 참고하여 새로운 프로젝트를 시작해 보시기 바랍니다.