신규 프로젝트 생성

새로운 앱이나 웹사이트를 완전히 리액트로 구축하려면 커뮤니티에서 인기 있는 리액트 기반 프레임워크 중 하나를 선택하는 것을 권장합니다. 프레임워크는 대부분의 앱과 사이트에서 필요한 라우팅, 데이터 가져오기, HTML 생성 등의 기능을 제공합니다.

참고 로컬 개발을 위해 Node.js를 설치해야 합니다. 실제 운영에서도 Node.js를 사용할 수 있지만 필수는 아닙니다. 많은 리액트 프레임워크는 정적 HTML/CSS/JS 폴더로 내보낼 수 있습니다.

프로덕션 수준의 리액트 프레임워크

Next.js

Next.js는 풀 스택 리액트 프레임워크입니다. 다양하고 유연하며 대부분 정적인 블로그부터 복잡한 동적 애플리케이션까지 다양한 크기의 리액트 앱을 만들 수 있습니다. 새로운 Next.js 프로젝트를 생성하려면 터미널에서 다음을 실행하세요.

npx create-next-app

Next.js를 처음 사용해보는 경우 Next.js 튜토리얼을 확인해보세요.

Next.js는 Vercel에서 유지보수합니다. Next.js 앱은 Node.js나 서버리스 호스팅, 또는 사용자 자체 서버로 배포할 수 있습니다. 완전 정적인 Next.js 앱은 모든 정적 호스팅에 배포할 수 있습니다.

Remix

Remix는 중첩된 라우팅을 갖춘 풀 스택 리액트 프레임워크입니다. 앱을 중첩된 파트로 분할하여 데이터를 병렬로 로드하고 사용자 작업에 대한 응답으로 새로 고침할 수 있습니다. 새로운 Remix 프로젝트를 생성하려면 다음을 실행하세요.

npx create-remix

Remix를 처음 사용해보는 경우 Remix 블로그 튜토리얼(간략)과 앱 튜토리얼(상세)을 확인해보세요.

Remix는 Shopify에서 유지보수합니다. Remix 프로젝트를 생성할 때 배포 대상을 선택해야 합니다. Remix 앱은 어댑터를 사용하거나 직접 작성하여 Node.js나 서버리스 호스팅에 배포할 수 있습니다.

Gatsby

Gatsby는 빠른 CMS 기반 웹사이트를 위한 리액트 프레임워크입니다. 풍부한 플러그인 생태계와 GraphQL 데이터 레이어를 통해 콘텐츠, API 및 서비스를 웹사이트에 통합하는 작업을 간소화합니다. 새로운 Gatsby 프로젝트를 생성하려면 다음을 실행하세요.

npx create-gatsby

Gatsby를 처음 사용해보는 경우 Gatsby 튜토리얼을 확인해보세요.

Gatsby는 Netlify에서 유지보수합니다. 완전 정적인 Gatsby 사이트는 모든 정적 호스팅에 배포할 수 있습니다. 서버 전용 기능을 사용하려면 호스팅 제공업체가 Gatsby를 지원하는지 확인하세요.

Expo (네이티브 앱용)

Expo는 리액트 네이티브를 사용하여 Android, iOS 및 웹 앱을 만들 수 있는 리액트 프레임워크입니다. 리액트 네이티브를 사용하기 쉽게 해주는 Expo SDK를 제공합니다. 새로운 Expo 프로젝트를 생성하려면 다음을 실행하세요.

npx create-expo-app

Expo를 처음 사용해보는 경우 Expo 튜토리얼을 확인해보세요.

Expo는 Expo (회사)에서 유지보수합니다. Expo를 사용하여 앱을 무료로 빌드할 수 있으며 Google과 Apple 앱 스토어에 제한 없이 제출할 수 있습니다. Expo는 추가로 선택적으로 유료 클라우드 서비스를 제공합니다.

최신 버전의 리액트 프레임워크

리액트의 계속적인 개선 방법을 탐구하면서, 리액트를 더욱 긴밀하게 프레임워크(특히 라우팅, 번들링, 서버 기술과의 통합)와 통합하는 것이 리액트 사용자가 더 나은 앱을 만드는 데 가장 큰 기회라는 것을 깨달았습니다. Next.js 팀은 리액트 서버 컴포넌트와 같은 최신 버전의 리액트 기능을 연구, 개발, 통합, 테스트하는 데 협력하기로 합의했습니다.

이러한 기능은 매일 제품 수준에 가까워지고 있으며, 번들러와 프레임워크 개발자들과 이를 통합하기 위한 협상을 진행하고 있습니다. 우리의 희망은 1년 또는 2년 후에 이 페이지에 나열된 모든 프레임워크가 이러한 기능을 완전히 지원하게 될 것이라는 것입니다. (이러한 기능을 실험해 보기 위해 협력하고자 하는 프레임워크 개발자이며, 함께 실험해보기를 희망하는 경우 알려주세요!)

Next.js (앱 라우터)

Next.js의 앱 라우터는 리액트 팀의 풀 스택 아키텍처 비전을 실현하기 위한 Next.js API의 재설계입니다. 이를 통해 서버에서 또는 빌드 중에 실행되는 비동기 컴포넌트에서 데이터를 가져올 수 있습니다.

Next.js는 Vercel에서 유지 관리됩니다. Next.js 앱을 Node.js나 서버리스 호스팅, 또는 사용자 고유의 서버에 배포할 수 있습니다. Next.js는 서버를 필요로하지 않는 정적 익스포트도 지원합니다.