새로운 React 앱 만들기

새로운 React 앱, 뭘로 시작해야 할까

새 React 프로젝트를 만들려고 검색하면 시작부터 선택지가 쏟아진다. Next.js, React Router, Vite, Expo는 물론이고 TanStack Start나 RedwoodJS 같은 이름도 나온다. React 하나 배우러 왔는데 왜 프레임워크부터 골라야 하는지 의문이 들 수 있다.

결론부터 말하면 실제로 배포할 서비스를 만든다면 프레임워크로 시작하는 것이 기본 선택이다. React 자체는 UI를 만드는 라이브러리이므로 라우팅, 데이터 요청, 렌더링 방식, 빌드와 배포 같은 앱 전체의 구조까지 결정해주지는 않는다. 프레임워크는 이 빈칸을 채워준다.

다만 모든 프로젝트에 같은 도구가 필요한 것은 아니다. 무엇을 만들 것인지에 따라 고르면 된다.

일단 이것부터 고르면 된다

만들려는 것	추천 시작점
웹 서비스, 웹사이트, 풀스택 앱	Next.js App Router
React Router 중심의 웹 앱	React Router v7
iOS·Android·웹을 함께 지원하는 앱	Expo
React의 기본 원리를 공부하는 작은 프로젝트	Vite
기존 프레임워크로 해결하기 어려운 특수한 구조	Vite·Parcel·Rsbuild 등으로 직접 구성

처음 React를 배우면서 간단한 투두리스트나 카운터를 만들 목적이라면 Vite로도 충분하다. 반면 실제 사용자에게 제공할 웹 서비스를 만들 계획이라면 라우팅과 데이터 처리까지 포함된 프레임워크가 편하다.

풀스택 프레임워크라고 무조건 서버가 필요한 것은 아니다

‘풀스택 프레임워크’라는 말 때문에 서버를 반드시 운영해야 한다고 오해하기 쉽다. 그렇지는 않다.

Next.js나 React Router 같은 프레임워크도 다음과 같은 방식을 지원한다.

• CSR: 브라우저에서 화면을 렌더링한다.
• SPA: 하나의 페이지 안에서 화면을 전환한다.
• SSG: 빌드할 때 HTML을 미리 생성한다.
• SSR: 요청이 들어올 때 서버에서 HTML을 생성한다.

CSR이나 SSG만 사용한다면 결과물을 CDN이나 정적 호스팅 서비스에 올릴 수 있다. 별도의 서버가 필요하지 않을 수도 있다는 뜻이다.

장점은 나중에 요구사항이 달라졌을 때 드러난다. 처음에는 클라이언트 전용 앱으로 시작했다가 SEO나 서버 데이터 처리가 필요한 일부 경로에만 SSR을 추가할 수 있다. 처음부터 앱 전체를 다시 만들 필요가 없다.

웹 서비스를 만든다면 Next.js

Next.js App Router는 React의 최신 아키텍처를 적극적으로 사용하는 풀스택 프레임워크다.

npx create-next-app@latest

Next.js를 사용하면 하나의 프로젝트 안에서 화면, 라우팅, 서버 로직, 데이터 조회를 함께 구성할 수 있다. 배포 방식도 다양하다.

• Node.js 서버
• Docker 컨테이너
• 서버리스 환경
• 자체 서버
• 정적 파일로 내보내기

특히 App Router는 React Server Components와 Suspense를 본격적으로 활용한다.

서버 컴포넌트는 서버나 빌드 과정에서만 실행된다. 데이터베이스나 파일을 직접 읽고, 그 결과를 브라우저에서 상호작용하는 클라이언트 컴포넌트에 전달할 수 있다.

async function Talks({ conferenceId }) {
  const talks = await db.talks.findAll({ conferenceId });

  return <SearchableVideoList videos={talks} />;
}

이 코드의 데이터 조회와 가공 로직은 브라우저용 자바스크립트 번들에 포함되지 않는다. 별도의 API를 반드시 만들지 않고도 서버 데이터와 UI를 가까이 둘 수 있다.

Suspense를 사용하면 데이터가 준비되는 동안 보여줄 로딩 화면도 컴포넌트 구조 안에서 선언할 수 있다.

<Suspense fallback={<TalksLoading />}>
  <Talks conferenceId={conference.id} />
</Suspense>

React Server Components와 Suspense 자체는 Next.js만의 기능이 아니라 React 기능이다. 하지만 이를 실제 프레임워크 수준에서 제대로 연결하려면 번들러와 서버 렌더링까지 복잡한 구현이 필요하다. Next.js App Router는 이 구성이 가장 완성도 높게 통합된 선택지 중 하나다.

Next.js가 잘 맞는 경우는 분명하다.

• 검색 노출이 중요한 웹사이트
• 서버에서 데이터를 읽어야 하는 서비스
• 프론트엔드와 백엔드를 한 프로젝트에서 관리하고 싶은 경우
• 페이지별로 CSR, SSG, SSR을 다르게 선택하고 싶은 경우

라우팅을 중심으로 유연하게 만들고 싶다면 React Router

React Router는 React에서 가장 널리 쓰이는 라우팅 라이브러리 중 하나다. v7에서는 Vite와 결합해 풀스택 프레임워크 방식으로 사용할 수 있다.

npx create-react-router@latest

React Router는 표준 Web API를 강조하고 여러 자바스크립트 런타임과 배포 환경을 지원한다. Next.js의 구조를 그대로 따르기보다 라우팅을 중심으로 좀 더 유연하게 앱을 구성하고 싶을 때 고려할 만하다.

다음과 같은 경우에 어울린다.

• React Router 사용 경험을 그대로 이어가고 싶은 경우
• 라우트 단위 데이터 로딩과 액션을 명시적으로 구성하고 싶은 경우
• 특정 호스팅 서비스에 덜 종속적인 구조를 선호하는 경우

모바일 앱이라면 Expo

iOS와 Android 앱을 만들려는 경우에는 웹 프레임워크가 아니라 Expo를 선택하면 된다.

npx create-expo-app@latest

Expo는 React Native를 기반으로 Android, iOS, 웹을 함께 지원하는 앱을 만들 수 있게 해준다. 네이티브 기능을 다루기 위한 SDK와 개발 도구도 제공한다.

Expo로 앱을 빌드하는 것 자체는 무료이며, 만든 앱을 Google Play나 App Store에 제출할 수도 있다. 빌드와 배포를 편하게 만드는 선택형 유료 클라우드 서비스도 제공한다.

정리하면 다음과 같다.

• 브라우저에서 실행되는 웹 서비스를 만든다 → Next.js 또는 React Router
• 실제 모바일 기기에 설치하는 앱을 만든다 → Expo

React를 사용한다는 공통점은 있지만 결과물이 다르므로 출발점도 다르다.

새롭게 떠오르는 다른 선택지

Next.js, React Router, Expo 외에도 풀스택 React를 지향하는 프레임워크가 있다.

TanStack Start

TanStack Router를 기반으로 하는 풀스택 React 프레임워크다. SSR, 스트리밍, 서버 함수와 Vite 기반 빌드 환경 등을 제공한다.

TanStack Query나 TanStack Router 생태계를 이미 사용하고 있거나, 타입 안전한 라우팅과 데이터 처리를 중요하게 본다면 관심을 가질 만하다. 다만 Beta 단계의 도구는 API나 사용 방식이 바뀔 가능성을 감수해야 한다.

RedwoodJS

풀스택 웹 애플리케이션에 필요한 패키지와 구성을 미리 제공하는 프레임워크다. 여러 도구를 직접 조립하기보다 정해진 구조 안에서 빠르게 앱을 만들고 싶은 경우에 맞는다.

이런 선택지는 흥미롭지만, React를 처음 시작하는 단계라면 생태계의 크기와 문서, 채용 시장, 문제 해결 자료가 충분한지도 함께 봐야 한다. 새롭다는 이유만으로 선택할 필요는 없다.

그럼 Vite는 언제 쓰는가

프레임워크 없이 React 앱을 구성하고 싶다면 Vite, Parcel, Rsbuild 같은 빌드 도구로 시작할 수 있다.

npm create vite@latest

이 방식은 자유도가 높다. 대신 앱에 필요한 결정을 직접 내려야 한다.

• 어떤 라우터를 사용할 것인가
• 데이터를 어떻게 요청하고 캐싱할 것인가
• 코드 분할은 어떻게 할 것인가
• SSR이나 SSG가 필요한가
• 메타데이터와 SEO를 어떻게 처리할 것인가
• 빌드 결과를 어디에 어떻게 배포할 것인가

결국 기존 프레임워크가 미리 해둔 결정을 직접 조합해 자신만의 작은 프레임워크를 만드는 셈이다.

그렇다고 Vite로 시작하는 것이 나쁘다는 뜻은 아니다. 다음과 같은 상황에서는 오히려 적절하다.

• React 문법과 렌더링 원리를 배우는 중이다.
• 사내 관리자 페이지처럼 SEO가 중요하지 않다.
• 기존 백엔드가 따로 있고 프론트엔드는 API만 호출한다.
• 필요한 구조가 단순하거나 팀의 기술 선택이 이미 정해져 있다.
• 기존 프레임워크가 지원하지 않는 특수한 제약이 있다.

중요한 것은 Vite가 Next.js의 가벼운 버전이 아니라는 점이다. Vite는 주로 개발 서버와 빌드를 담당하는 도구이고, Next.js는 애플리케이션 구조와 렌더링 전략까지 제공하는 프레임워크다. 둘은 해결하는 범위가 다르다.

그래서 뭘 선택해야 하는가

아직도 고민된다면 다음처럼 고르면 된다.

React를 공부하는 중이라면

Vite로 시작한다. 컴포넌트, Props, State, 이벤트와 렌더링부터 익힌다. 처음부터 서버 컴포넌트와 캐싱 전략까지 한꺼번에 배우면 React 자체와 프레임워크 기능을 구분하기 어려울 수 있다.

실제 웹 서비스를 만들 거라면

특별한 이유가 없다면 Next.js App Router부터 검토한다. 라우팅, 서버 렌더링, 데이터 처리와 배포까지 필요한 기본 경로가 이미 마련되어 있다.

기존 React Router 경험을 살리고 싶다면

React Router v7의 프레임워크 모드를 검토한다. 표준 Web API와 라우팅 중심 구조를 선호할 때 잘 맞는다.

모바일 앱을 만들 거라면

Expo를 선택한다. 웹 프레임워크를 억지로 모바일 앱 개발에 끌고 갈 이유가 없다.

아주 특수한 요구사항이 있다면

Vite, Parcel, Rsbuild 같은 빌드 도구를 기반으로 직접 구성한다. 다만 직접 고른다는 것은 라우팅, 데이터 처리, 렌더링과 배포에 대한 책임도 함께 가져간다는 뜻이다.

결론

새 React 앱을 만들 때 가장 먼저 할 일은 명령어를 복사하는 것이 아니라 무엇을 만들고 어디까지 프레임워크에 맡길지 정하는 것이다.

학습용 작은 앱이라면 Vite가 단순하다. 실제 웹 서비스를 빠르게 만들고 확장하려면 Next.js나 React Router 같은 프레임워크가 유리하다. 모바일 앱은 Expo가 자연스럽다. 프레임워크로 해결되지 않는 명확한 이유가 있을 때만 처음부터 도구를 조립하면 된다.