React + ⍺
The library for web and native user interfaces
웹 및 네이티브 UI를 위한 라이브러리
Create user interfaces from components
컴포넌트로 사용자 인터페이스를 생성하세요
React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.
React를 사용하면 컴포넌트라고 불리는 조각들로 사용자 인터페이스를 만들 수 있습니다.Thumbnail, LikeButton, Video와 같은 자신만의 React 컴포넌트를 만들어 보세요. 그런 다음 전체 화면, 페이지, 앱 등에 결합해 보세요.
Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.
혼자서 작업하든, 수천 명의 다른 개발자와 함께 작업하든, React를 사용하는 느낌은 동일합니다. 개인, 팀, 조직에서 작성한 컴포넌트를 원활하게 결합할 수 있도록 설계되었습니다.
Write components with code and markup
코드와 마크업으로 컴포넌트를 작성하세요
React components are JavaScript functions. Want to show some content conditionally? Use an if statement. Displaying a list? Try array map(). Learning React is learning programming.
React 컴포넌트는 JavaScript 함수입니다. 일부 콘텐츠를 조건부로 표시하고 싶나요? if 문을 사용하세요. 목록을 표시하고 싶나요? 배열의 map()을 사용하세요. React를 배우는 것은 프로그래밍을 배우는 것입니다.
This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.
이 마크업 구문을 JSX라고 합니다. 이는 React에서 대중화된 JavaScript 구문 확장입니다. JSX 마크업을 관련 렌더링 로직과 가까이 두면, React 컴포넌트를 쉽게 생성, 유지, 삭제할 수 있습니다.
Add interactivity wherever you need it
필요한 곳에 상호작용 요소를 추가하세요
React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.
React 컴포넌트는 데이터를 받아 화면에 표시되어야 할 내용을 반환합니다. 입력란에 타이핑하는 것과 같은 상호작용을 통해 새로운 데이터를 전달하면, React는 새로운 데이터와 일치하도록 화면을 업데이트 합니다.
You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.
전체 페이지를 React로 빌드할 필요는 없습니다. React를 기존 HTML 페이지에 추가하고, 어디서나 상호작용하는 React 컴포넌트를 렌더링하세요.
Go full-stack with a framework
프레임워크로 풀스택 하세요
React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.
React는 라이브러리입니다. 컴포넌트를 조합할 수는 있지만, 라우팅 및 데이터 페칭 방법을 규정하지는 않습니다. React로 전체 앱을 빌드하려면 Next.js나Remix와 같은 풀스택 React 프레임워크를 사용하는 것이 좋습니다.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 Videos
React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.
React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크를 사용하면 서버에서 실행되는 비동기 컴포넌트에서, 또는 빌드 도중에도 데이터를 가져올 수 있습니다. 파일이나 데이터베이스에서 데이터를 읽어와 인터랙티브한 컴포넌트에 전달할 수 있습니다.
Use the best from every platform
모든 플랫폼에서 최고를 사용하세요
People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.
사람들은 다양한 이유로 웹 앱 또는 네이티브 앱을 선호합니다. React는 동일한 기술을 사용하여 웹 앱과 네이티브 앱을 모두 만들 수 있습니다. 각 플랫폼의 강점을 활용하여 모든 플랫폼에 적합한 인터페이스를 구현할 수 있습니다.
Stay true to the web
웹에 충실하기
People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.
사람들은 웹 앱 페이지가 빠르게 로드되기를 기대합니다. 서버에서 React를 사용하면 데이터를 가져오는 동안 HTML 스트리밍을 시작하여, JavaScript 코드가 로드되기 전에 나머지 콘텐츠를 점진적으로 채울 수 있습니다. 클라이언트에서 React는 표준 웹 API를 사용해 렌더링 중에도 UI를 반응 가능한 상태로 유지할 수 있습니다.
Go truly native
진정한 네이티브 앱
People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform.
사람들은 네이티브 앱이 해당 플랫폼과 같은 모양과 느낌을 주기를 기대합니다. React Native 와 Expo 를 사용하면 Android, iOS 등을 위한 앱을 React로 만들 수 있습니다. UI가 네이티브이기 때문에 네이티브처럼 보이고 느껴집니다. React 컴포넌트는 웹 뷰가 아니라 Android 및 iOS 등의 플랫폼에서 제공하는 실제 뷰를 렌더링합니다.
With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.
React를 사용하면 웹 및 네이티브 개발자가 될 수 있습니다. 사용자 경험의 저하 없이 다양한 플랫폼으로 출시할 수 있습니다. 조직은 플랫폼의 경계를 극복하고 전체 기능을 온전히 소유하는 팀을 구성할 수 있습니다.
Upgrade when the future is ready
새로운 기능이 준비되면 업그레이드하세요
React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.
React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명 이상의 사용자가 있는 비즈니스의 크리티컬한 영역에서 테스트 됩니다. Meta에서는 100,000개 이상의 React 컴포넌트가 모든 마이그레이션 전략을 검증합니다.
The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.
React 팀은 항상 React를 개선하는 방법을 연구합니다. 어떤 연구는 몇 년이 걸리기도 합니다. React는 연구 아이디어를 제품에 적용하는 데에 높은 기준을 가지고 있습니다. 검증된 접근 방식만이 React의 일부가 됩니다.
Join a community of millions
수백만 명의 커뮤니티에 참여하세요
You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
여러분은 혼자가 아닙니다. 매 달 전 세계 200만 명의 개발자가 React 문서를 방문합니다. React는 모든 사람들과 팀이 동의할 수 있는 것입니다.
This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
이것이 바로 React가 라이브러리, 아키텍처, 심지어 에코시스템 그 이상인 이유입니다. React는 커뮤니티입니다. 도움을 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 곳입니다. 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, 교사와 학생을 만날 수 있습니다. 저마다 배경은 다를 수 있지만, React를 통해 모두 함께 사용자 인터페이스를 만들 수 있습니다.