[React 공식 문서] 0-1. 새로운 React 프로젝트 시작하기

React 프레임 워크 사용하기

프레임 워크를 사용하는 것을 권장함

• 프레임 워크 없이 사용할 수 있나?: YES
  • 프레임 워크 없이 애플리케이션을 작성하고, 기존 페이지의 일부분에 React를 사용할 수도 있음
• 하지만 애플리케이션이나 사이트 전체를 React로 구축하는 경우 프레임워크의 사용을 권장함

 

프레임 워크 사용을 권장하는 이유

• 코드 분할, 라우팅, 데이터 페칭 등의 기능을 추가 작업 없이 간편하게 사용할 수 있음
• 프레임 워크에서 제공하는 코드 구조를 사용해 다른 프로젝트들 간의 맥락과 스킬을 유지할 수 있음
• 만약 애플리케이션이 프레임워크의 지원을 잘 받지 못하는 제약 조건에 놓여있다면 자체 맞춤 설정을 적용할 수도 있음
  • npm에서 react 와 react-dom을 설치
  • Vite나 Parcel 같은 번들러를 활용하여 맞춤 빌드 프로세스를 정립
  • 라우팅, 정적 생성 혹은 서버 사이드 렌더링(SSR) 등 필요에 따라 다른 도구들을 추가

 

 

프로덕션 수준의 React 프레임워크

프로덕션에서 애플리케이션을 배포하고 확장하는 데 필요한 모든 기능을 지원하고 풀스택 아키텍처 비전을 지원하는 방향으로 발전 중인 프레임워크

 

Next.js (Pages Rouer)

풀스택 React 프레임워크

• 정적 페이지, 동적 페이지 모두 개발할 수 있음
• Node.js 서버, 서버리스 호스팅, 개인 서버 등 모든 곳에서 배포할 수 있음
• Next.js 자습서

새로운 Next.js 프로젝트 작성하기

npx create-next-app@latest

 

그 외 (Remix, Gatsby, Expo)

• Remix: 중첩 라우팅 제공 (Remix 자습서)
• Gatsby: CMS를 활용한 빠른 웹사이트 작성 (Gatsby 자습서)
• Expo: 유니버설 안드로이드, iOS, 웹을 작성 (Expo 자습서)

 

 

Next.js (App Router)

React의 풀스택 아키텍처 비전을 구현하기 위해 재설계된 Next.js API

 

서버 컴포넌트

• 서버에서 또는 빌드 중에 실행되는 비동기 컴포넌트에서 데이터를 가져올 수 있음
• 빌드 타임, 서버 전용, 대화형 컴포넌트를 하나의 React 트리에 혼합

// 이 컴포넌트는 서버(또는 빌드 중)에서만 실행됨
async function Talks({ confId }) {
  // 1. 서버에 있으므로 데이터 계층과 통신할 수 있음 (API 엔드포인트가 필요하지 않음)
  const talks = await db.Talks.findAll({ confId });

  // 2. 렌더링 로직을 얼마든지 추가할 수 있음 (JS 번들 크기를 키우지 않아도 됨)
  const videos = talks.map(talk => talk.video);

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

 

 

Suspense

• React 트리에서 사용자 인터페이스의 다른 부분에 대한 로딩 상태를 직접 지정할 수 있음(스켈레톤, 플레이스 홀더)

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

 

서버 컴포넌트와 Suspense

• 서버 컴포넌트와 Suspense는 사실 React의 고유한 기능임
• 하지만 프레임워크 수준에서 이를 사용하려면 많은 노력과 복잡한 구현 작업이 필요함
• 현재 Next.js App Router을 사용하는 것이 가장 완벽하게 구현할 수 있는 방법

 

 

 

출처: React 공식 문서 (새로운 React 프로젝트 시작하기)

새로운 React 프로젝트 시작하기 – React