Start a New React Project새 React 프로젝트 시작하기

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework. 페이지 일부에 React를 사용하는 방식으로 프레임워크 없이도 React를 사용할 수 있습니다. 하지만 새 앱이나 사이트를 완전히 React로 구축하는 경우에는 프레임워크를 사용하는 것이 좋습니다.

Here’s why. 그 이유는 다음과 같습니다.

Even if you don’t need routing or data fetching at first, you’ll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early—either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. 처음에는 routing이나 데이터 페칭이 필요하지 않더라도 이를 위한 라이브러리를 추가하고싶을 것입니다. 새로운 기능이 추가될 때마다 JavaScript 번들이 증가함에 따라 모든 경로에 대한 코드를 개별적으로 분할하는 방법을 찾아야 할 수 있습니다. 데이터 페칭의 요구사항이 복잡해지면 서버-클라이언트 네트워크 워터폴이 발생하여 앱이 매우 느리게 느껴질 수 있습니다. 네트워크 상태가 좋지않은 사용자나 저사양기기를 사용하는 사용자가 대상에 더 많이 포함되므로 서버 또는 빌드 시간 중에 컨텐츠를 우선적으로 표시하기 위해 컴포넌트에서 HTML을 생성해야 할 수 있습니다. 서버 또는 빌드 중에 일부 코드를 실행하도록 설정을 변경하는 것은 매우 까다로울 수 있습니다.

These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on. To solve these problems on your own, you’ll need to integrate your bundler with your router and with your data fetching library. It’s not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You’ll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You’ll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. 이러한 문제는 React에만 국한된 것이 아닙니다. 이것은 Svelte에 SvelteKit이 있고, Vue에 Nuxt가 있는 이유입니다. 이러한 문제를 해결하려면 번들러를 라우터 및 데이터 페칭 라이브러리와 통합해야합니다. 초기 설정은 어렵지 않지만 시간이 지나면서 앱이 커져도 빠르게 로드되는 앱을 만드는 데에는 미묘한 차이가 있습니다. 최소한의 앱의 코드를 전송하면서 페이지에 필요한 모든 데이터와 함께 클라이언트-서버를 한 번으로 전송하는 방법이 좋습니다. 당신은 점진적인 개선을 지원하기 위해 JavaScript 코드가 실행하기 전에 페이지가 인터랙티브하게 표시되기를 원할 것입니다. 어디서나 호스팅이 가능하며 JavaScript가 비활성화한 상태에서도 작동하는 마케팅 페이지용 정적 HTML폴더를 생성하고 싶을 수 있습니다. 이런 기능을 직접 구축한다면 상당한 노력이 필요합니다.

React frameworks on this page solve problems like these by default, with no extra work from your side. They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it’s easier to get stuck on unsupported dependency versions, and you’ll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it’s anything like the ones we’ve made in the past, more haphazardly designed). 이 페이지의 React 프레임워크는 사용자가 추가작업을 하지 않아도 기본적으로 같은 문제를 해결합니다. 매우 간결하게 시작한 다음, 필요에 따라 앱을 확장할 수도 있습니다. 각 React 프레임워크에는 커뮤니티가 있으며 질문에 대한 답을 찾고 툴을 업그래이드 하는 것이 더 쉽습니다. 또한 프레임워크는 코드에 구조를 부여하여 다른 사람들이 다른 프로젝트간의 컨텍스트와 기술을 유지할 수 있도록 도와줍니다. 반대로 사용자 정의 설정을 사용하면, 지원되지 않는 의존성 버전에 갇히기 쉬우며, 커뮤니티나 업그레이드 경로가 없는 (그리고 과거에 만들었던 프레임워크와 마찬가지로 더 엉성하게 설계된) 자체 프레임워크를 만들게 될 것입니다.

If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more. 앱에 이러한 프레임워크가 잘 지원하지 않는 비정상적인 제약 조건이 있거나 이러한 문제를 직접 해결하고 싶다면, React에 사용자 정의 설정을 적용할 수도 있습니다. npm에서 react 및 react-dom 을 가져오고, Vite 또는 Parcel 같은 번들러로 사용자 정의 빌드 프로세스를 설정한 다음, 라우팅, 정적 생성 또는 서버 측 렌더링을 위해 다른 도구를 추가하세요.

Next.js’s App Router bundler fully implements the official React Server Components specification. This lets you mix build-time, server-only, and interactive components in a single React tree. Next.js의 앱 라우터 번들러는 공식 React 서버 컴포넌트 사양을 완벽하게 구현합니다. 이를 통해 빌드 타임, 서버 전용, 인터랙티브 컴포넌트를 단일 React트리에서 혼합할 수 있습니다.

For example, you can write a server-only React component as an async function that reads from a database or from a file. Then you can pass data down from it to your interactive components: 예를 들어, 서버전용 React 컴포넌트를 데이터베이스나 파일에서 읽는 async 함수로 작성할 수 있습니다. 그런 다음 데이터를 인터랙티브 컴포넌트로 전달할 수 있습니다.

// This component runs *only* on the server (or during the build).
// 이 컴포넌트는 서버에서 (또는 빌드 중에) *단독적으로* 실행됩니다.
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  // 1. 서버에 있으므로 데이터 레이어와 대화할 수 있습니다. API 엔드포인트는 필요하지 않습니다.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  // 2. 원하는 만큼 렌더링 로직을 추가합니다. JavaScript 번들을 더 크게 만들지는 않습니다.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  // 3. 브라우저에서 실행될 컴포넌트에 데이터를 전달합니다.
  return <SearchableVideoList videos={videos} />;
}

Next.js’s App Router also integrates data fetching with Suspense. This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: Next.js의 App Router는 데이터 페칭과 Suspense를 통합하기도 합니다. 이를 통해 사용자 인터페이스의 여러 부분에 대한 로딩 state(예: 스켈레톤 placeholder)를 React 트리에서 직접 지정할 수 있습니다.

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

Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. 서버 컴포넌트와 Suspense는 Next.js 기능이 아닌 React 기능입니다. 그러나 프레임워크 수준에서 이를 채택하려면 동의를 구하고 사소한 구현 작업이 필요합니다. 현재로서는 Next.js 앱 라우터가 가장 완벽하게 구현되어 있습니다. React팀은 차세대 프레임워크에서 이러한 기능을 더 쉽게 구현할 수 있도록 번들러 개발자와 협력하고 있습니다.