새로운 React 앱 만들기

앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 빌드하는 것을 선호하거나, React 앱의 기본 사항만 배우려는 경우 React 앱을 처음부터 빌드할 수 있습니다.

풀스택 프레임워크

이러한 권장 프레임워크는 프로덕션에서 앱을 배포하고 확장하는 데 필요한 모든 기능을 지원합니다. 그들은 최신 React 기능을 통합하고 React의 아키텍처를 활용합니다.

Next.js (앱 라우터)

Next.js의 앱 라우터는 React의 아키텍처를 최대한 활용하여 풀 스택 React 앱을 활성화하는 React 프레임워크입니다.

Next.js는 Vercel에서 유지 관리합니다. Next.js 앱을 빌드해서 Node.js, 도커 컨테이너, 서버리스 호스팅, 혹은 자체 서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 정적 내보내기도 지원합니다.

React Router (v7)

React Router는 React에서 가장 인기 있는 라우팅 라이브러리이며 Vite와 함께 사용하면 풀스택 React 프레임워크를 만들 수 있습니다. 표준 Web API를 강조하고 다양한 자바스크립트 런타임과 플랫폼을 위한 준비된 배포 템플릿이 있습니다.

새로운 React Router 프레임워크를 생성하려면 다음 명령을 사용하세요.

React Router는 Shopify에서 유지 관리합니다.

Expo (네이티브 앱용)

Expo는 네이티브 UI를 사용하여 안드로이드, iOS, 웹을 위한 범용앱을 만들 수 있는 React 프레임워크입니다. 네이티브 부분을 쉽게 사용할 수 있게 해주는 React Native SDK를 제공합니다. 새로운 Expo 프로젝트를 생성하려면 다음 명령을 사용하세요.

Expo를 처음 사용하는 경우, Expo 자습서를 참조하세요.

Expo는 Expo (the company)에서 유지 관리합니다. Expo로 앱을 빌드하는 것은 무료이고 구글이나 애플 스토어에 제한없이 제출할 수 있습니다. Expo는 추가적으로 옵트인 유료 클라우드 서비스를 제공합니다.

다른 프레임워크

풀스택 React 비전을 향해 나아가고 있는 또 다른 떠오르는 프레임워크가 있습니다.

• TanStack Start (Beta): TanStack Start는 TanStack Router를 기반으로 하는 풀스택 React 프레임워크입니다. Nitro나 Vite와 같이 전체 문서 SSR, 스트리밍, 서버 함수, 번들링과 많은 유용한 도구를 제공합니다.
• RedwoodJS: Redwood는 쉽게 풀스택 웹 애플리케이션을 만들 수 있도록 사전탑재된 패키지와 구성을 가진 풀스택 React 프레임워크입니다.

// 이 컴포넌트는 *오직* 서버에서만(혹은 빌드되는 동안만) 실행됩니다.
async function Talks({ confId }) {
  // 1. 서버에서라면 데이터 레이어와 대화할 수 있습니다. API 엔드포인트는 필요하지 않습니다.
  const talks = await db.Talks.findAll({ confId });

  // 2. 렌더링 로직이 추가되더라고도 자바스크립트 번들 크기를 크게 만들지 않습니다. 
  const videos = talks.map(talk => talk.video);

  // 3. 브라우저에서 실행될 컴포넌트에 데이터를 전달합니다.
  return <SearchableVideoList videos={videos} />;
}

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

처음부터 시작하기

앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본 사항을 배우려는 경우 React 프로젝트를 처음부터 시작하는 데 사용할 수 있는 다른 옵션이 있습니다.

처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 저희가 권장하는 프레임워크에는 이러한 문제에 대한 기본 제공 솔루션이 있습니다.

자신만의 솔루션을 구축하려면, Vite, Parcel 또는 RSbuild와 같은 빌드 도구로 시작할 수 있도록 하는 처음부터 React 앱 만들기 가이드를 참조하세요.

만약 이 페이지에 포함되는데 관심있는 프레임워크 작성자라면, 저희에게 알려주세요.