React를 시작하는 새로운 방법: Create React App에서 프레임워크로
(ko.react.dev)Create React App이 Deprecated된 이후로, React에서는 공식적으로 프레임워크로 시작하기를 권장합니다.
React를 시작하는 새로운 방법: Create React App에서 프레임워크로
React로 새로운 앱이나 웹사이트를 구축하려면 프레임워크부터 시작하는 것이 좋습니다.
앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 빌드하는 것을 선호하거나, React 앱의 기본 사항만 배우려는 경우 React 앱을 처음부터 빌드할 수 있습니다.
풀스택 프레임워크
이러한 권장 프레임워크는 프로덕션에서 앱을 배포하고 확장하는 데 필요한 모든 기능을 지원합니다. 그들은 최신 React 기능을 통합하고 React의 아키텍처를 활용합니다.
풀스택 프레임워크에는 서버가 필요하지 않습니다
이 페이지의 모든 프레임워크는 클라이언트 측 렌더링(CSR), 단일 페이지 앱(SPA), 정적 사이트 생성(SSG)을 지원합니다. 이러한 앱은 서버 없이 CDN 또는 정적 호스팅 서비스에 배포할 수 있습니다. 또한 이러한 프레임워크를 사용하면 사용 사례에 적합한 경우 경로별로 서버 측 렌더링을 추가할 수 있습니다.
이렇게 하면 클라이언트 전용 앱으로 시작할 수 있으며, 나중에 요구 사항이 변경되는 경우 앱을 다시 작성하지 않고도 개별 경로에서 서버 기능을 사용하도록 선택할 수 있습니다. 렌더링 전략을 구성하는 방법에 대한 프레임워크 설명서를 참조하세요.
Next.js (앱 라우터)
Next.js의 앱 라우터는 React의 아키텍처를 최대한 활용하여 풀 스택 React 앱을 활성화하는 React 프레임워크입니다.
npx create-next-app@latest
Next.js는 Vercel에서 유지 관리합니다. Next.js 앱을 빌드해서 Node.js와 서버리스 호스팅 혹은 자체 서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 정적 내보내기도 지원합니다. Vercel은 추가적으로 옵트인 유료 클라우드 서비스도 지원합니다.
React Router (v7)
React Router는 React에서 가장 인기인는 라우팅 라이브러리이며 Vite와 함께 사용하면 풀스택 React 프레임워크를 만들 수 있습니다. 표준 Web API를 강조하고 다양한 자바스크립트 런타임과 플랫폼을 위한 준비된 배포 템플릿이 있습니다.
새로운 React Router 프레임워크를 생성하려면 다음 명령을 사용하세요.
npx create-react-router@latest
React Router는 Shopify에서 유지 관리합니다.
Expo (네이티브 앱용)
Expo는 네이티브 UI를 사용하여 안드로이드, iOS, 웹을 위한 범용앱을 만들 수 있는 React 프레임워크입니다. 네이티브 부분을 쉽게 사용할 수 있게 해주는 React Native SDK를 제공합니다. 새로운 Expo 프로젝트를 생성하려면 다음 명령을 사용하세요.
npx create-expo-app@latest
Expo를 처음 사용하는 경우, Expo 자습서를 참조하세요.
Expo는 Expo (the company)에서 유지 관리합니다. Expo로 앱을 빌드하는 것은 무료이고 구글이나 애플 스토어에 제한없이 제출할 수 있습니다. Expo는 추가적으로 옵트인 유료 클라우드 서비스를 제공합니다.
다른 프레임워크
풀스택 React 비전을 향해 나아가고 있는 또 다른 떠오르는 프레임워크가 있습니다.
- TanStack STart (Beta): TanStack Start는 TanStack Router를 기반으로 하는 풀스택 React 프레임워크입니다. Nitro나 Vite와 같이 전체 문서 SSR, 스트리밍, 서버 함수, 번들링과 많은 유용한 도구를 제공합니다.
- RedwoodJS: Redwood는 쉽게 풀스택 웹 애플리케이션을 만들 수 있도록 사전탑재된 패키지와 구성을 가진 풀스택 React 프레임워크입니다.
React 팀의 풀스택 아키텍처 비전을 구성하는 기능은 무엇인가요?
Next.js의 App Router 번들러는 공식 React Server Components 명세를 모두 구현합니다. 이를 통해 빌드 시간, 서버 전용 및 대화형 구성 요소를 단일 React 트리에 혼합할 수 있습니다.
예를 들어, 서버 전용 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} />;
}
Next.js의 App Router는 Suspense와 데이터 조회를 통합합니다. React tree에서 서로다른 사용자 인터페이스를 직접적으로 로딩 상태(예: 스켈레톤 플레이스홀더)로 지정할 수 있게 해줍니다.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
서버 컴포넌트와 Suspense는 Next.js 기능이 아닌 React 기능입니다. 그러나 프레임워크 수준에서 이를 채택하려면 참여와 사소하지 않은 구현 작업이 필요합니다. 현재 Next.js App Router는 가장 완벽한 구현입니다. React 팀은 차세대 프레임워크에서 이러한 기능을 더 쉽게 구현할 수 있도록 번들러 개발자와 협력하고 있습니다.
처음부터 시작하기
앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는 것을 선호하거나, React 앱의 기본 사항을 배우려는 경우 React 프로젝트를 처음부터 시작하는 데 사용할 수 있는 다른 옵션이 있습니다.
처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 저희가 권장하는 프레임워크에는 이러한 문제에 대한 기본 제공 솔루션이 있습니다.
자신만의 솔루션을 구축하려면, Vite, Parcel 또는 RSbuild와 같은 빌드 도구로 시작할 수 있도록 하는 처음부터 React 앱 만들기 가이드를 참조하세요.
react는 컴포넌트 기반의 ui 라이브러리에 지나지 않습니다. 단순히 html에 컴포넌트 띄우는 것은 쉽지만 웹사이트나 앱을 만들기 위해서는 많은 기능이 필요합니다. 그렇기 때문에 프레임워크를 권장합니다. 이건 비단 react라서 그런 것이 아니고 현대의 많은 웹은 웹 프레임워크를 통해 만들어 지고 있습니다. 또한 react는 꼭 react 기반의 프레임워크가 아니여도 다양한 언어로 만들어진 웹 프레임워크(예. go, rust , java 등)와 함께 사용할 수 있기 때문에 언제나 선택은 사용자의 몫입니다
프로그래머가 어떤 제약 조건하에서 리엑트를 사용할지 모르는 상황에서, 공식문서는 최대힐 바닐라에 가까운 환경에서 작성되어야 하지 않나, 싶습니다
react는 꼭 react 기반의 프레임워크가 아니여도 다양한 언어로 만들어진 웹 프레임워크(예. go, rust , java 등)와 함께 사용할 수 있기 때문에
-> 사실 이것 때문에 리엑트 공식 문서의 get started 만큼은 최대한 다른 종속성 없이 리엑트만 사용하도록 가이드하는 게 맞지 않나 싶습니다.
뭐...저도 최근에 리액트 공부를 하던 입장에서는,
CRA가 중단되면서, 내가 가진 공부 소스는 CRA 기반이라 에케하지 하면서 Next, React Router 등을 돌아다녔는데, 얘들은 각자만의 기술들이 첨가된 형태라 리액트를 공부 하는 입장에서는 좀 적절치는 않은 거 같아요..개인적으로는 Vite가 그나마 낫지 않나 싶습니다.
React에서는 공식적으로 프레임워크로 시작하기를 권장 -> 이미 한참 늦은 이야기긴 하지만, react 공식 문서에서부터 특정 프레임워크, 빌드툴을 가지고 시작하기를 권장하고 들어가는 게 맞나 싶기도 합니다.
기존 코드 베이스 내에서 그 프레임워크, 빌드툴을 사용할 수 없는 경우도 있고, 의존성을 늘리는 것 자체가 부담스럽게 느껴질 수도 있을 텐데요.
script 태그 하나 내 html에 집어 넣으면, 그 라이브러리의 기능을 그냥 쓸 수 있었던 시절이 마음은 더 편했던 것 같습니다. 너무 옛날 얘기일까요...