IT

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

Leos 2023. 7. 4. 02:09

 

 

목차

  1. 소개
  2. 프로젝트시작하기
  3. Vite 설정 변경하기
  4. ReactJS 컴포넌트 작성하기
  5. ReactJS 컴포넌트 작성시 주의할 점

 

 

소개

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 명령어를 실행하여 개발 서버를 시작할 수 있습니다.

 

 

Vite 설정 변경하기

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 컴포넌트 작성하기

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

import React from 'react';

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

export default App;

 

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

 

 

ReactJS 컴포넌트 작성 시 주의할 점

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

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

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

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

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

 

 

결론

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

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

 

 

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

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