diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 327466732..96229a467 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,9 +16,9 @@ React 문서 기여에 관심을 가져주셔서 감사합니다! 이 문서는 다양한 학습 스타일과 사용 사례를 고려하여 분할되어 있습니다. 본문을 수정할 때는 주변 글의 톤Tone과 스타일Style에 맞게 작성하도록 주의하세요. 새로운 글을 작성할 때는 같은 섹션에 있는 다른 글들과 톤을 맞추도록 하세요. 각 섹션의 의도와 동기는 아래에서 확인할 수 있습니다. -**[React 학습](https://ko.react.dev/learn)** 섹션은 기초 개념을 단계별로 소개하기 위해 만들어졌습니다. 여기서 제공되는 글들은 이전에 설명된 지식을 바탕으로 하므로, 글 간 앞뒤 개념이 중복되거나 꼬이지 않도록 주의하세요. 독자는 첫 번째 글부터 마지막 글까지 순서대로 읽으며 개념을 익힐 수 있어야 하며, 추가 설명을 위해 미리 앞선 개념들을 살펴보지 않도록 해야 합니다. 이런 이유로 상태State는 이벤트Event보다 먼저 설명되고, 'React로 사고하기' 파트에서 `ref`를 사용하지 않는 등 특정 순서가 정해져 있습니다. 동시에 'React 학습'은 React 개념에 대한 참고 자료 역할을 하므로, 개념들에 대한 정의와 상호 관계를 엄격하게 다루어야 합니다. +**[React 학습하기](https://ko.react.dev/learn)** 섹션은 기초 개념을 단계별로 소개하기 위해 만들어졌습니다. 여기서 제공되는 글들은 이전에 설명된 지식을 바탕으로 하므로, 글 간 앞뒤 개념이 중복되거나 꼬이지 않도록 주의하세요. 독자는 첫 번째 글부터 마지막 글까지 순서대로 읽으며 개념을 익힐 수 있어야 하며, 추가 설명을 위해 미리 앞선 개념들을 살펴보지 않도록 해야 합니다. 이런 이유로 상태State는 이벤트Event보다 먼저 설명되고, 'React로 사고하기' 파트에서 `ref`를 사용하지 않는 등 특정 순서가 정해져 있습니다. 동시에 'React 학습하기'는 React 개념에 대한 참고 자료 역할을 하므로, 개념들에 대한 정의와 상호 관계를 엄격하게 다루어야 합니다. -**[API 레퍼런스](https://ko.react.dev/reference/react)** 섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습'에서 간단히 다뤘거나 생략한 예외 사항Edge Cases 혹은 권장 사항Recommendations은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다. +**[API 참고서](https://ko.react.dev/reference/react)** 섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습하기'에서 간단히 다뤘거나 생략한 예외 사항Edge Cases 혹은 권장 사항Recommendations은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다. **스스로 작성한 지침Instructions을 실천해 보세요.** diff --git a/public/.well-known/atproto-did b/public/.well-known/atproto-did new file mode 100644 index 000000000..a73fe2232 --- /dev/null +++ b/public/.well-known/atproto-did @@ -0,0 +1 @@ +did:plc:uorpbnp2q32vuvyeruwauyhe diff --git a/public/images/docs/diagrams/prerender.dark.png b/public/images/docs/diagrams/prerender.dark.png new file mode 100644 index 000000000..1e7d67e13 Binary files /dev/null and b/public/images/docs/diagrams/prerender.dark.png differ diff --git a/public/images/docs/diagrams/prerender.png b/public/images/docs/diagrams/prerender.png new file mode 100644 index 000000000..ababa5493 Binary files /dev/null and b/public/images/docs/diagrams/prerender.png differ diff --git a/public/images/docs/diagrams/prewarm.dark.png b/public/images/docs/diagrams/prewarm.dark.png new file mode 100644 index 000000000..461406039 Binary files /dev/null and b/public/images/docs/diagrams/prewarm.dark.png differ diff --git a/public/images/docs/diagrams/prewarm.png b/public/images/docs/diagrams/prewarm.png new file mode 100644 index 000000000..f6ec1c49d Binary files /dev/null and b/public/images/docs/diagrams/prewarm.png differ diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 5f2330e7e..68e9cf7ec 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -30,7 +30,7 @@ export const DocsPageFooter = memo(
{prevRoute?.path ? ( @@ -40,7 +40,7 @@ export const DocsPageFooter = memo( {nextRoute?.path ? ( @@ -63,7 +63,7 @@ function FooterLink({ }: { href: string; title: string; - type: 'Previous' | 'Next'; + type: '이전' | '다음'; }) { return (
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx new file mode 100644 index 000000000..6645152dd --- /dev/null +++ b/src/components/Icon/IconBsky.tsx @@ -0,0 +1,24 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconBsky = memo(function IconBsky( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 0bb562754..ed5324d45 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -8,6 +8,7 @@ import cn from 'classnames'; import {ExternalLink} from 'components/ExternalLink'; import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle'; import {IconTwitter} from 'components/Icon/IconTwitter'; +import {IconBsky} from 'components/Icon/IconBsky'; import {IconGitHub} from 'components/Icon/IconGitHub'; export function Footer() { @@ -335,7 +336,7 @@ export function Footer() { 커뮤니티 - Code of Conduct + 행동 강령 팀 소개 @@ -366,6 +367,12 @@ export function Footer() { className={socialLinkClasses}> + + + - API 레퍼런스 + API 참고서
@@ -174,11 +174,11 @@ export function HomeContent() {
사용자 인터페이스 만들기 - React를 사용하면 컴포넌트라고 불리는 조각들을 사용하여 사용자 + React를 사용하면 컴포넌트라 불리는 조각들을 사용하여 사용자 인터페이스를 만들 수 있습니다. Thumbnail,{' '} LikeButton, 그리고 Video 같은 컴포넌트를 - 만들 수 있습니다. 그런 다음 전체 화면, 페이지 및 앱에서 이들을 - 결합할 수 있습니다. + 만들어 보세요. 그런 다음 전체 화면, 페이지 및 앱에서 이들을 결합할 + 수 있습니다. @@ -200,10 +200,10 @@ export function HomeContent() {
컴포넌트 작성하기 - React 컴포넌트는 JavaScript 함수입니다. 조건부로 내용을 표시하려면{' '} - if 문을 사용할 수 있습니다. 목록을 표시하려면 배열에{' '} - map()을 사용할 수 있습니다. React를 배우는 것은 - 프로그래밍을 배우는 것입니다. + React 컴포넌트는 자바스크립트 함수입니다. 조건부로 내용을 + 표시하려면 if 문을 사용할 수 있습니다. 목록을 + 표시하려면 배열에 map()을 사용할 수 있습니다. React를 + 배우는 것은 프로그래밍을 배우는 것입니다. @@ -211,9 +211,9 @@ export function HomeContent() {
- 이 마크업 구문을 JSX 라고 부릅니다. 이것은 React에 의해서 대중화된 - JavaScript 구문의 확장입니다. JSX 마크업을 관련된 렌더링 로직과 - 가까이 두면, React 컴포넌트를 쉽게 만들고 유지하고 삭제할 수 + 이 마크업 구문을 JSX라 부릅니다. 이것은 React에 의해서 대중화된 + 자바스크립트 구문의 확장입니다. JSX 마크업을 관련된 렌더링 로직과 + 가까이 두면, React 컴포넌트를 쉽게 만들고 관리하고 삭제할 수 있습니다.
@@ -238,7 +238,7 @@ export function HomeContent() {
전체 페이지를 React로 빌드할 필요는 없습니다. React를 기존 HTML - 페이지에 추가하고, 어디에서나 상호작용하는 React 컴포넌트를 + 페이지에 추가하고, 페이지 어디에서나 상호작용하는 React 컴포넌트를 렌더링할 수 있습니다.
@@ -255,13 +255,14 @@ export function HomeContent() {
- 프레임워크를 통해서 + 프레임워크를 통해
풀스택으로 만들기
- React는 라이브러리입니다. 컴포넌트를 함께 묶을 수 있지만, 라우팅과 - 데이터를 가져오는 방법을 규정하지는 않습니다. React로 앱을 - 만들려면, Next.js 또는{' '} + React는 라이브러리입니다. 컴포넌트를 조합할 수 있도록 도와주지만, + 라우팅이나 데이터를 가져오는 방법을 규정하지는 않습니다. React로 + 완전한 앱을 만들려면,{' '} + Next.js 또는{' '} Remix 같은 풀스택 React 프레임워크를 추천합니다. @@ -271,10 +272,11 @@ export function HomeContent() {
- React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크를 사용하면 - 서버에서 실행되는 비동기 컴포넌트에서 또는 빌드 도중에 데이터를 - 가져올 수 있습니다. 파일이나 데이터베이스에서 데이터를 읽고, 이를 - 상호작용하는 컴포넌트로 전달할 수 있습니다. + React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크는 서버에서 + 실행되는 비동기 컴포넌트 혹은 빌드 중에 실행되는 비동기 + 컴포넌트에서 데이터를 가져올 수 있도록 합니다. 파일이나 + 데이터베이스에서 데이터를 읽고, 이를 상호작용하는 컴포넌트에 + 전달할 수 있습니다.
사람들은 다양한 이유로 웹과 네이티브 앱을 좋아합니다. React는 동일한 기술을 사용하여 웹 앱과 네이티브 앱을 모두 만들 수 - 있습니다. 각 플랫폼에 강점을 활용하여 모든 플랫폼에서 적합한 + 있습니다. 각 플랫폼의 장점을 활용하여 모든 플랫폼에서 적합한 인터페이스를 구현할 수 있습니다.
@@ -311,12 +313,12 @@ export function HomeContent() { 웹에 충실하기

- 사람들은 웹이 빠르게 로드되길 기대합니다. 서버에서 + 사람들은 웹 앱이 빠르게 로드되길 기대합니다. 서버에서 React를 사용하면 데이터를 가져오는 동안 HTML을 - 스트리밍하여 JavaScript 코드가 로드되기 전에 남은 내용을 - 점진적으로 채울 수 있습니다. 클라이언트에서 React는 표준 - web API를 사용하여 렌더링 중에도 UI를 반응적으로 유지할 - 수 있습니다. + 스트리밍하여 자바스크립트 코드가 로드되기 전에 남은 + 내용을 점진적으로 채울 수 있습니다. 클라이언트에서 + React는 표준 웹 API를 사용하여 렌더링 중에도 UI를 + 반응하도록 유지할 수 있습니다.

@@ -394,21 +396,22 @@ export function HomeContent() {

- 네이티브에서 사용하기 + 진정한 네이티브에서 사용하기

- 사람들은 네이티브 앱이 플랫폼과 같은 모양처럼 - 느껴지기를 원합니다.{' '} + 사람들은 네이티브Native 앱이 해당 플랫폼의 + 모습과 느낌을 갖기를 기대합니다.{' '} React Native 와{' '} Expo - 를 사용하면 React를 통하여 Android, iOS 등을 위한 앱을 - 빌드할 수 있습니다. UI들이 native이기 때문에 진짜 - native처럼 보입니다. 이것은 web view가 아닙니다. React - 컴포넌트들은 실제 Android, iOS 플랫폼에서 제공하는 - view를 렌더링합니다. + 를 사용하면 React를 통해 Android, iOS 등을 위한 앱을 + 빌드할 수 있습니다. UI가 진정한 네이티브이기 때문에 + 네이티브처럼 보이고 느껴집니다. 이것은 웹 뷰 + Web View가 아닙니다. React 컴포넌트들은 + 실제 Android, iOS 플랫폼에서 제공하는 뷰 + View를 렌더링합니다.

@@ -441,9 +444,9 @@ export function HomeContent() {
업그레이드 하기 - React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명 - 이상의 사용자가 있는 비즈니스에 크리티컬한 영역에서 테스트 - 됩니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든 + React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억명 + 이상의 사용자가 있는 비즈니스의 크리티컬한 영역에서 테스트를 + 진행합니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든 마이그레이션 전략을 검증합니다.
@@ -495,9 +498,9 @@ export function HomeContent() {
수백만 명이 있는 커뮤니티
- 여러분은 혼자가 아닙니다. 200만 명이 넘는 개발자들이 React - 문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수 있는 - 것입니다. + 여러분은 혼자가 아닙니다. 전세계의 200만 명이 넘는 개발자들이 + React 문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수 + 있는 것입니다.
@@ -505,12 +508,12 @@ export function HomeContent() {
- 이것이 바로 React가 라이브러리를 넘어 아키텍처, 심지어 - 에코시스템 그 이상인 이유입니다. React는 커뮤니티입니다. - 도움을 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 - 곳입니다. 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, - 교사와 학생을 만날 수 있습니다. 모두의 배경은 다를 수 있지만, - React를 통해 함께 사용자 인터페이스를 만들 수 있습니다. + 이것이 바로 React가 단순한 라이브러리, 아키텍처, 혹은 생태계 + 그 이상인 이유입니다. React는 바로 커뮤니티입니다. 도움을 + 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 곳입니다. + 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, 교사와 + 학생을 만날 수 있습니다. 배경은 모두 다를 수 있지만, React를 + 통해 함께 사용자 인터페이스를 만들 수 있습니다.
@@ -528,7 +531,7 @@ export function HomeContent() {
React 커뮤니티에 -
오신 것을 환영합니다. +
오신 것을 환영합니다
- 레퍼런스 + API 참고서 커뮤니티 @@ -408,20 +408,20 @@ export default function TopNav({
- Learn + 학습하기 - Reference + API 참고서 - Community + 커뮤니티 - Blog + 블로그
-
+
+
{text}
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 29116c1b1..d643f98e7 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -71,7 +71,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { {isDeepDive && ( <> - Deep Dive + 자세히 살펴보기 )} {isExample && ( diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index eaf74187e..e1b9198d8 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import Image from 'next/image'; import {IconTwitter} from '../Icon/IconTwitter'; import {IconThreads} from '../Icon/IconThreads'; +import {IconBsky} from '../Icon/IconBsky'; import {IconGitHub} from '../Icon/IconGitHub'; import {ExternalLink} from '../ExternalLink'; import {H3} from './Heading'; @@ -19,6 +20,7 @@ interface TeamMemberProps { photo: string; twitter?: string; threads?: string; + bsky?: string; github?: string; personal?: string; } @@ -33,6 +35,7 @@ export function TeamMember({ github, twitter, threads, + bsky, personal, }: TeamMemberProps) { if (name == null || title == null || permalink == null || children == null) { @@ -62,11 +65,11 @@ export function TeamMember({ {title &&
{title}
} {children} -
+
{twitter && (
@@ -77,7 +80,7 @@ export function TeamMember({ {threads && (
@@ -85,6 +88,17 @@ export function TeamMember({
)} + {bsky && ( +
+ + + {bsky} + +
+ )} {github && (
`](/reference/react/Suspense) 같은 내장 컴포넌트 @@ -610,7 +610,7 @@ button { display: block; margin-top: 10px; } 또한 몇몇 API 페이지는 (일반적인 문제에 대한) [트러블슈팅](/reference/react/useEffect#troubleshooting)과 (더 이상 사용하지 않는 API와 관련된) [대안](/reference/react-dom/findDOMNode#alternatives)을 포함하고 있습니다. -이러한 접근 방식이 API 레퍼런스를 단순히 인자를 찾는 용도뿐만 아니라, 각 API가 어떤 다양한 작업을 수행할 수 있는지, 어떻게 다른 API와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다. +이러한 접근 방식이 API 참고서를 단순히 인자를 찾는 용도뿐만 아니라, 각 API가 어떤 다양한 작업을 수행할 수 있는지, 어떻게 다른 API와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다. ## 다음은 무엇인가요? {/*whats-next*/} diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 4e03c9e4c..8783421d1 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -536,6 +536,24 @@ When double rendering in Strict Mode in development, `useMemo` and `useCallback` As with all Strict Mode behaviors, these features are designed to proactively surface bugs in your components during development so you can fix them before they are shipped to production. For example, during development, Strict Mode will double-invoke ref callback functions on initial mount, to simulate what happens when a mounted component is replaced by a Suspense fallback. +### Improvements to Suspense {/*improvements-to-suspense*/} + +In React 19, when a component suspends, React will immediately commit the fallback of the nearest Suspense boundary without waiting for the entire sibling tree to render. After the fallback commits, React schedules another render for the suspended siblings to "pre-warm" lazy requests in the rest of the tree: + + + +Previously, when a component suspended, the suspended siblings were rendered and then the fallback was committed. + + + + + +In React 19, when a component suspends, the fallback is committed and then the suspended siblings are rendered. + + + +This change means Suspense fallbacks display faster, while still warming lazy requests in the suspended tree. + ### UMD builds removed {/*umd-builds-removed*/} UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process. diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md new file mode 100644 index 000000000..ff45fa54d --- /dev/null +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -0,0 +1,126 @@ +--- +title: "React Compiler Beta Release" +author: Lauren Tan +date: 2024/10/21 +description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler. + +--- + +October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). + +--- + + + +The React team is excited to share new updates: + + + +1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback. +2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package. +3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler. + +--- + +At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler). + +Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. + +In this post, we want to share what's next for React Compiler. + +## Try React Compiler Beta today {/*try-react-compiler-beta-today*/} + +At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag. + +To install React Compiler Beta: + + +npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +Or, if you're using Yarn: + + +yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here: + + + +## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} + +React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. + +To install the linter only: + + +npm install -D eslint-plugin-react-compiler@beta + + +Or, if you're using Yarn: + + +yarn add -D eslint-plugin-react-compiler@beta + + +After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. + +## Backwards Compatibility {/*backwards-compatibility*/} + +React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18). + +## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} + +Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library. + +React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm. + +Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. + +[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) + +## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} + +We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. + +From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). + +The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. + +## React Compiler at Meta {/*react-compiler-at-meta*/} + +At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components. + +We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us. + +We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization. + +## Roadmap to Stable {/*roadmap-to-stable*/} + +*This is not a final roadmap, and is subject to change.* + +We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin. + +* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. +* ✅ Public Beta: Available today, for feedback from the wider community. +* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. +* 🚧 General Availability: After final feedback period from the community. + +These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed. + +Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. + +Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post. + +--- + +Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post. + +--- + +[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. + +[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. + +[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index c70b1750a..d51fab276 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,6 +10,12 @@ title: React 블로그
+ + +We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... + + + Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ... diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index 7edf63974..5726771b3 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -4,7 +4,7 @@ title: 감사의 말 -React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어졌습니다. 오늘날 React에는 [작업을 전담하는 전임 팀](/community/team)과 천여 명이 넘는 [오픈 소스 기여자들](https://github.com/facebook/react/blob/main/AUTHORS)이 있습니다. +React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어졌습니다. 오늘날 React에는 [작업을 전담하는 전임 팀](/community/team)과 천여 명이 넘는 [오픈 소스 기여자들](https://github.com/facebook/react/graphs/contributors)이 있습니다. diff --git a/src/content/community/team.md b/src/content/community/team.md index 6004476e2..b11925407 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -18,7 +18,7 @@ Current members of the React team are listed in alphabetical order below. Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day. - + Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. @@ -38,11 +38,11 @@ Current members of the React team are listed in alphabetical order below. Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family. - + Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking. - + Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda. @@ -62,7 +62,7 @@ Current members of the React team are listed in alphabetical order below. Noah’s interest in UI programming sparked during his education in music technology at NYU. At Meta, he's worked on internal tools, browsers, web performance, and is currently focused on React. Outside of work, Noah can be found tinkering with synthesizers or spending time with his cat. - + Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template. diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index c79c0d7f7..37852b95c 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -4,57 +4,57 @@ title: 기존 프로젝트에 React 추가하기 -기존 프로젝트와 일부 상호작용 요소를 추가하고 싶다면, React에 프로젝트를 다시 작성할 필요가 없습니다. 기존의 스택에 React를 추가하고 어디에서나 상호작용할 수 있는 React 컴포넌트를 렌더링하세요. +기존 프로젝트에 상호작용 요소를 일부 추가하고 싶다면, React로 다시 작성할 필요가 없습니다. 기존 스택에 React를 추가하고 상호작용할 수 있는 React 컴포넌트를 어디에서나 렌더링하세요. -**로컬 개발환경에 [Node.js](https://nodejs.org/en/)를 설치해야 합니다.** 온라인에서 [try React](/learn/installation#try-react)를 실행하거나 간단한 HTML에서도 React를 사용할 수 있지만, 현실적으로 개발을 위해 사용하는 대부분의 JavaScript 도구는 Node.js가 필요합니다. +**로컬 개발 환경에 [Node.js](https://nodejs.org/en/)를 설치해야 합니다.** 온라인에서 [React](/learn/installation#try-react)를 시도하거나 간단한 HTML에서 React를 사용할 수도 있지만, 현실적인 개발을 위해 사용하는 대부분의 자바스크립트 도구에는 Node.js가 필요합니다. -## 기존 웹사이트의 전체 하위 경로에 React 사용하기 {/*using-react-for-an-entire-subroute-of-your-existing-website*/} +## 기존 웹사이트의 하위 경로 전체에 React 사용하기 {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -`example.com`이라는 또 다른 서버 기술 (Rails와 같은) 로 빌드한 기존 웹 앱이 있고, `example.com/some-app/`으로 시작하는 모든 경로를 React로 완전히 구현하고 싶다고 가정해 보겠습니다. +`example.com`이라는 또 다른 서버 기술(Rails와 같은)로 빌드한 기존 웹 앱이 있고, `example.com/some-app/`으로 시작하는 모든 경로를 React로 완전히 구현하고 싶다고 가정하겠습니다. 다음과 같이 설정하는 것을 추천합니다. 1. [React 기반 프레임워크](/learn/start-a-new-react-project) 중 하나를 사용하여 **앱의 React 부분을 빌드하세요.** -2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*로 명시하세요.** (방법은 다음과 같습니다. [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)) -3. **서버 또는 프록시를 구성**하여 `/some-app/` 아래의 모든 요청이 React 애플리케이션에서 처리되도록 하세요. +2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로**Base Path*로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!) +3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 애플리케이션에서 처리되도록 하세요. -이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) +이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들Best Practices로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) -많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 JavaScript를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby의 경우 기본값)를 `/some-app/`에서 대신 제공하세요. +많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 자바스크립트를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby의 경우 기본값)를 `/some-app/`에서 대신 제공하세요. ## 기존 페이지의 일부분에 React 사용하기 {/*using-react-for-a-part-of-your-existing-page*/} -이미 다른 기술(Rails와 같은 서버 기술 또는 Backbone과 같은 클라이언트 기술)로 빌드된 기존 페이지가 있고 해당 페이지 어딘가에 상호작용할 수 있는 React 컴포넌트를 렌더링하고 싶다고 가정해 봅시다. 이는 React 컴포넌트를 통합하는 일반적인 방식입니다.-- 실제로 수년 동안 Meta에서 대부분의 React 사용을 이런 식으로 하였습니다! +이미 다른 기술(Rails와 같은 서버 기술 또는 Backbone과 같은 클라이언트 기술)로 빌드된 기존 페이지가 있고, 해당 페이지 어딘가에 상호작용할 수 있는 React 컴포넌트를 렌더링하고 싶다고 가정하겠습니다. 이는 React 컴포넌트를 통합하는 일반적인 방식입니다. 실제로 수년 동안 Meta에서 대부분의 React 사용을 이런 식으로 하였습니다! 이 방식은 두 가지 단계로 수행할 수 있습니다. -1. [JSX 문법](/learn/writing-markup-with-jsx)을 사용할 수 있게 **JavaScript 환경을 설정**하고 [`import`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export) 문법을 통해 코드를 모듈로 분리한 다음 [npm](https://www.npmjs.com/) 패키지 레지스트리의 패키지(예시: React)를 사용하세요. +1. [JSX 구문](/learn/writing-markup-with-jsx)을 사용할 수 있게 **자바스크립트 환경을 설정**하고, [`import`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export) 구문을 통해 코드를 모듈로 분리한 다음, [npm](https://www.npmjs.com/) 패키지 레지스트리에서 패키지(예시: React)를 사용하세요. -2. 해당 페이지에서 보고 싶은 곳에 **React 컴포넌트를 렌더링하세요.** +2. 해당 페이지에서 원하는 위치에 **React 컴포넌트를 렌더링하세요.** 정확한 접근 방식은 기존 페이지의 설정에 따라 다르기 때문에, 몇 가지 세부 사항을 함께 살펴보겠습니다. -### 1단계 : 모듈 JavaScript 환경 설정하기 {/*step-1-set-up-a-modular-javascript-environment*/} +### 1단계: 모듈 자바스크립트 환경 설정하기 {/*step-1-set-up-a-modular-javascript-environment*/} -모듈 JavaScript 환경은 모든 코드를 한 파일에 작성하는 것이 아닌 각각의 React 컴포넌트를 개별 파일로 작성할 수 있게 합니다. 또한 React 자체를 포함한 다른 개발자들이 [npm](https://www.npmjs.com/) 레지스트리에 배포한 모든 훌륭한 패키지들을 사용할 수 있습니다. 이 방법은 기존 설정에 따라 다르게 진행될 것입니다. +모듈 자바스크립트 환경은 모든 코드를 한 파일에 작성하는 것이 아닌, 각각의 React 컴포넌트를 개별 파일로 작성할 수 있게 합니다. 또한 (React 자체를 포함한) 다른 개발자들이 [npm](https://www.npmjs.com/) 레지스트리에 배포한 훌륭한 패키지들을 모두 사용할 수 있습니다. 이 작업을 수행하는 방법은 기존 설정에 따라 다릅니다. -* **이미 애플리케이션이 `import` 문법을 이용해 파일로 분리하고 있다면** 기존에 가지고 있는 설정을 이용해 보세요. JS 코드에서 `
`를 작성하면 문법 오류가 발생하는지 확인해 보세요. 문법 오류가 발생한다면 [Babel을 이용한 JavaScript 코드 변환](https://babeljs.io/setup)이 필요할 수 있으며 JSX를 사용하려면 [Babel React 프리셋](https://babeljs.io/docs/babel-preset-react)을 활성화해야 할 수 있습니다. +* **이미 애플리케이션이 `import` 문을 이용해 파일로 분리하고 있다면** 기존에 가지고 있는 설정을 이용해 보세요. JS 코드에서 `
`를 작성하면 문법 오류가 발생하는지 확인해 보세요. 문법 오류가 발생한다면 [Babel을 이용한 자바스크립트 코드 변환](https://babeljs.io/setup)이 필요할 수 있으며, JSX를 사용하려면 [Babel React 프리셋](https://babeljs.io/docs/babel-preset-react)을 활성화해야 할 수도 있습니다. -* **애플리케이션이 JavaScript 모듈을 컴파일하기 위한 기존 설정이 없다면,** [Vite](https://vitejs.dev/)를 이용하여 설정하세요. Vite 커뮤니티는 Rails, Django, Laravel을 포함한 [다양한 백엔드 프레임워크와의 통합](https://github.com/vitejs/awesome-vite#integrations-with-backends)을 지원하고 있습니다. 사용 중인 백엔드 프레임워크가 목록에 없다면 [이 가이드를 참고하여](https://vitejs.dev/guide/backend-integration.html) Vite 빌드를 백엔드와 수동으로 통합하세요. +* **애플리케이션이 자바스크립트 모듈을 컴파일하기 위한 기존 설정이 없다면,** [Vite](https://vitejs.dev/)를 이용하여 설정하세요. Vite 커뮤니티는 Rails, Django, Laravel을 포함한 [다양한 백엔드 프레임워크와의 통합](https://github.com/vitejs/awesome-vite#integrations-with-backends)을 지원하고 있습니다. 사용 중인 백엔드 프레임워크가 목록에 없다면 [가이드를 참고하여](https://vitejs.dev/guide/backend-integration.html) Vite 빌드를 백엔드와 수동으로 통합하세요. -설정이 제대로 작동하는지 확인하려면 프로젝트 폴더에서 아래 커맨드를 실행하세요. +설정이 제대로 동작하는지 확인하려면 프로젝트 폴더에서 아래 명령어를 실행하세요. npm install react react-dom -그리고 메인 JavaScript 파일(`index.js` 혹은 `main.js`라고 불리는 파일일 수 있습니다.)의 최상단에 다음 코드 라인을 추가하세요. +그리고 메인 자바스크립트 파일(`index.js` 혹은 `main.js`라는 파일일 수 있습니다.)의 최상단에 다음 코드 라인을 추가하세요. @@ -81,17 +81,18 @@ root.render(

Hello, world

); -페이지의 전체 내용이 "Hello, world!"로 바뀌었다면 모든 것이 정상적으로 작동하고 있는 겁니다! 계속해서 읽어보세요. +페이지의 전체 내용이 "Hello, world!"로 바뀌었다면 모든 것이 정상적으로 동작하고 있는 겁니다! 계속해서 읽어보세요. -처음으로 기존 프로젝트에 모듈 JavaScript 환경을 통합하기는 다소 어려워 보일 수 있으나 그만한 가치가 있는 일입니다! 어려움을 겪는 부분이 있다면 우리의 [커뮤니티 리소스](/community)나 [Vite 채팅](https://chat.vitejs.dev/)을 이용해 보세요. +처음으로 기존 프로젝트에 모듈 자바스크립트 환경을 통합하기는 다소 어려워 보일 수 있으나, 그만한 가치가 있는 일입니다! 어려움을 겪는 부분이 있다면 [커뮤니티 리소스](/community)나 [Vite 채팅](https://chat.vitejs.dev/)을 이용해 보세요. -### 2단계 : 페이지 어디에서든 React 컴포넌트 렌더링하기 {/*step-2-render-react-components-anywhere-on-the-page*/} -이전 단계에서는, 메인 파일 최상단에 이 코드를 넣었습니다. +### 2단계: 페이지 어디에서든 React 컴포넌트 렌더링하기 {/*step-2-render-react-components-anywhere-on-the-page*/} + +이전 단계에서는, 메인 파일 최상단에 아래 코드를 넣었습니다. ```js import { createRoot } from 'react-dom/client'; @@ -108,7 +109,7 @@ root.render(

Hello, world

); 이 코드를 삭제하세요. -대신 React 컴포넌트를 HTML의 특정 위치에 렌더링하고 싶을 것입니다. HTML 페이지를 열고(또는 이를 생성하는 서버 템플릿) HTML 태그에 고유한 `id` 어트리뷰트를 추가하세요. +대신 React 컴포넌트를 HTML의 특정 위치에 렌더링하고 싶을 것입니다. HTML 페이지를 열고(또는 이를 생성하는 서버 템플릿) HTML 태그에 고유한 [`id`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/id) 어트리뷰트를 추가하세요. ```html @@ -116,7 +117,7 @@ root.render(

Hello, world

); ``` -이렇게 하면 [`document.getElementById`](https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById)로 HTML 엘리먼트를 찾아서 [`createRoot`](/reference/react-dom/client/createRoot)에 전달함으로써 해당 요소 내부에 React 컴포넌트를 렌더링할 수 있습니다. +이렇게 하면 [`document.getElementById`](https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById)로 HTML 엘리먼트를 찾아 [`createRoot`](/reference/react-dom/client/createRoot)에 전달함으로써 해당 요소 내부에 React 컴포넌트를 렌더링할 수 있습니다. @@ -147,10 +148,10 @@ root.render(); -기존에 존재하던 'index.html'의 원본 HTML 컨텐츠가 그대로 남아있는 것을 확인할 수 있습니다. 하지만 이제는 `