React 앱 만들기
React로 새 앱이나 웹사이트를 구축하려면 프레임워크로 시작하는 것을 권장합니다.
기존 프레임워크가 잘 지원하지 않는 제약 조건이 있는 앱을 만들거나, 직접 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본을 배우고 싶다면처음부터 React 앱을 구축할 수 있습니다.
풀스택 프레임워크
이 권장 프레임워크들은 프로덕션 환경에서 앱을 배포하고 확장하는 데 필요한 모든 기능을 지원합니다. 최신 React 기능을 통합하고 React 아키텍처의 장점을 활용합니다.
참고
풀스택 프레임워크는 서버가 필요하지 않습니다.
이 페이지의 모든 프레임워크는 클라이언트 측 렌더링(CSR), 싱글 페이지 애플리케이션(SPA), 정적 사이트 생성(SSG)을 지원합니다. 이러한 앱은 서버 없이CDN이나 정적 호스팅 서비스에 배포할 수 있습니다. 또한, 이러한 프레임워크를 사용하면 사용 사례에 적합할 때 경로별로 서버 측 렌더링을 추가할 수 있습니다.
이를 통해 클라이언트 전용 앱으로 시작하고, 나중에 필요가 생기면 앱을 다시 작성하지 않고도 개별 경로에서 서버 기능을 사용하도록 선택할 수 있습니다. 렌더링 전략을 구성하는 방법은 프레임워크 문서를 참조하세요.
js (App Router)
js의 App Router는 React 아키텍처를 최대한 활용하여 풀스택 React 앱을 가능하게 하는 React 프레임워크입니다.
npx create-next-app@latestNext.js는 Vercel에서 유지 관리합니다js 앱을 배포할 수 있습니다. Next.js는 또한 서버가 필요 없는 정적 내보내기도 지원합니다.
React Router (v7)
React Router는 React에서 가장 인기 있는 라우팅 라이브러리이며 Vite와 함께 사용하여 풀스택 React 프레임워크를 만들 수 있습니다. 표준 웹 API를 강조하며 다양한 JavaScript 런타임과 플랫폼을 위한 여러배포 준비된 템플릿을 제공합니다.
새 React Router 프레임워크 프로젝트를 만들려면 다음을 실행하세요:
npx create-react-router@latestReact Router는Shopify에서 유지 관리합니다.
Expo (네이티브 앱용)
Expo는 진정한 네이티브 UI로 범용 Android, iOS 및 웹 앱을 만들 수 있게 해주는 React 프레임워크입니다. React Native용 SDK를 제공하여 네이티브 부분을 더 쉽게 사용할 수 있게 합니다. 새 Expo 프로젝트를 만들려면 다음을 실행하세요:
npx create-expo-app@latestExpo가 처음이라면 Expo 튜토리얼을 확인해 보세요.
Expo는 Expo (회사)에서 유지 관리합니다. Expo로 앱을 구축하는 것은 무료이며, 제한 없이 Google 및 Apple 앱 스토어에 제출할 수 있습니다. Expo는 추가로 유료 클라우드 서비스를 선택적으로 제공합니다.
풀스택 React 비전을 향해 나아가고 있는 다른 신흥 프레임워크들도 있습니다:
- TanStack Start (베타): TanStack Start는 TanStack Router로 구동되는 풀스택 React 프레임워크입니다. Nitro와 Vite 같은 도구를 사용하여 전체 문서 SSR, 스트리밍, 서버 함수, 번들링 등을 제공합니다.
- RedwoodSDK: Redwood는 많은 사전 설치된 패키지와 구성으로 풀스택 웹 애플리케이션을 쉽게 구축할 수 있게 해주는 풀스택 React 프레임워크입니다.
처음부터 시작하기
앱에 기존 프레임워크로 잘 처리되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본을 배우고 싶다면, 처음부터 React 프로젝트를 시작하는 다른 옵션들이 있습니다.
처음부터 시작하면 더 많은 유연성을 얻지만, 라우팅, 데이터 페칭 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이는 기존에 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 매우 유사합니다.저희가 권장하는 프레임워크들은 이러한 문제들에 대한 내장 솔루션을 가지고 있습니다.
자체 솔루션을 구축하고 싶다면, 처음부터 React 앱 구축하기 가이드를 참고하여 Vite,Parcel또는RSbuild와 같은 빌드 도구로 시작하는 새로운 React 프로젝트 설정 방법에 대한 지침을 확인하세요.
이 페이지에 포함되기를 원하는 프레임워크 저자라면,저희에게 알려주세요.