diff --git a/.claude/skills/docs-writer-blog/SKILL.md b/.claude/skills/docs-writer-blog/SKILL.md index ef28225f8..baa21c34d 100644 --- a/.claude/skills/docs-writer-blog/SKILL.md +++ b/.claude/skills/docs-writer-blog/SKILL.md @@ -159,7 +159,7 @@ See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for s ### React {/*react*/} -* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor)) +* Add `useNewHook` for [purpose]. ([#12345](https://github.com/react/react/pull/12345) by [@contributor](https://github.com/contributor)) --- @@ -603,7 +603,7 @@ npm install react@latest react-dom@latest | Type | Pattern | |------|---------| -| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` | +| GitHub PR | `[#12345](https://github.com/react/react/pull/12345)` | | GitHub user | `[@username](https://github.com/username)` | | Twitter/X | `[@username](https://x.com/username)` | | Bluesky | `[Name](https://bsky.app/profile/handle)` | @@ -623,8 +623,8 @@ For more information, see the docs for [`useActionState`](/reference/react/useAc ### Bullet Pattern ```markdown -* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/facebook/react/pull/10426) by [@acdlite](https://github.com/acdlite)) -* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/react/react/pull/10426) by [@acdlite](https://github.com/acdlite)) +* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) ``` **Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))` diff --git a/.claude/skills/react-expert/SKILL.md b/.claude/skills/react-expert/SKILL.md index 5ebcdee37..c252f6ce0 100644 --- a/.claude/skills/react-expert/SKILL.md +++ b/.claude/skills/react-expert/SKILL.md @@ -32,7 +32,7 @@ This skill produces exhaustive documentation research on any React API or concep 2. **React Source Code** - Warnings, errors, implementation details 3. **Git History** - Commit messages with context 4. **GitHub PRs & Comments** - Design rationale (via `gh` CLI) -5. **GitHub Issues** - Confusion/questions (facebook/react + reactjs/react.dev) +5. **GitHub Issues** - Confusion/questions (react/react + reactjs/react.dev) 6. **React Working Group** - Design discussions for newer APIs 7. **Flow Types** - Source of truth for type signatures 8. **TypeScript Types** - Note discrepancies with Flow @@ -51,7 +51,7 @@ First, ensure the React repo is available locally: if [ -d ".claude/react" ]; then cd .claude/react && git pull origin main else - git clone --depth=100 https://github.com/facebook/react.git .claude/react + git clone --depth=100 https://github.com/react/react.git .claude/react fi ``` @@ -71,8 +71,8 @@ Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skep | test-explorer | Explore | Test files for usage patterns | Search `.claude/react/packages/*/src/__tests__/` for test files mentioning the topic. Extract actual usage examples WITH file paths and line numbers. | | source-explorer | Explore | Warnings/errors in source | Search `.claude/react/packages/*/src/` for console.error, console.warn, and error messages mentioning the topic. Document trigger conditions. | | git-historian | Explore | Commit messages | Run `git log --all --grep="" --oneline -50` in `.claude/react`. Read full commit messages for context. | -| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R facebook/react --search "" --state all --limit 20`. Read key PR descriptions and comments. | -| issue-hunter | Explore | Issues showing confusion | Search issues in both `facebook/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. | +| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R react/react --search "" --state all --limit 20`. Read key PR descriptions and comments. | +| issue-hunter | Explore | Issues showing confusion | Search issues in both `react/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. | | types-inspector | Explore | Flow + TypeScript signatures | Find Flow types in `.claude/react/packages/*/src/*.js` (look for `@flow` annotations). Find TS types in `.claude/react/packages/*/index.d.ts`. Note discrepancies. | ### Step 3: Agent Prompts @@ -164,8 +164,8 @@ CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs. Your task: Find PRs that introduced or modified . -1. Run: gh pr list -R facebook/react --search "" --state all --limit 20 --json number,title,url -2. For promising PRs, read details: gh pr view -R facebook/react +1. Run: gh pr list -R react/react --search "" --state all --limit 20 --json number,title,url +2. For promising PRs, read details: gh pr view -R react/react 3. Look for: - The original RFC/motivation - Design discussions in comments @@ -189,7 +189,7 @@ CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issu Your task: Find issues that reveal common confusion about . -1. Search facebook/react: gh issue list -R facebook/react --search "" --state all --limit 20 --json number,title,url +1. Search react/react: gh issue list -R react/react --search "" --state all --limit 20 --json number,title,url 2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "" --state all --limit 20 --json number,title,url 3. For each issue, identify: - What the user was confused about @@ -199,7 +199,7 @@ Your task: Find issues that reveal common confusion about . Format your output as: ## Common Confusion ### Issue #: -**Repo:** <facebook/react or reactjs/react.dev> +**Repo:** <react/react or reactjs/react.dev> **Confusion:** <what they misunderstood> **Resolution:** <correct understanding> **Gotcha:** <if applicable> diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 63e310e0b..de2bfc362 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,6 +1,6 @@ contact_links: - name: ๐Ÿ“ƒ Bugs in React - url: https://github.com/facebook/react/issues/new/choose + url: https://github.com/react/react/issues/new/choose about: This issue tracker is not for bugs in React. Please file React issues here. - name: ๐Ÿค” Questions and Help url: https://reactjs.org/community/support.html diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..97f8d183b --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,32 @@ +name: Discord Notify + +on: + pull_request_target: + types: [opened, ready_for_review] + +permissions: {} + +jobs: + check_maintainer: + uses: react/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + notify: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + needs: check_maintainer + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml new file mode 100644 index 000000000..4cb6fbc71 --- /dev/null +++ b/.github/workflows/label_core_team_prs.yml @@ -0,0 +1,41 @@ +name: Label Core Team PRs + +on: + pull_request_target: + +permissions: {} + +env: + TZ: /usr/share/zoneinfo/America/Los_Angeles + # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout + SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 + +jobs: + check_maintainer: + uses: react/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + label: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + runs-on: ubuntu-latest + needs: check_maintainer + permissions: + # Used to add labels on issues + issues: write + # Used to add labels on PRs + pull-requests: write + steps: + - name: Label PR as React Core Team + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: ${{ github.event.number }}, + labels: ['React Core Team'] + }); diff --git a/.gitignore b/.gitignore index ff519fa0f..ea72ec699 100644 --- a/.gitignore +++ b/.gitignore @@ -51,3 +51,6 @@ public/rss.xml # worktrees .worktrees/ + +# Generated OG images (scripts/generateOgImages.mjs) +public/images/og/ diff --git a/package.json b/package.json index 2a0b678ad..7d985316c 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,11 @@ "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", "prebuild:rsc": "node scripts/buildRscWorker.mjs", +<<<<<<< HEAD "build": "yarn cache-reset && node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs", +======= + "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.mjs", +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca "lint": "next lint && eslint \"src/content/**/*.md\"", "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", @@ -54,6 +58,7 @@ "@babel/plugin-transform-modules-commonjs": "^7.18.6", "@babel/preset-react": "^7.18.6", "@mdx-js/mdx": "^2.1.3", + "@resvg/resvg-js": "^2.6.2", "@types/body-scroll-lock": "^2.6.1", "@types/classnames": "^2.2.10", "@types/debounce": "^1.2.1", @@ -108,6 +113,7 @@ "retext": "^7.0.1", "retext-smartypants": "^4.0.0", "rss": "^1.2.2", + "satori": "^0.26.0", "tailwindcss": "^3.4.1", "textlint": "^14.0.4", "textlint-filter-rule-comments": "^1.2.2", diff --git a/public/fonts/Optimistic_Display_W_Bd.ttf b/public/fonts/Optimistic_Display_W_Bd.ttf new file mode 100644 index 000000000..9d0cff450 Binary files /dev/null and b/public/fonts/Optimistic_Display_W_Bd.ttf differ diff --git a/public/fonts/Optimistic_Display_W_Md.ttf b/public/fonts/Optimistic_Display_W_Md.ttf new file mode 100644 index 000000000..3fbdb483d Binary files /dev/null and b/public/fonts/Optimistic_Display_W_Md.ttf differ diff --git a/public/images/team/gh-aurorascharff.jpg b/public/images/team/gh-aurorascharff.jpg new file mode 100644 index 000000000..10476e5e8 Binary files /dev/null and b/public/images/team/gh-aurorascharff.jpg differ diff --git a/public/images/team/gh-brentvatne.jpg b/public/images/team/gh-brentvatne.jpg new file mode 100644 index 000000000..c66a5cd6d Binary files /dev/null and b/public/images/team/gh-brentvatne.jpg differ diff --git a/public/images/team/gh-captbaritone.jpg b/public/images/team/gh-captbaritone.jpg new file mode 100644 index 000000000..0100fa16b Binary files /dev/null and b/public/images/team/gh-captbaritone.jpg differ diff --git a/public/images/team/gh-cipolleschi.png b/public/images/team/gh-cipolleschi.png new file mode 100644 index 000000000..a90bec66e Binary files /dev/null and b/public/images/team/gh-cipolleschi.png differ diff --git a/public/images/team/gh-cortinico.jpg b/public/images/team/gh-cortinico.jpg new file mode 100644 index 000000000..e806a103b Binary files /dev/null and b/public/images/team/gh-cortinico.jpg differ diff --git a/public/images/team/gh-fbmal7.jpg b/public/images/team/gh-fbmal7.jpg new file mode 100644 index 000000000..0f79e181d Binary files /dev/null and b/public/images/team/gh-fbmal7.jpg differ diff --git a/public/images/team/gh-fkgozali.jpg b/public/images/team/gh-fkgozali.jpg new file mode 100644 index 000000000..9f87e7efb Binary files /dev/null and b/public/images/team/gh-fkgozali.jpg differ diff --git a/public/images/team/gh-huntie.jpg b/public/images/team/gh-huntie.jpg new file mode 100644 index 000000000..a4de75801 Binary files /dev/null and b/public/images/team/gh-huntie.jpg differ diff --git a/public/images/team/gh-javache.jpg b/public/images/team/gh-javache.jpg new file mode 100644 index 000000000..1f63907ea Binary files /dev/null and b/public/images/team/gh-javache.jpg differ diff --git a/public/images/team/gh-khalef1.jpg b/public/images/team/gh-khalef1.jpg new file mode 100644 index 000000000..94d96f670 Binary files /dev/null and b/public/images/team/gh-khalef1.jpg differ diff --git a/public/images/team/gh-kmagiera.jpg b/public/images/team/gh-kmagiera.jpg new file mode 100644 index 000000000..0e03ecb77 Binary files /dev/null and b/public/images/team/gh-kmagiera.jpg differ diff --git a/public/images/team/gh-motiz88.jpg b/public/images/team/gh-motiz88.jpg new file mode 100644 index 000000000..a67e30b1b Binary files /dev/null and b/public/images/team/gh-motiz88.jpg differ diff --git a/public/images/team/gh-rh389.jpg b/public/images/team/gh-rh389.jpg new file mode 100644 index 000000000..4d5a5e830 Binary files /dev/null and b/public/images/team/gh-rh389.jpg differ diff --git a/public/images/team/gh-rubennorte.jpg b/public/images/team/gh-rubennorte.jpg new file mode 100644 index 000000000..459c267e4 Binary files /dev/null and b/public/images/team/gh-rubennorte.jpg differ diff --git a/public/images/team/gh-samselikoff.jpg b/public/images/team/gh-samselikoff.jpg new file mode 100644 index 000000000..7887765b4 Binary files /dev/null and b/public/images/team/gh-samselikoff.jpg differ diff --git a/public/images/team/gh-simek.png b/public/images/team/gh-simek.png new file mode 100644 index 000000000..23a950103 Binary files /dev/null and b/public/images/team/gh-simek.png differ diff --git a/public/images/team/gh-stmoy.jpg b/public/images/team/gh-stmoy.jpg new file mode 100644 index 000000000..7694a7fb6 Binary files /dev/null and b/public/images/team/gh-stmoy.jpg differ diff --git a/public/images/team/gh-thymikee.jpg b/public/images/team/gh-thymikee.jpg new file mode 100644 index 000000000..d0debc5be Binary files /dev/null and b/public/images/team/gh-thymikee.jpg differ diff --git a/public/images/team/gh-vzaidman.jpg b/public/images/team/gh-vzaidman.jpg new file mode 100644 index 000000000..c76905615 Binary files /dev/null and b/public/images/team/gh-vzaidman.jpg differ diff --git a/public/images/team/jimmy-lai.jpg b/public/images/team/jimmy-lai.jpg new file mode 100644 index 000000000..57b50c800 Binary files /dev/null and b/public/images/team/jimmy-lai.jpg differ diff --git a/public/images/tutorial/codesandbox-devtools.png b/public/images/tutorial/codesandbox-devtools.png deleted file mode 100644 index 1f7ebd500..000000000 Binary files a/public/images/tutorial/codesandbox-devtools.png and /dev/null differ diff --git a/public/images/tutorial/components-tab.png b/public/images/tutorial/components-tab.png new file mode 100644 index 000000000..90ce0770e Binary files /dev/null and b/public/images/tutorial/components-tab.png differ diff --git a/public/images/tutorial/devtools-inspect.gif b/public/images/tutorial/devtools-inspect.gif new file mode 100644 index 000000000..5c623e6a7 Binary files /dev/null and b/public/images/tutorial/devtools-inspect.gif differ diff --git a/public/images/tutorial/devtools-select.gif b/public/images/tutorial/devtools-select.gif deleted file mode 100644 index dd1e1aa61..000000000 Binary files a/public/images/tutorial/devtools-select.gif and /dev/null differ diff --git a/public/images/tutorial/sandbox-new-tab.png b/public/images/tutorial/sandbox-new-tab.png new file mode 100644 index 000000000..093a363fb Binary files /dev/null and b/public/images/tutorial/sandbox-new-tab.png differ diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js index 46a21cdc9..287dde36a 100644 --- a/scripts/deadLinkChecker.js +++ b/scripts/deadLinkChecker.js @@ -311,7 +311,7 @@ async function buildContributorMap() { async function fetchErrorCodes() { try { const response = await fetch( - 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + 'https://raw.githubusercontent.com/react/react/main/scripts/error-codes/codes.json' ); if (!response.ok) { throw new Error(`Failed to fetch error codes: ${response.status}`); diff --git a/scripts/generateOgImages.mjs b/scripts/generateOgImages.mjs new file mode 100644 index 000000000..937727a1c --- /dev/null +++ b/scripts/generateOgImages.mjs @@ -0,0 +1,219 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// Generates a static OG image for every content page, so social +// cards show the page title without any runtime image generation. +// Run after `next build` (see the `build` script in package.json). + +import fs from 'fs'; +import path from 'path'; +import satori from 'satori'; +import {Resvg} from '@resvg/resvg-js'; +import matter from 'gray-matter'; + +const ROOT = process.cwd(); +const CONTENT_DIR = path.join(ROOT, 'src', 'content'); +const OUT_DIR = path.join(ROOT, 'public', 'images', 'og'); +const CONCURRENCY = 8; + +const SECTION_LABELS = { + learn: 'Learn React', + reference: 'API Reference', + community: 'Community', + blog: 'Blog', +}; + +const bold = fs.readFileSync( + path.join(ROOT, 'public', 'fonts', 'Optimistic_Display_W_Bd.ttf') +); +const medium = fs.readFileSync( + path.join(ROOT, 'public', 'fonts', 'Optimistic_Display_W_Md.ttf') +); + +function el(type, style, children) { + return {type, props: {style, children}}; +} + +function card(title, pagePath) { + const section = pagePath.split('/')[1] ?? ''; + const label = SECTION_LABELS[section] ?? 'React'; + const logo = { + type: 'svg', + props: { + width: 80, + height: 72, + viewBox: '-10.5 -9.45 21 18.9', + fill: 'none', + children: [ + {type: 'circle', props: {cx: 0, cy: 0, r: 2, fill: '#58c4dc'}}, + { + type: 'g', + props: { + stroke: '#58c4dc', + strokeWidth: 1, + fill: 'none', + children: [ + {type: 'ellipse', props: {rx: 10, ry: 4.5}}, + { + type: 'ellipse', + props: {rx: 10, ry: 4.5, transform: 'rotate(60)'}, + }, + { + type: 'ellipse', + props: {rx: 10, ry: 4.5, transform: 'rotate(120)'}, + }, + ], + }, + }, + ], + }, + }; + return el( + 'div', + { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + padding: '72px 80px', + backgroundColor: '#23272f', + backgroundImage: + 'radial-gradient(circle at 25% 30%, #343a46 0%, #23272f 55%)', + }, + [ + el('div', {display: 'flex', alignItems: 'center', gap: '20px'}, [ + logo, + el( + 'div', + { + fontSize: 48, + fontFamily: 'Optimistic Display Bold', + color: '#f6f7f9', + }, + 'React' + ), + ]), + el( + 'div', + { + flexGrow: 1, + display: 'flex', + alignItems: 'center', + fontSize: title.length > 24 ? 72 : 96, + fontFamily: 'Optimistic Display Bold', + color: '#f6f7f9', + lineHeight: 1.1, + wordBreak: 'break-word', + }, + title + ), + el( + 'div', + { + fontSize: 40, + fontFamily: 'Optimistic Display Medium', + color: '#99a1b3', + }, + label + ), + ] + ); +} + +async function renderCard(title, pagePath) { + const svg = await satori(card(title, pagePath), { + width: 1200, + height: 630, + fonts: [ + { + name: 'Optimistic Display Bold', + data: bold, + weight: 700, + style: 'normal', + }, + { + name: 'Optimistic Display Medium', + data: medium, + weight: 500, + style: 'normal', + }, + ], + }); + return new Resvg(svg, {fitTo: {mode: 'width', value: 1200}}).render().asPng(); +} + +function collectSidebarTitles() { + const titles = new Map(); + for (const name of fs.readdirSync(path.join(ROOT, 'src'))) { + if (!/^sidebar.*\.json$/.test(name)) continue; + const walk = (node) => { + if (node.path && node.title) { + titles.set(node.path, node.title); + } + for (const child of node.routes ?? []) walk(child); + }; + walk(JSON.parse(fs.readFileSync(path.join(ROOT, 'src', name), 'utf8'))); + } + return titles; +} + +const sidebarTitles = collectSidebarTitles(); + +function collectPages(dir, out) { + for (const entry of fs.readdirSync(dir, {withFileTypes: true})) { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) { + collectPages(full, out); + } else if (entry.name.endsWith('.md')) { + const rel = path.relative(CONTENT_DIR, full).replace(/\.md$/, ''); + const segments = rel.split(path.sep); + if (segments[segments.length - 1] === 'index') { + segments.pop(); + } + const pagePath = '/' + segments.join('/'); + if (pagePath === '/' || pagePath.startsWith('/errors')) { + continue; + } + const {data} = matter(fs.readFileSync(full, 'utf8')); + const title = data.title ?? sidebarTitles.get(pagePath); + if (title) { + out.push({title: String(title), pagePath}); + } + } + } + return out; +} + +export function ogImageFileName(pagePath) { + return pagePath.replace(/^\//, '').replace(/\//g, '-') + '.png'; +} + +async function main() { + const pages = collectPages(CONTENT_DIR, []); + fs.mkdirSync(OUT_DIR, {recursive: true}); + let done = 0; + const queue = [...pages]; + async function worker() { + for (;;) { + const page = queue.shift(); + if (!page) return; + const png = await renderCard(page.title, page.pagePath); + fs.writeFileSync(path.join(OUT_DIR, ogImageFileName(page.pagePath)), png); + done++; + if (done % 100 === 0) { + console.log(`og-images: ${done}/${pages.length}`); + } + } + } + await Promise.all(Array.from({length: CONCURRENCY}, worker)); + console.log(`og-images: generated ${done} images in public/images/og`); +} + +main().catch((error) => { + console.error(error); + process.exit(1); +}); diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index bd98d5b38..dff09ed3a 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -33,7 +33,7 @@ function ButtonLink({ className, 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', { - 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80': + 'bg-link text-white dark:bg-brand-dark dark:text-gray-90 hover:bg-opacity-80': type === 'primary', 'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10': type === 'secondary', diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 5603f7294..e254ab0e0 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -342,8 +342,13 @@ export function Footer() { <FooterLink href="/community" isHeader={true}> ์ปค๋ฎค๋‹ˆํ‹ฐ </FooterLink> +<<<<<<< HEAD <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md"> ํ–‰๋™ ๊ฐ•๋ น +======= + <FooterLink href="https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md"> + Code of Conduct +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </FooterLink> <FooterLink href="/community/team">ํŒ€ ์†Œ๊ฐœ</FooterLink> <FooterLink href="/community/docs-contributors"> @@ -382,7 +387,7 @@ export function Footer() { </ExternalLink> <ExternalLink aria-label="React on Github" - href="https://github.com/facebook/react" + href="https://github.com/react/react" className={socialLinkClasses}> <IconGitHub /> </ExternalLink> diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index aa39fe5fc..59cf4386d 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -129,7 +129,18 @@ export function Page({ title={title} titleForTitleTag={meta.titleForTitleTag} isHomePage={isHomePage} - image={`/images/og-` + section + '.png'} + image={ + // OG images are generated per page at build time by + // scripts/generateOgImages.mjs. Pages without a generated + // card (home, errors, 404, 500) use the static section image. + isHomePage || + !title || + cleanedPath.startsWith('/errors') || + cleanedPath === '/404' || + cleanedPath === '/500' + ? `/images/og-${section ?? 'unknown'}.png` + : `/images/og/${cleanedPath.slice(1).replace(/\//g, '-')}.png` + } searchOrder={searchOrder} /> {(isHomePage || isBlogIndex) && ( diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index 8a1b53a09..57cd6f153 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -11,6 +11,7 @@ import cx from 'classnames'; import {useTocHighlight} from './useTocHighlight'; +import {IsInTocContext} from '../MDX/TocContext'; import type {Toc} from '../MDX/TocContext'; export function Toc({headings}: {headings: Toc}) { @@ -32,37 +33,39 @@ export function Toc({headings}: {headings: Toc}) { overscrollBehavior: 'contain', }}> <ul className="space-y-2 pb-16"> - {headings.length > 0 && - headings.map((h, i) => { - if (!h.url && process.env.NODE_ENV === 'development') { - console.error('Heading does not have URL'); - } - return ( - <li - key={`heading-${h.url}-${i}`} - className={cx( - 'text-sm px-2 rounded-s-xl', - selectedIndex === i - ? 'bg-highlight dark:bg-highlight-dark' - : null, - { - 'ps-4': h?.depth === 3, - hidden: h.depth && h.depth > 3, - } - )}> - <a + <IsInTocContext.Provider value={true}> + {headings.length > 0 && + headings.map((h, i) => { + if (!h.url && process.env.NODE_ENV === 'development') { + console.error('Heading does not have URL'); + } + return ( + <li + key={`heading-${h.url}-${i}`} className={cx( + 'text-sm px-2 rounded-s-xl', selectedIndex === i - ? 'text-link dark:text-link-dark font-bold' - : 'text-secondary dark:text-secondary-dark', - 'block hover:text-link dark:hover:text-link-dark leading-normal py-2' - )} - href={h.url}> - {h.text} - </a> - </li> - ); - })} + ? 'bg-highlight dark:bg-highlight-dark' + : null, + { + 'ps-4': h?.depth === 3, + hidden: h.depth && h.depth > 3, + } + )}> + <a + className={cx( + selectedIndex === i + ? 'text-link dark:text-link-dark font-bold' + : 'text-secondary dark:text-secondary-dark', + 'block hover:text-link dark:hover:text-link-dark leading-normal py-2' + )} + href={h.url}> + {h.text} + </a> + </li> + ); + })} + </IsInTocContext.Provider> </ul> </div> </nav> diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index ad34057c4..4b76083e2 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -386,7 +386,7 @@ export default function TopNav({ </div> <div className="flex"> <Link - href="https://github.com/facebook/react/releases" + href="https://github.com/react/react/releases" target="_blank" rel="noreferrer noopener" aria-label="Open on GitHub" diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 46a3f8bc8..a80fb0aa6 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -36,7 +36,7 @@ import YouWillLearnCard from './YouWillLearnCard'; import {Challenges, Hint, Solution} from './Challenges'; import {IconNavArrow} from '../Icon/IconNavArrow'; import ButtonLink from 'components/ButtonLink'; -import {TocContext} from './TocContext'; +import {TocContext, IsInTocContext} from './TocContext'; import type {Toc, TocItem} from './TocContext'; import {TeamMember} from './TeamMember'; import {LanguagesContext} from './LanguagesContext'; @@ -122,33 +122,57 @@ const RSC = ({children}: {children: React.ReactNode}) => ( <ExpandableCallout type="rsc">{children}</ExpandableCallout> ); -const CanaryBadge = ({title}: {title: string}) => ( - <span - title={title} - className={ - 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' - }> - <IconCanary - size="s" - className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} - /> - Canary only - </span> -); +const CanaryBadge = ({title}: {title: string}) => { + const isInToc = useContext(IsInTocContext); + if (isInToc) { + return ( + <IconCanary + size="s" + title={title} + className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10" + /> + ); + } + return ( + <span + title={title} + className={ + 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' + }> + <IconCanary + size="s" + className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} + /> + Canary only + </span> + ); +}; -const ExperimentalBadge = ({title}: {title: string}) => ( - <span - title={title} - className={ - 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' - }> - <IconExperimental - size="s" - className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} - /> - Experimental only - </span> -); +const ExperimentalBadge = ({title}: {title: string}) => { + const isInToc = useContext(IsInTocContext); + if (isInToc) { + return ( + <IconExperimental + size="s" + title={title} + className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10" + /> + ); + } + return ( + <span + title={title} + className={ + 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' + }> + <IconExperimental + size="s" + className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} + /> + Experimental only + </span> + ); +}; const NextMajorBadge = ({title}: {title: string}) => ( <span @@ -422,7 +446,11 @@ function InlineToc() { if (root.children.length < 2) { return null; } - return <InlineTocItem items={root.children} />; + return ( + <IsInTocContext.Provider value={true}> + <InlineTocItem items={root.children} /> + </IsInTocContext.Provider> + ); } function InlineTocItem({items}: {items: Array<NestedTocNode>}) { diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index 97dbeaf66..8c533f981 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -19,7 +19,7 @@ let supportsImportMap = false; function subscribe(cb: () => void) { // This shouldn't actually need to update, but this works around - // https://github.com/facebook/react/issues/26095 + // https://github.com/react/react/issues/26095 let timeout = setTimeout(() => { supportsImportMap = (HTMLScriptElement as any).supports && diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index 2d0c65537..2716fa2d1 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -23,13 +23,49 @@ interface TeamMemberProps { name: string; title: string; permalink: string; - children: React.ReactNode; + children?: React.ReactNode; photo: string; twitter?: string; threads?: string; bsky?: string; github?: string; personal?: string; + // Comma-separated list of working groups. Suffix a group with `*` to mark + // that the member represents it on the Leadership Council, e.g. "Fiber*, DOM". + group?: string; +} + +function GroupBadges({group}: {group: string}) { + const groups = group + .split(',') + .map((g) => g.trim()) + .filter(Boolean); + if (groups.length === 0) { + return null; + } + return ( + <div className="flex flex-row flex-wrap gap-2 my-3"> + {groups.map((g) => { + const isLead = g.endsWith('*'); + const label = isLead ? g.slice(0, -1).trim() : g; + return ( + <span + key={g} + className="inline-flex items-center rounded-full bg-blue-10 dark:bg-gray-80 text-link dark:text-link-dark px-3 py-1 text-sm font-medium whitespace-nowrap"> + {label} + {isLead && ( + <span + className="ps-1 text-yellow-50" + aria-label="Leadership Council" + title="Leadership Council"> + โ˜… + </span> + )} + </span> + ); + })} + </div> + ); } // TODO: good alt text for images/links @@ -44,12 +80,11 @@ export function TeamMember({ threads, bsky, personal, + group, }: TeamMemberProps) { - if (name == null || title == null || permalink == null || children == null) { + if (name == null || title == null || permalink == null) { const identifier = name ?? title ?? permalink ?? 'unknown'; - throw new Error( - `Expected name, title, permalink, and children for ${identifier}` - ); + throw new Error(`Expected name, title, and permalink for ${identifier}`); } return ( <div className="pb-6 sm:pb-10"> @@ -69,6 +104,7 @@ export function TeamMember({ {name} </H3> {title && <div>{title}</div>} + {group && <GroupBadges group={group} />} {children} <div className="sm:flex sm:flex-row flex-wrap text-secondary dark:text-secondary-dark"> {twitter && ( diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx index 924e6e09e..804895369 100644 --- a/src/components/MDX/TocContext.tsx +++ b/src/components/MDX/TocContext.tsx @@ -20,3 +20,6 @@ export type TocItem = { export type Toc = Array<TocItem>; export const TocContext = createContext<Toc>([]); + +// Lets badge components render compactly when inside the table of contents. +export const IsInTocContext = createContext(false); diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index c9719277e..ff8f2429a 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -51,7 +51,11 @@ React 18๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‚˜, ๋ฆด๋ฆฌ์ฆˆ์— ๋Œ€ํ•œ ์ถ”๊ฐ€์ ์ธ ์›Œํ‚น ๊ทธ๋ฃน์— ๋Œ€ํ•œ ์ดˆ๊ธฐ ๊ด€์‹ฌ์ด ๊ธ‰์ฆํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋ฏ€๋กœ, ์ดˆ๋Œ€๋ฐ›์€ ํšŒ์›๋งŒ ์Šค๋ ˆ๋“œ๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜ ๋Œ“๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ํ† ๋ก ๊ธ€์€ ๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ์™„์ „ํžˆ ๊ณต๊ฐœ๋˜๋ฏ€๋กœ ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋™์ผํ•œ ์ •๋ณด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์›Œํ‚น ๊ทธ๋ฃน ๊ตฌ์„ฑ์›์„ ์œ„ํ•œ ์ƒ์‚ฐ์ ์ธ ํ™˜๊ฒฝ์„ ์กฐ์„ฑํ•˜๋Š” ๋™์‹œ์— ๋” ๋งŽ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€์˜ ํˆฌ๋ช…์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ์ข‹์€ ์ ˆ์ถฉ์•ˆ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD ์–ธ์ œ๋‚˜ ๊ทธ๋ ‡๋“ฏ์ด [์ด์Šˆ ํŠธ๋ž˜์ปค](https://github.com/facebook/react/issues)์— ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ, ์งˆ๋ฌธ ๋ฐ ์ผ๋ฐ˜์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ œ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/react/react/issues). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ## ์ง€๊ธˆ React 18 Alpha๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• {/*how-to-try-react-18-alpha-today*/} diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index a08353f1d..87ef90d32 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -13,7 +13,11 @@ description: React 18์€ ๋ฆด๋ฆฌ์Šค ๋…ธํŠธ์—์„œ ์–ธ๊ธ‰ํ•œ ๋Œ€๋กœ ์ƒˆ๋กœ์šด ๋™ React 18์€ [๋ฆด๋ฆฌ์Šค ๋…ธํŠธ](/blog/2022/03/29/react-v18)์—์„œ ์–ธ๊ธ‰ํ•œ ๋Œ€๋กœ ์ƒˆ๋กœ์šด ๋™์‹œ์„ฑ ๋ Œ๋”๋Ÿฌ<sup>Concurrent Renderer</sup>๋ฅผ ๋„์ž…ํ•˜์—ฌ ๊ธฐ์กด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ์ง„์ ์œผ๋กœ ์ ์šฉํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” React 18๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹จ๊ณ„๋ณ„๋กœ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. +<<<<<<< HEAD React 18๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๊ณผ์ •์—์„œ ๋ฐœ์ƒํ•˜๋Š” [๋ฌธ์ œ๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”](https://github.com/facebook/react/issues/new/choose). +======= +Please [report any issues](https://github.com/react/react/issues/new/choose) you encounter while upgrading to React 18. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Intro> @@ -317,11 +321,19 @@ Internet Explorer๋ฅผ ์ง€์›ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ React 17์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ### React {/*react*/} +<<<<<<< HEAD * **์ด์ œ ์ปดํฌ๋„ŒํŠธ๋“ค์ด `undefined`๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.** React๋Š” ๋” ์ด์ƒ ์ปดํฌ๋„ŒํŠธ์—์„œ `undefined`๋ฅผ ๋ฐ˜ํ™˜ํ•  ๋•Œ ๊ฒฝ๊ณ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•จ์œผ๋กœ์จ ์ปดํฌ๋„ŒํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์˜ ์ค‘๊ฐ„์— ํ—ˆ์šฉ๋œ ๊ฐ’๊ณผ ์ผ๊ด€๋œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. JSX ์•ž์— `return` ๋ฌธ์„ ๋นผ๋จน๋Š” ์‹ค์ˆ˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ฆฐํ„ฐ<sup>Linter</sup>๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. * **ํ…Œ์ŠคํŠธ์—์„œ `act` ๊ฒฝ๊ณ ๋Š” ์ด์ œ ์„ ํƒ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.** E2E<sup>End-to-End</sup> ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ `act` ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๋Š” ๋ถˆํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๊ฐ€ ์“ธ๋ชจ ์žˆ๋Š” [์œ ๋‹› ํ…Œ์ŠคํŠธ์—์„œ๋งŒ ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก](https://github.com/reactwg/react-18/discussions/102) ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. * **์ด์ œ ๋งˆ์šดํŠธ๊ฐ€ ํ•ด์ œ๋œ ์ปดํฌ๋„ŒํŠธ์—์„œ `setState` ๊ด€๋ จ ๊ฒฝ๊ณ ๊ฐ€ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.** ์ด์ „์—๋Š” `setState`๋ฅผ ๋งˆ์šดํŠธ๊ฐ€ ํ•ด์ œ๋œ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ˜ธ์ถœํ•  ๋•Œ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜์— ๋Œ€ํ•œ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ๊ณ ๋Š” ๊ตฌ๋…์„ ์œ„ํ•ด ์ถ”๊ฐ€๋˜์—ˆ์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์ƒํƒœ ์„ค์ •์— ๋ฌธ์ œ๊ฐ€ ์—†์„ ๋•Œ ์ด ๊ฒฝ๊ณ ๋ฅผ ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜์–ด ์ฝ”๋“œ๋ฅผ ๋” ๋‚˜์˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋Œ€์•ˆ์„ ์ฐพ์•„์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. React 18์—์„œ๋Š” ์ด ๊ฒฝ๊ณ ๋ฅผ [์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค](https://github.com/facebook/react/pull/22114). * **๋” ์ด์ƒ ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ์–ต์ œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.** Strict ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ React๋Š” ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋ถ€์ž‘์šฉ์„ ๊ฐ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‘ ๋ฒˆ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. React 17์—์„œ๋Š” ๋‘ ๋ฒˆ์งธ ๋ Œ๋”๋ง์˜ ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ์–ต์ œํ•˜์—ฌ ๋กœ๊ทธ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ฝ์„ ์ˆ˜ ์žˆ๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ [์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ํ”ผ๋“œ๋ฐฑ](https://github.com/facebook/react/issues/21783)์— ๋”ฐ๋ผ ์ด ์–ต์ œ๋ฅผ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ React DevTools๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ๋‹ค๋ฉด ๋‘ ๋ฒˆ์งธ ๋กœ๊ทธ์˜ ๋ Œ๋”๋ง์ด ํšŒ์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋˜๋ฉฐ ์™„์ „ํžˆ ์–ต์ œํ•˜๋Š” ์˜ต์…˜๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (๊ธฐ๋ณธ์ ์œผ๋กœ ๊บผ์ ธ ์žˆ์Œ.) * **๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ์„ ๊ฐœ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.** React๋Š” ์ด์ œ ๋งˆ์šดํŠธ๊ฐ€ ํ•ด์ œ๋  ๋•Œ ๋” ๋งŽ์€ ๋‚ด๋ถ€ ํ•„๋“œ๋ฅผ ์ •๋ฆฌํ•˜์—ฌ ์ฝ”๋“œ์— ์กด์žฌํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ •๋˜์ง€ ์•Š์€ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜์˜ ์˜ํ–ฅ์„ ์ค„์ž…๋‹ˆ๋‹ค. +======= +* **Components can now render `undefined`:** React no longer warns if you return `undefined` from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a `return` statement before JSX. +* **In tests, `act` warnings are now opt-in:** If you're running end-to-end tests, the `act` warnings are unnecessary. We've introduced an [opt-in](https://github.com/reactwg/react-18/discussions/102) mechanism so you can enable them only for unit tests where they are useful and beneficial. +* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/react/react/pull/22114) this warning. +* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/react/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely. +* **Improved memory usage:** React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ### React DOM ์„œ๋ฒ„ {/*react-dom-server*/} @@ -330,4 +342,8 @@ Internet Explorer๋ฅผ ์ง€์›ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ React 17์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ## ๋ณ€๊ฒฝ ๋‚ด์—ญ {/*changelog*/} +<<<<<<< HEAD [์—ฌ๊ธฐ์„œ ์ „์ฒด ๋ณ€๊ฒฝ ๋‚ด์—ญ](https://github.com/facebook/react/blob/main/CHANGELOG.md)์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +You can view the [full changelog here](https://github.com/react/react/blob/main/CHANGELOG.md). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index 0e8c7007e..a6b15e041 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -267,6 +267,7 @@ React 18์˜ Strict ๋ชจ๋“œ์—์„œ๋Š” ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งˆ์šดํŠธ ### React {/*react*/} +<<<<<<< HEAD * Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) * Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) * Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) @@ -308,34 +309,77 @@ React 18์˜ Strict ๋ชจ๋“œ์—์„œ๋Š” ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งˆ์šดํŠธ * Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/facebook/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) * Fix `aspectRatio` style not being applied. ([#21100](https://github.com/facebook/react/pull/21100) by [@gaearon](https://github.com/gaearon)) * Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/facebook/react/pull/23355) by [@acdlite](https://github.com/acdlite)) +======= +* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/react/react/pull/10426), [#10715](https://github.com/react/react/pull/10715), [#15593](https://github.com/react/react/pull/15593), [#15272](https://github.com/react/react/pull/15272), [#15578](https://github.com/react/react/pull/15578), [#15769](https://github.com/react/react/pull/15769), [#17058](https://github.com/react/react/pull/17058), [#18796](https://github.com/react/react/pull/18796), [#19121](https://github.com/react/react/pull/19121), [#19703](https://github.com/react/react/pull/19703), [#19719](https://github.com/react/react/pull/19719), [#19724](https://github.com/react/react/pull/19724), [#20672](https://github.com/react/react/pull/20672), [#20976](https://github.com/react/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useId` for generating unique IDs. ([#17322](https://github.com/react/react/pull/17322), [#18576](https://github.com/react/react/pull/18576), [#22644](https://github.com/react/react/pull/22644), [#22672](https://github.com/react/react/pull/22672), [#21260](https://github.com/react/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/react/react/pull/15022), [#18000](https://github.com/react/react/pull/18000), [#18771](https://github.com/react/react/pull/18771), [#22211](https://github.com/react/react/pull/22211), [#22292](https://github.com/react/react/pull/22292), [#22239](https://github.com/react/react/pull/22239), [#22347](https://github.com/react/react/pull/22347), [#23150](https://github.com/react/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) +* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/react/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/react/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/react/react/pull/19322), [#19374](https://github.com/react/react/pull/19374), [#19523](https://github.com/react/react/pull/19523), [#20625](https://github.com/react/react/pull/20625), [#21079](https://github.com/react/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) +* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/react/react/pull/19523) , [#21418](https://github.com/react/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) +* Assume Symbols are always available. ([#23348](https://github.com/react/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove `object-assign` polyfill. ([#23351](https://github.com/react/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/react/react/pull/20953) by [@acdlite](https://github.com/acdlite)) +* Allow components to render undefined. ([#21869](https://github.com/react/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/react/react/pull/21150) by [@acdlite](https://github.com/acdlite)) +* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/react/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/react/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Don't patch console during first render. ([#22308](https://github.com/react/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) +* Improve memory usage. ([#21039](https://github.com/react/react/pull/21039) by [@bgirard](https://github.com/bgirard)) +* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/react/react/pull/22064) by [@justingrant](https://github.com/justingrant)) +* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/react/react/pull/20834) by [@gaearon](https://github.com/gaearon)) +* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/react/react/pull/23095) by [@gaearon](https://github.com/gaearon)) +* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/react/react/pull/23111) by [@gaearon](https://github.com/gaearon)) +* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/react/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/react/react/pull/23316) by [@gnoff](https://github.com/gnoff)) +* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/react/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix the generated license header. ([#23004](https://github.com/react/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) +* Add `package.json` as one of the entry points. ([#22954](https://github.com/react/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) +* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/react/react/pull/23267) by [@acdlite](https://github.com/acdlite)) +* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/react/react/pull/23319) by [@acdlite](https://github.com/acdlite)) + +### React DOM {/*react-dom*/} + +* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/react/react/pull/10239), [#11225](https://github.com/react/react/pull/11225), [#12117](https://github.com/react/react/pull/12117), [#13732](https://github.com/react/react/pull/13732), [#15502](https://github.com/react/react/pull/15502), [#15532](https://github.com/react/react/pull/15532), [#17035](https://github.com/react/react/pull/17035), [#17165](https://github.com/react/react/pull/17165), [#20669](https://github.com/react/react/pull/20669), [#20748](https://github.com/react/react/pull/20748), [#20888](https://github.com/react/react/pull/20888), [#21072](https://github.com/react/react/pull/21072), [#21417](https://github.com/react/react/pull/21417), [#21652](https://github.com/react/react/pull/21652), [#21687](https://github.com/react/react/pull/21687), [#23207](https://github.com/react/react/pull/23207), [#23385](https://github.com/react/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add selective hydration. ([#14717](https://github.com/react/react/pull/14717), [#14884](https://github.com/react/react/pull/14884), [#16725](https://github.com/react/react/pull/16725), [#16880](https://github.com/react/react/pull/16880), [#17004](https://github.com/react/react/pull/17004), [#22416](https://github.com/react/react/pull/22416), [#22629](https://github.com/react/react/pull/22629), [#22448](https://github.com/react/react/pull/22448), [#22856](https://github.com/react/react/pull/22856), [#23176](https://github.com/react/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/react/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) +* Add `onResize` event to video elements. ([#21973](https://github.com/react/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) +* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/react/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) +* Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/react/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/react/react/pull/21100) by [@gaearon](https://github.com/gaearon)) +* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/react/react/pull/23355) by [@acdlite](https://github.com/acdlite)) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ### React DOM Server {/*react-dom-server-1*/} -* Add the new streaming renderer. ([#14144](https://github.com/facebook/react/pull/14144), [#20970](https://github.com/facebook/react/pull/20970), [#21056](https://github.com/facebook/react/pull/21056), [#21255](https://github.com/facebook/react/pull/21255), [#21200](https://github.com/facebook/react/pull/21200), [#21257](https://github.com/facebook/react/pull/21257), [#21276](https://github.com/facebook/react/pull/21276), [#22443](https://github.com/facebook/react/pull/22443), [#22450](https://github.com/facebook/react/pull/22450), [#23247](https://github.com/facebook/react/pull/23247), [#24025](https://github.com/facebook/react/pull/24025), [#24030](https://github.com/facebook/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/facebook/react/pull/23171) by [@frandiox](https://github.com/frandiox)) -* Revert to client render on text mismatch. ([#23354](https://github.com/facebook/react/pull/23354) by [@acdlite](https://github.com/acdlite)) -* Deprecate `renderToNodeStream`. ([#23359](https://github.com/facebook/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/facebook/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) -* Fix a bug in the new server renderer. ([#22617](https://github.com/facebook/react/pull/22617) by [@shuding](https://github.com/shuding)) -* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/facebook/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Add the new streaming renderer. ([#14144](https://github.com/react/react/pull/14144), [#20970](https://github.com/react/react/pull/20970), [#21056](https://github.com/react/react/pull/21056), [#21255](https://github.com/react/react/pull/21255), [#21200](https://github.com/react/react/pull/21200), [#21257](https://github.com/react/react/pull/21257), [#21276](https://github.com/react/react/pull/21276), [#22443](https://github.com/react/react/pull/22443), [#22450](https://github.com/react/react/pull/22450), [#23247](https://github.com/react/react/pull/23247), [#24025](https://github.com/react/react/pull/24025), [#24030](https://github.com/react/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/react/react/pull/23171) by [@frandiox](https://github.com/frandiox)) +* Revert to client render on text mismatch. ([#23354](https://github.com/react/react/pull/23354) by [@acdlite](https://github.com/acdlite)) +* Deprecate `renderToNodeStream`. ([#23359](https://github.com/react/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/react/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) +* Fix a bug in the new server renderer. ([#22617](https://github.com/react/react/pull/22617) by [@shuding](https://github.com/shuding)) +* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/react/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) ### React DOM Test Utils {/*react-dom-test-utils*/} -* Throw when `act` is used in production. ([#21686](https://github.com/facebook/react/pull/21686) by [@acdlite](https://github.com/acdlite)) -* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561) by [@acdlite](https://github.com/acdlite)) -* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/facebook/react/pull/22607) by [@acdlite](https://github.com/acdlite)) -* Make `act` batch updates. ([#21797](https://github.com/facebook/react/pull/21797) by [@acdlite](https://github.com/acdlite)) -* Remove warning for dangling passive effects. ([#22609](https://github.com/facebook/react/pull/22609) by [@acdlite](https://github.com/acdlite)) +* Throw when `act` is used in production. ([#21686](https://github.com/react/react/pull/21686) by [@acdlite](https://github.com/acdlite)) +* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/react/react/pull/22561) by [@acdlite](https://github.com/acdlite)) +* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/react/react/pull/22607) by [@acdlite](https://github.com/acdlite)) +* Make `act` batch updates. ([#21797](https://github.com/react/react/pull/21797) by [@acdlite](https://github.com/acdlite)) +* Remove warning for dangling passive effects. ([#22609](https://github.com/react/react/pull/22609) by [@acdlite](https://github.com/acdlite)) ### React Refresh {/*react-refresh*/} -* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/facebook/react/pull/22740) by [@anc95](https://github.com/anc95)) -* Add `exports` field to `package.json`. ([#23087](https://github.com/facebook/react/pull/23087) by [@otakustay](https://github.com/otakustay)) +* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/react/react/pull/22740) by [@anc95](https://github.com/anc95)) +* Add `exports` field to `package.json`. ([#23087](https://github.com/react/react/pull/23087) by [@otakustay](https://github.com/otakustay)) ### Server Components (Experimental) {/*server-components-experimental*/} -* Add Server Context support. ([#23244](https://github.com/facebook/react/pull/23244) by [@salazarm](https://github.com/salazarm)) -* Add `lazy` support. ([#24068](https://github.com/facebook/react/pull/24068) by [@gnoff](https://github.com/gnoff)) -* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly)) -* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea)) -* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi)) +* Add Server Context support. ([#23244](https://github.com/react/react/pull/23244) by [@salazarm](https://github.com/salazarm)) +* Add `lazy` support. ([#24068](https://github.com/react/react/pull/24068) by [@gnoff](https://github.com/gnoff)) +* Update webpack plugin for webpack 5 ([#22739](https://github.com/react/react/pull/22739) by [@michenly](https://github.com/michenly)) +* Fix a mistake in the Node loader. ([#22537](https://github.com/react/react/pull/22537) by [@btea](https://github.com/btea)) +* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/react/react/pull/22777) by [@huozhi](https://github.com/huozhi)) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 99ffa8c6d..b36346f69 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -69,7 +69,11 @@ Vercel ๋ฐ Shopify์™€ ํ˜‘๋ ฅํ•˜์—ฌ Webpack ๋ฐ Vite ๋ชจ๋‘์—์„œ ๊ณต์œ  ์‹œ๋งจ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ๊ฐ์˜ ๋Š๋ฆฐ ์ปค๋ฐ‹ ๊ทธ ์ž์ฒด์˜ ๋ฐœ์ƒ ์—ฌ๋ถ€๋‚˜, context์—์„œ ๋ฒ—์–ด๋‚œ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ์•„๋Š” ๊ฒƒ์€ ๊ทธ๋‹ค์ง€ ์œ ์šฉํ•˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋Š๋ฆฐ ์ปค๋ฐ‹์˜ ์›์ธ์„ ์•„๋Š” ๊ฒƒ์ด ๋” ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์ž๋Š” ํŠน์ • ์ƒํ˜ธ ์ž‘์šฉ(์˜ˆ: ๋ฒ„ํŠผ ํด๋ฆญ, ์ดˆ๊ธฐ ๋กœ๋“œ ๋˜๋Š” ํŽ˜์ด์ง€ ํƒ์ƒ‰)์„ ์ถ”์ ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ํšŒ๊ท€์ ์œผ๋กœ ๊ด€์ฐฐํ•˜๊ณ  ์ƒํ˜ธ ์ž‘์šฉ์ด ๋Š๋ฆฐ ์ด์œ ์™€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ์›ํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD ์ด์ „์—๋Š” [์ƒํ˜ธ์ž‘์šฉ ์ถ”์  API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)๋ฅผ ๋งŒ๋“ค์–ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ–ˆ์ง€๋งŒ, ์ด API๋Š” ๊ทผ๋ณธ์ ์ธ ์„ค๊ณ„ ๊ฒฐํ•จ์œผ๋กœ ์ธํ•ด ์ƒํ˜ธ์ž‘์šฉ์ด ๋Š๋ฆฐ ์ด์œ ๋ฅผ ์ถ”์ ํ•˜๋Š” ์ •ํ™•๋„๊ฐ€ ๋–จ์–ด์ง€๊ณ  ๋•Œ๋กœ๋Š” ์ƒํ˜ธ์ž‘์šฉ์ด ๋๋‚˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋กœ ์ธํ•ด ์ด [API๋ฅผ ์ œ๊ฑฐ](https://github.com/facebook/react/pull/20037)ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. +======= +We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/react/react/pull/20037) because of these issues. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฒ„์ „์˜ ์ƒํ˜ธ์ž‘์šฉ ์ถ”์  API(`startTransition`์„ ํ†ตํ•ด ์‹œ์ž‘๋˜๋ฏ€๋กœ ๊ฐ€์นญ ํŠธ๋žœ์ง€์…˜ ์ถ”์ ์ด๋ผ๊ณ  ํ•จ)๋ฅผ ๊ฐœ๋ฐœ ์ค‘์ž…๋‹ˆ๋‹ค. 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 5ba723288..618670f13 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 @@ -24,7 +24,11 @@ React 19์œผ๋กœ์˜ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ๋•๊ธฐ ์œ„ํ•ด `react@18.3`์„ React 19๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๊ธฐ ์ „์— ๋จผ์ € React 18.3์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜์—ฌ ์ž ์žฌ์ ์ธ ๋ฌธ์ œ๋ฅผ ๋ฏธ๋ฆฌ ํŒŒ์•…ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD 18.3 ๋ฒ„์ „์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ๋“ค์€ [๋ฆด๋ฆฌ์Šค ๋…ธํŠธ](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024)์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +For a list of changes in 18.3 see the [Release Notes](https://github.com/react/react/blob/main/CHANGELOG.md#1830-april-25-2024). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> @@ -38,7 +42,11 @@ React 19๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๊ธฐ ์ „์— ๋จผ์ € React 18.3์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜ - [TypeScript ๋ณ€๊ฒฝ ์‚ฌํ•ญ](#typescript-changes) - [๋ณ€๊ฒฝ ๋กœ๊ทธ](#changelog) +<<<<<<< HEAD React 19๋ฅผ ํ…Œ์ŠคํŠธํ•ด ๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ํ•ด๋‹น ๊ฐ€์ด๋“œ์— ๋‚˜์™€ ์žˆ๋Š” ๋‹จ๊ณ„๋ฅผ ๋”ฐ๋ผ์ฃผ์‹œ๊ณ , ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด [์ด์Šˆ๋ฅผ ์ œ๋ณดํ•ด ์ฃผ์„ธ์š”](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D). React 19์— ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ ๋ชฉ๋ก์€ [React 19 ๋ฆด๋ฆฌ์Šค ๊ฒŒ์‹œ๊ธ€](/blog/2024/12/05/react-19)์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/react/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- ## ์„ค์น˜ {/*installing*/} @@ -256,7 +264,11 @@ class Child extends React.Component { #### ์ œ๊ฑฐ๋จ: ๋ฌธ์ž์—ด Refs {/*removed-string-refs*/} ๋ฌธ์ž์—ด Refs๋Š” [2018๋…„ 3์›” (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)๋ถ€ํ„ฐ ๋” ์ด์ƒ ๊ถŒ์žฅ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. +<<<<<<< HEAD ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ๋ฌธ์ž์—ด Refs๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ, [์—ฌ๋Ÿฌ ๋‹จ์ ](https://github.com/facebook/react/issues/1373)์œผ๋กœ ์ธํ•ด Ref ์ฝœ๋ฐฑ ๋ฐฉ์‹์œผ๋กœ ๋Œ€์ฒด๋˜์—ˆ์Šต๋‹ˆ๋‹ค. React 19์—์„œ๋Š” React๋ฅผ ๋” ๊ฐ„๋‹จํ•˜๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋ฌธ์ž์—ด Refs๊ฐ€ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. +======= +Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/react/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์•„์ง ๋ฌธ์ž์—ด Refs๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด, Ref ์ฝœ๋ฐฑ์œผ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. @@ -730,6 +742,7 @@ const reducer = (state: State, action: Action) => state; ### ๊ธฐํƒ€ ์ฃผ์š”ํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ {/*other-breaking-changes*/} +<<<<<<< HEAD - **react-dom**: `src` ๋ฐ `href` ์†์„ฑ์— JavaScript URL ์‚ฌ์šฉ ์‹œ ๋ฐœ์ƒํ•˜๋˜ ์˜ค๋ฅ˜ [#26507](https://github.com/facebook/react/pull/26507) - **react-dom**: `onRecoverableError`์—์„œ `errorInfo.digest` ์ œ๊ฑฐ [#28222](https://github.com/facebook/react/pull/28222) - **react-dom**: `unstable_flushControlled` ์ œ๊ฑฐ [#26397](https://github.com/facebook/react/pull/26397) @@ -737,9 +750,19 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: `unstable_renderSubtreeIntoContainer` ์ œ๊ฑฐ [#28271](https://github.com/facebook/react/pull/28271) - **react-dom**: `unstable_runWithPriority` ์ œ๊ฑฐ [#28271](https://github.com/facebook/react/pull/28271) - **react-is**: `react-is`์—์„œ ์‚ฌ์šฉ ์ค‘๋‹จ๋œ ๋ฉ”์„œ๋“œ ์ œ๊ฑฐ [28224](https://github.com/facebook/react/pull/28224) +======= +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/react/react/pull/26507) +- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/react/react/pull/28222) +- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/react/react/pull/26397) +- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/react/react/pull/28271) +- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/react/react/pull/28224) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ### ๊ธฐํƒ€ ์ฃผ๋ชฉํ•  ๋งŒํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ {/*other-notable-changes*/} +<<<<<<< HEAD - **react**: ๋™๊ธฐ, ๊ธฐ๋ณธ, ์ง€์†์  lane ์ฒ˜๋ฆฌ ๋ฐฐ์น˜ ์ ์šฉ [#25700](https://github.com/facebook/react/pull/25700) - **react**: ์ค‘๋‹จ๋œ ์ปดํฌ๋„ŒํŠธ์˜ ํ˜•์ œ ์š”์†Œ ์„ ๋ Œ๋”๋ง ๋ฐฉ์ง€ [#26380](https://github.com/facebook/react/pull/26380) - **react**: ๋ Œ๋” ๋‹จ๊ณ„์—์„œ์˜ ์—…๋ฐ์ดํŠธ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•˜๋Š” ๋ฌดํ•œ ๋ฃจํ”„ ๊ฐ์ง€ [#26625](https://github.com/facebook/react/pull/26625) @@ -748,6 +771,16 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: src๋‚˜ href์— ๋นˆ ๋ฌธ์ž์—ด ์„ค์ • ์‹œ ๊ฒฝ๊ณ  ๋ฐ ๋ฌด์‹œ (๋‹จ, a ํƒœ๊ทธ ์ œ์™ธ) [#28124](https://github.com/facebook/react/pull/28124) ์ „์ฒด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ [๋ณ€๊ฒฝ ๋กœ๊ทธ ์ „์ฒด ๋ณด๊ธฐ](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. +======= +- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/react/react/pull/25700) +- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/react/react/pull/26380) +- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/react/react/pull/26625) +- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/react/react/pull/26025) +- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/react/react/pull/26395) +- **react-dom**: Warn and donโ€™t set empty string for src/href (except anchor tags) [#28124](https://github.com/react/react/pull/28124) + +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md#1900-december-5-2024). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 5a1efa194..ea050c746 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -45,7 +45,11 @@ _[1์ผ ์ฐจ ์ „์ฒด ์ŠคํŠธ๋ฆฌ๋ฐ ์‹œ์ฒญํ•˜๊ธฐ.](https://www.youtube.com/watch?v=T8 - [Dan Abramov](https://bsky.app/profile/danabra.mov): [๋‘ ๋Œ€์˜ ์ปดํ“จํ„ฐ์šฉ React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) - [Kent C. Dodds](https://twitter.com/kentcdodds): [์ด์ œ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) +<<<<<<< HEAD ๋งˆ์ง€๋ง‰์œผ๋กœ [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Mofei Zhang](https://twitter.com/zmofei)์€ React ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ [์˜คํ”ˆ์†Œ์Šค](https://github.com/facebook/react/pull/29061)๋กœ ๊ณต๊ฐœ๋˜์—ˆ์Œ์„ ์•Œ๋ฆฌ๊ณ , ์‹คํ—˜ ๋ฒ„์ „์„ ๊ณต์œ ํ–ˆ์Šต๋‹ˆ๋‹ค. +======= +Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/react/react/pull/29061), and sharing an experimental version of the React Compiler to try out. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ์ปดํŒŒ์ผ๋Ÿฌ ์‚ฌ์šฉ๋ฒ•๊ณผ ๋™์ž‘ ๋ฐฉ์‹์€ [๊ด€๋ จ ๋ฌธ์„œ](/learn/react-compiler) ๋ฐ ๊ด€๋ จ ๊ฐ•์—ฐ์„ ํ™•์ธํ•˜์„ธ์š”. 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 index 8a83ef4fd..f202a0df2 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -92,7 +92,7 @@ Because your code is pre-compiled, users of your library will not need to have t 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). +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/react/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. @@ -127,7 +127,7 @@ Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https --- -[^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. +[^1]: Thanks [@nikeee](https://github.com/react/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/react/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/react/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. diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 951e33d76..b3930147b 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -182,7 +182,11 @@ const [error, submitAction, isPending] = useActionState( `React.useActionState` ๋Š” Canary ๋ฆด๋ฆฌ์ฆˆ์—์„œ `ReactDOM.useFormState`๋ผ ๋ถˆ๋ ธ์ง€๋งŒ ์ด๋ฆ„์ด ๋ณ€๊ฒฝ๋˜์—ˆ๊ณ  `useFormState`๋Š” ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. +<<<<<<< HEAD ๋” ๋งŽ์€ ์ •๋ณด๋Š” [#28491](https://github.com/facebook/react/pull/28491)์„ ์ฐธ๊ณ ํ•˜์„ธ์š”. +======= +See [#28491](https://github.com/react/react/pull/28491) for more info. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 55bf40b28..4d55178ec 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -11458,7 +11458,11 @@ root.render( ์ž‘๋™ ๋ฐฉ์‹์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ๋ฌธ์„œ์—์„œ [`<ViewTransition>`์˜ ์ž‘๋™ ๋ฐฉ์‹](/reference/react/ViewTransition#how-does-viewtransition-work)์„ ํ™•์ธํ•˜์„ธ์š”. +<<<<<<< HEAD _View Transition์„ ๊ตฌ์ถ•ํ•œ ๋ฐฐ๊ฒฝ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋‹ค์Œ์„ ์ฐธ์กฐํ•˜์„ธ์š”. [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (Seb์—๊ฒŒ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!)_ +======= +_For more background on how we built View Transitions, see: [#31975](https://github.com/react/react/pull/31975), [#32105](https://github.com/react/react/pull/32105), [#32041](https://github.com/react/react/pull/32041), [#32734](https://github.com/react/react/pull/32734), [#32797](https://github.com/react/react/pull/32797) [#31999](https://github.com/react/react/pull/31999), [#32031](https://github.com/react/react/pull/32031), [#32050](https://github.com/react/react/pull/32050), [#32820](https://github.com/react/react/pull/32820), [#32029](https://github.com/react/react/pull/32029), [#32028](https://github.com/react/react/pull/32028), and [#32038](https://github.com/react/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 588512536..a36578a67 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -300,7 +300,11 @@ Node.js ํ™˜๊ฒฝ์—์„œ๋Š” ์—ฌ์ „ํžˆ Node ์ŠคํŠธ๋ฆผ API ์‚ฌ์šฉ์„ ๊ฐ•๋ ฅํžˆ ๊ถŒ์žฅ ์ปดํŒŒ์ผ๋Ÿฌ ํ™œ์„ฑํ™” ๊ทœ์น™์˜ ์ „์ฒด ๋ชฉ๋ก์€ [๋ฆฐํ„ฐ ๋ฌธ์„œ](/reference/eslint-plugin-react-hooks#recommended)๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”. +<<<<<<< HEAD ์ „์ฒด ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋ชฉ๋ก์€ [`eslint-plugin-react-hooks` ๋ณ€๊ฒฝ ๋กœ๊ทธ](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610)๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”. +======= +Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- @@ -314,6 +318,7 @@ CSS ์„ ํƒ์ž์— ์œ ํšจํ•˜์ง€ ์•Š์€ ํŠน์ˆ˜ ๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์›๋ž˜ ์˜๋„ ## ๋ณ€๊ฒฝ ๋กœ๊ทธ {/*changelog*/} +<<<<<<< HEAD ๊ธฐํƒ€ ์ฃผ๋ชฉํ•  ๋งŒํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ - `react-dom`: ํ˜ธ์ด์ŠคํŒ… ๊ฐ€๋Šฅํ•œ ์Šคํƒ€์ผ์—์„œ nonce ์‚ฌ์šฉ ํ—ˆ์šฉ [#32461](https://github.com/facebook/react/pull/32461) - `react-dom`: React ์†Œ์œ  ๋…ธ๋“œ๊ฐ€ ํ…์ŠคํŠธ ์ฝ˜ํ…์ธ ๋„ ํฌํ•จํ•˜๋Š” ๊ฒฝ์šฐ ์ปจํ…Œ์ด๋„ˆ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๊ฒฝ๊ณ  [#32774](https://github.com/facebook/react/pull/32774) @@ -332,6 +337,26 @@ CSS ์„ ํƒ์ž์— ์œ ํšจํ•˜์ง€ ์•Š์€ ํŠน์ˆ˜ ๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์›๋ž˜ ์˜๋„ - `react-dom`: ๋ Œ๋”๋ง ์ค‘ ์ค‘๋‹จ ํ›„ ์ค‘๋‹จ ์‹œ ํ–‰์ž‰(hanging) ๋ฐฉ์ง€ [#34192](https://github.com/facebook/react/pull/34192) ์ „์ฒด ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋ชฉ๋ก์€ [๋ณ€๊ฒฝ ๋กœ๊ทธ](https://github.com/facebook/react/blob/main/CHANGELOG.md)๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”. +======= +Other notable changes +- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/react/react/pull/32461) +- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/react/react/pull/32774) + +Notable bug fixes +- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/react/react/pull/33507) +- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/react/react/pull/32821) +- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/react/react/pull/34376) +- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/react/react/pull/33055) +- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/react/react/pull/32900) +- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/react/react/pull/34145) +- `react`: Improve component stacks in various places [#33629](https://github.com/react/react/pull/33629), [#33724](https://github.com/react/react/pull/33724), [#32735](https://github.com/react/react/pull/32735), [#33723](https://github.com/react/react/pull/33723) +- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/react/react/pull/33941) +- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/react/react/pull/34264) +- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/react/react/pull/33467) +- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/react/react/pull/34192) + +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 202b9da22..b51d6dd4a 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -132,7 +132,11 @@ export default defineConfig([ } ``` +<<<<<<< HEAD React ์ปดํŒŒ์ผ๋Ÿฌ ๊ทœ์น™์„ ํ™œ์„ฑํ™”ํ•˜๋ ค๋ฉด `recommended` ํ”„๋ฆฌ์…‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ์ง€์นจ์€ [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md)๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ React Conf์—์„œ ์†Œ๊ฐœ๋œ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. +======= +To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf: +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca - [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render)๋กœ ๋ Œ๋”๋ง ๋ฃจํ”„๋ฅผ ์œ ๋ฐœํ•˜๋Š” `setState` ํŒจํ„ด ํฌ์ฐฉ. - [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect)๋ฅผ ํ†ตํ•ด ์ดํŽ™ํŠธ ๋‚ด์˜ ๋น„์šฉ์ด ๋งŽ์ด ๋“œ๋Š” ์ž‘์—… ํ”Œ๋ž˜๊ทธ ์ง€์ •. diff --git a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md index 310a84116..a669a2c4e 100644 --- a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md +++ b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md @@ -34,7 +34,7 @@ The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: ## Immediate Action Required {/*immediate-action-required*/} -A fix was introduced in versions [19.0.1](https://github.com/facebook/react/releases/tag/v19.0.1), [19.1.2](https://github.com/facebook/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/facebook/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. +A fix was introduced in versions [19.0.1](https://github.com/react/react/releases/tag/v19.0.1), [19.1.2](https://github.com/react/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/react/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. If your appโ€™s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. @@ -193,7 +193,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact This is required to mitigate the security advisory, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. -See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. ## Timeline {/*timeline*/} diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md index 6bdd93a47..10600e275 100644 --- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md +++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md @@ -98,7 +98,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact This is required to mitigate the security advisories, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. -See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. --- diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 1bff9ed49..5c1f1227b 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -144,7 +144,11 @@ React ํŒ€์€ ๋ช‡ ๊ฐ€์ง€ ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ### ๋ชจ๋“  ๋ฆด๋ฆฌ์Šค ๋…ธํŠธ {/*all-release-notes*/} +<<<<<<< HEAD React์˜ ๋ชจ๋“  ๋ฆด๋ฆฌ์Šค ๋‚ด์šฉ์ด ๋ณ„๋„์˜ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€๋กœ ์ž‘์„ฑ๋˜์ง€๋Š” ์•Š์ง€๋งŒ, ๋ชจ๋“  ๋ฆด๋ฆฌ์Šค์— ๋Œ€ํ•œ ์„ธ๋ถ€ ๋ณ€๊ฒฝ ๋‚ด์—ญ์€ React ์ €์žฅ์†Œ์˜ [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) ํŒŒ์ผ ๋˜๋Š” [Releases](https://github.com/facebook/react/releases) ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/react/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/react/react/releases) page. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index a4b8c4965..cff3d74c4 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -4,7 +4,11 @@ title: ๊ฐ์‚ฌ์˜ ๋ง <Intro> +<<<<<<< HEAD React๋Š” ์›๋ž˜ [Jordan Walke](https://github.com/jordwalke)์— ์˜ํ•ด ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜๋‚  React์—๋Š” [์ž‘์—…์„ ์ „๋‹ดํ•˜๋Š” ์ „์ž„ ํŒ€](/community/team)๊ณผ ์ฒœ์—ฌ ๋ช…์ด ๋„˜๋Š” [์˜คํ”ˆ ์†Œ์Šค ๊ธฐ์—ฌ์ž๋“ค](https://github.com/facebook/react/graphs/contributors)์ด ์žˆ์Šต๋‹ˆ๋‹ค. +======= +React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/react/react/graphs/contributors) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Intro> diff --git a/src/content/community/index.md b/src/content/community/index.md index a4fadafbe..8c37b1838 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -10,7 +10,11 @@ React๋Š” ์ˆ˜๋ฐฑ๋งŒ์˜ ๊ฐœ๋ฐœ์ž๋กœ ๊ตฌ์„ฑ๋œ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ ## ํ–‰๋™ ๊ฐ•๋ น {/*code-of-conduct*/} +<<<<<<< HEAD React ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ฐธ์—ฌํ•˜๊ธฐ ์ „์— [๋ฐ˜๋“œ์‹œ ํ–‰๋™ ๊ฐ•๋ น์„ ์ฝ์–ด์ฃผ์„ธ์š”](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). ์šฐ๋ฆฌ๋Š” [๊ธฐ์—ฌ์ž ์„œ์•ฝ](https://www.contributor-covenant.org/)์„ ์ฑ„ํƒํ–ˆ๊ณ , ๋ชจ๋“  ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ตฌ์„ฑ์›๋“ค์ด ์ง€์นจ์„ ์ค€์ˆ˜ํ•  ๊ฒƒ์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. +======= +Before participating in React's communities, [please read our Code of Conduct.](https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ## Stack Overflow {/*stack-overflow*/} diff --git a/src/content/community/team.md b/src/content/community/team.md index 37a8e5a0d..fbb6e886e 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -4,12 +4,17 @@ title: "ํŒ€ ์†Œ๊ฐœ" <Intro> +<<<<<<< HEAD React ๊ฐœ๋ฐœ์€ Meta์˜ ์ „๋‹ด ํŒ€์ด ์ฃผ๋„ํ•˜๋ฉฐ, ์ „ ์„ธ๊ณ„ ๊ฐœ๋ฐœ์ž๋“ค์ด ๊ธฐ์—ฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. +======= +React development is led by contributors from companies and communities all over the world. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Intro> -## React Core {/*react-core*/} +React work is organized into working groups, each responsible for an area of the project such as Server, DOM, Fiber, Docs & Community, Compiler, DevX, and React Native. Each working group is represented on the React Leadership Council, which coordinates direction across the project. +<<<<<<< HEAD React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, ํ•ต์‹ฌ ์ปดํฌ๋„ŒํŠธ API, React DevTools, ๊ทธ๋ฆฌ๊ณ  ๋ฌธ์„œ ์›น์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์„ ์ „๋‹ดํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ React ํŒ€ ๋ฉค๋ฒ„๋Š” ์•„๋ž˜์— ์•ŒํŒŒ๋ฒณ ์ˆœ์œผ๋กœ ๋‚˜์—ด๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. @@ -32,12 +37,122 @@ React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, <TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta"> AutoHotkey๋ฅผ ์ ‘ํ•œ ์งํ›„, Jack์€ ์ƒ๊ฐ๋‚˜๋Š” ๋ชจ๋“  ์ž‘์—…์„ ์ž๋™ํ™”ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ์ดํ›„ ์›น ์•ฑ ๊ฐœ๋ฐœ๋กœ ๋„˜์–ด์™€ ํ˜„์žฌ๊นŒ์ง€๋„ ์›น ๊ฐœ๋ฐœ์„ ์ด์–ด๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ์—๋Š” Instagram ์›น ํ”Œ๋žซํผ์—์„œ ๊ทผ๋ฌดํ•˜๋‹ค React ํŒ€์— ํ•ฉ๋ฅ˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋Š” JSX์ž…๋‹ˆ๋‹ค. +======= +## Leadership Council {/*leadership-council*/} + +<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" threads="acdlite" title="Engineer at Vercel" group="Fiber*, DOM"> + 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. +</TeamMember> + +<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta" group="DOM*, Fiber"> + Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX. +</TeamMember> + +<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta" group="Compiler*"> + Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s). +</TeamMember> + +<TeamMember name="Moti Zilberman" permalink="moti-zilberman" photo="/images/team/gh-motiz88.jpg" github="motiz88" title="Engineer at Meta" group="DevX*" /> + +<TeamMember name="Nicola Corti" permalink="nicola-corti" photo="/images/team/gh-cortinico.jpg" github="cortinico" title="Engineer at Meta" group="React Native*, Docs & Community" /> + +<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickyfm" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta" group="Docs & Community*, DOM, Fiber, Server, DevX"> + 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. +</TeamMember> + +<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel" group="Server*, DOM, Fiber, DevX"> + Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community. +</TeamMember> + +## Working Group members {/*working-group-members*/} + +<TeamMember name="Alex Hunt" permalink="alex-hunt" photo="/images/team/gh-huntie.jpg" github="huntie" title="Engineer at Meta" group="DevX, React Native" /> + +<TeamMember name="Aurora Scharff" permalink="aurora-scharff" photo="/images/team/gh-aurorascharff.jpg" github="aurorascharff" title="Engineer at Vercel" group="Docs & Community" /> + +<TeamMember name="Brent Vatne" permalink="brent-vatne" photo="/images/team/gh-brentvatne.jpg" github="brentvatne" title="Engineer at Expo" group="React Native" /> + +<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Engineer at Vercel" group="Docs & Community"> + 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. +</TeamMember> + +<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel" group="Server"> + Hendrikโ€™s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop. +</TeamMember> + +<TeamMember name="Jordan Eldredge" permalink="jordan-eldredge" photo="/images/team/gh-captbaritone.jpg" github="captbaritone" title="Engineer at Meta" group="Server" /> + +<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel" group="DOM, Fiber, Server"> + 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. +</TeamMember> + +<TeamMember name="Kevin Gozali" permalink="kevin-gozali" photo="/images/team/gh-fkgozali.jpg" github="fkgozali" title="Engineer at Meta" group="React Native" /> + +<TeamMember name="Khalef Hosany" permalink="khalef-hosany" photo="/images/team/gh-khalef1.jpg" github="Khalef1" title="Engineer at Microsoft" group="React Native" /> + +<TeamMember name="Krzysztof Magiera" permalink="krzysztof-magiera" photo="/images/team/gh-kmagiera.jpg" github="kmagiera" title="Engineer at Software Mansion" group="React Native" /> + +<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Cursor" group="Compiler"> + Lauren's programming career peaked when she first discovered the `<marquee>` tag. Sheโ€™s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. +</TeamMember> + +<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate at Meta" group="Docs & Community"> + Matt stumbled into coding, and since then, has become enamored with creating things in communities that canโ€™t be created alone. Prior to React, he worked on YouTube, the Google Assistant, Fuchsia, and Google Cloud AI and Evernote. When he's not trying to make better developer tools he enjoys the mountains, jazz, and spending time with his family. +</TeamMember> + +<TeamMember name="Michael Leon" permalink="michael-leon" photo="/images/team/gh-fbmal7.jpg" github="fbmal7" title="Engineer at Meta" group="DevX" /> + +<TeamMember name="Michaล‚ Pierzchaล‚a" permalink="michal-pierzchala" photo="/images/team/gh-thymikee.jpg" github="thymikee" title="Engineer at Callstack" group="React Native" /> + +<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta" group="Compiler"> + Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. +</TeamMember> + +<TeamMember name="Pieter De Baets" permalink="pieter-de-baets" photo="/images/team/gh-javache.jpg" github="javache" title="Engineer at Meta" group="Compiler, Fiber, React Native" /> + +<TeamMember name="Riccardo Cipolleschi" permalink="riccardo-cipolleschi" photo="/images/team/gh-cipolleschi.png" github="cipolleschi" title="Engineer at Meta" group="Docs & Community, React Native" /> + +<TeamMember name="Rob Hogan" permalink="rob-hogan" photo="/images/team/gh-rh389.jpg" github="rh389" title="Engineer at Meta" group="DevX" /> + +<TeamMember name="Rubรฉn Norte" permalink="ruben-norte" photo="/images/team/gh-rubennorte.jpg" github="rubennorte" title="Engineer at Meta" group="Fiber" /> + +<TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta" group="DOM, DevX"> + Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes. +</TeamMember> + +<TeamMember name="Sam Selikoff" permalink="sam-selikoff" photo="/images/team/gh-samselikoff.jpg" github="samselikoff" title="Engineer at Vercel" group="Docs & Community" /> + +<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" threads="sophiebits" personal="sophiebits.com" title="Independent Engineer" group="Docs & Community, DOM, Fiber"> + Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and โ€œproviding valueโ€. +</TeamMember> + +<TeamMember name="Steven Moyes" permalink="steven-moyes" photo="/images/team/gh-stmoy.jpg" github="stmoy" title="Engineer at Amazon" group="React Native" /> + +<TeamMember name="Vitali Zaidman" permalink="vitali-zaidman" photo="/images/team/gh-vzaidman.jpg" github="vzaidman" title="Engineer at Meta" group="DevX" /> + +<TeamMember name="Vojtฤ›ch ล imek" permalink="vojtech-simek" photo="/images/team/gh-simek.png" github="simek" title="Developer" group="Docs & Community" /> + +## Advisors {/*advisors*/} + +<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineer at Meta"> + Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </TeamMember> <TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta"> Jason์€ ์ž„๋ฒ ๋””๋“œ C๋ฅผ ๊ณผ๊ฐํžˆ ํฌ๊ธฐํ•˜๊ณ  ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ ๊ธธ์„ ๊ฑธ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋ฐ•ํ•œ CSS ์ง€์‹๊ณผ ์•„๋ฆ„๋‹ค์šด UI์— ๋Œ€ํ•œ ์—ด์ •์„ ๋ฌด๊ธฐ๋กœ 2010๋…„ ํŽ˜์ด์Šค๋ถ์— ํ•ฉ๋ฅ˜ํ–ˆ๊ณ , ๊ทธ๊ณณ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ด ๋ณธ๊ฒฉ์ ์œผ๋กœ ์„ฑ์žฅํ•˜๋Š” ๊ฒƒ์„ ์ง์ ‘ ๋ณด๋Š” ํŠน๊ถŒ์„ ๋ˆ„๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. for...of ๋ฃจํ”„์˜ ์ž‘๋™ ์›๋ฆฌ๋Š” ์ž˜ ๋ชจ๋ฅด์ง€๋งŒ, ํ›Œ๋ฅญํ•œ ์‚ฌ๋žŒ๋“ค๊ณผ ๋ฉ‹์ง„ UX ํ”„๋กœ์ ํŠธ๋ฅผ ํ•จ๊ป˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ์ฆ๊น๋‹ˆ๋‹ค. </TeamMember> +<TeamMember name="Jimmy Lai" permalink="jimmy-lai" photo="/images/team/jimmy-lai.jpg" github="feedthejim" title="Engineering Director, Next.js at Vercel"> + Like many others, Jimmy started programming with the hopes of being able to work in the gaming industry. Fast forward a few years, he somehow decided that React and Javascript were pretty fun and that helping other developers build fast experiences was a more interesting life goal. After starting his career at Meta, working on product infrastructure and (briefly) on React Native, Jimmy now works at Vercel, where he helps his team build Next.js. He sadly does not get much time for video games anymore. +</TeamMember> + +<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" threads="sethwebster" personal="sethwebster.com" title="Executive Director, React Foundation, Chief Developer Evangelist at Expo"> + Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States. +</TeamMember> + +## Emeritus {/*emeritus*/} + <TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Engineer at Meta"> Joe๋Š” ๋ณธ๋ž˜ ์ˆ˜ํ•™๊ณผ ์ฒ ํ•™์„ ์ „๊ณตํ•˜๋ ค ํ–ˆ์ง€๋งŒ, Matlab์œผ๋กœ ๋ฌผ๋ฆฌ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ์ž‘์„ฑํ•˜๋ฉฐ ์ปดํ“จํ„ฐ ๊ณผํ•™์— ๋น ์ ธ๋“ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. React๋ฅผ ์ ‘ํ•˜๊ธฐ ์ „์—๋Š” Relay, RSocket.js, ๊ทธ๋ฆฌ๊ณ  Skip ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๊ฐœ๋ฐœ์— ์ฐธ์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ผ์„ ํ•˜์ง€ ์•Š์„ ๋•Œ์—๋Š” ๋‹ฌ๋ฆฌ๊ธฐ, ์ผ๋ณธ์–ด ๊ณต๋ถ€, ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์กฑ๊ณผ ์‹œ๊ฐ„์„ ๋ณด๋‚ด๋Š” ๊ฒƒ์„ ์ฆ๊น๋‹ˆ๋‹ค. </TeamMember> @@ -46,6 +161,7 @@ React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, Jordan์€ iPhone ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ ์ฝ”๋”ฉ์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ for-loop๊ฐ€ ๋ฌด์—‡์ธ์ง€๋„ ๋ชจ๋ฅด๊ณ  View Controller๋ฅผ ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ๋ž‘ํ•˜๋Š” ๊ธฐ์ˆ ์„ ๋‹ค๋ฃจ๋Š” ์ผ์„ ์ฆ๊ธฐ๋ฉฐ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ React๋กœ ์ด์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์—…๋ฌด ์™ธ์—๋Š” ๋…์„œ, ์นด์ดํŠธ๋ณด๋”ฉ, ๊ธฐํƒ€ ์—ฐ์ฃผ๋ฅผ ์ฆ๊น๋‹ˆ๋‹ค. </TeamMember> +<<<<<<< HEAD <TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel"> Josh๋Š” ๋Œ€ํ•™์—์„œ ์ˆ˜ํ•™์„ ์ „๊ณตํ•˜๋ฉฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ์ง์žฅ์€ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์—‘์…€๋กœ ๋ณดํ—˜ ์š”์œจ์„ ๊ณ„์‚ฐํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•˜๋Š” ์ผ์ด์—ˆ๋Š”๋ฐ, ์ด๊ฒƒ์ด ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ๋กœ ์ด์–ด์ง€๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ํ›„ ์—ฌ๋Ÿฌ ์Šคํƒ€ํŠธ์—…์„ ๊ฑฐ์น˜๋ฉฐ ๊ฐœ์ธ ์‹ค๋ฌด์ž๋ถ€ํ„ฐ ๋งค๋‹ˆ์ €, ์ž„์›๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๊ฒฝํ—˜์„ ์Œ“์•˜์Šต๋‹ˆ๋‹ค. ์—…๋ฌด ์™ธ์—๋Š” ์š”๋ฆฌ๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๊ฒƒ์— ๋„์ „ํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. </TeamMember> @@ -66,10 +182,13 @@ React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, Mofei๋Š” ๋น„๋””์˜ค ๊ฒŒ์ž„์—์„œ ์น˜ํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๊นจ๋‹ซ๊ณ  ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•™๋ถ€์™€ ๋Œ€ํ•™์›์—์„œ๋Š” ์šด์˜์ฒด์ œ์— ์ง‘์ค‘ํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ์€ React๋ฅผ ๊ฐ€์ง€๊ณ  ์ด๊ฒƒ์ €๊ฒƒ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ์ฆ๊ธฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—…๋ฌด ์™ธ์—๋Š” ํด๋ผ์ด๋ฐ ์ฝ”์Šค๋ฅผ ๋””๋ฒ„๊น…ํ•˜๊ฑฐ๋‚˜ ๋ฐฐ๋‚ญ์—ฌํ–‰์„ ๊ณ„ํšํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. </TeamMember> +======= +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca <TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta"> Pieter๋Š” ๊ฑด์ถ•๊ณตํ•™์„ ๊ณต๋ถ€ํ–ˆ์ง€๋งŒ, ์ทจ์—…์— ์‹คํŒจํ•˜์ž ์ง์ ‘ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ๊ณ , ๊ทธ๊ฒƒ์ด ๊ทธ์˜ ๊ธฐ์ˆ  ์ปค๋ฆฌ์–ด ์‹œ์ž‘์ ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Meta์—์„œ ์„ฑ๋Šฅ ๋ฐ ์–ธ์–ด ๊ด€๋ จ ์—…๋ฌด๋ฅผ ๋‹ด๋‹นํ–ˆ๊ณ , ์ง€๊ธˆ์€ React์— ์ง‘์ค‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ ์™ธ์˜ ์‹œ๊ฐ„์—๋Š” ์‚ฐ์œผ๋กœ ์˜คํ”„๋กœ๋“œ ์—ฌํ–‰์„ ๋– ๋‚ฉ๋‹ˆ๋‹ค.ใ„ด </TeamMember> +<<<<<<< HEAD <TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta"> Ricky๋Š” ์ด๋ก  ์ˆ˜ํ•™์„ ์ „๊ณตํ–ˆ์ง€๋งŒ, ์–ด์ฉŒ๋‹ค ๋ณด๋‹ˆ ๋ช‡ ๋…„๊ฐ„ React Native ํŒ€์—์„œ ์ผํ•˜๋‹ค๊ฐ€ React ํŒ€์— ํ•ฉ๋ฅ˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋”ฉ์„ ํ•˜์ง€ ์•Š์„ ๋•Œ์—๋Š” ์Šค๋…ธ๋ณด๋“œ, ์ž์ „๊ฑฐ, ์•”๋ฒฝ ๋“ฑ๋ฐ˜, ๊ณจํ”„๋ฅผ ์ฆ๊ธฐ๊ฑฐ๋‚˜ ์ด์Šˆ ํ…œํ”Œ๋ฆฟ ์–‘์‹์— ๋งž์ง€ ์•Š๋Š” GitHub ์ด์Šˆ๋ฅผ ๋‹ซ๋Š” ์ผ์„ ํ•ฉ๋‹ˆ๋‹ค. </TeamMember> @@ -78,10 +197,13 @@ React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, Ruslan์ด UI ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์ฒ˜์Œ ๋ฐœ์„ ๋“ค์ธ ๊ฒƒ์€ ์–ด๋ฆฐ ์‹œ์ ˆ ์ž์‹ ๋งŒ์˜ ๊ฒŒ์ž„ ํฌ๋Ÿผ HTML ํ…œํ”Œ๋ฆฟ์„ ์†์ˆ˜ ํŽธ์ง‘ํ•˜๋ฉด์„œ์˜€์Šต๋‹ˆ๋‹ค. ์–ด์ฉŒ๋‹ค๋ณด๋‹ˆ ๊ฒฐ๊ตญ ์ปดํ“จํ„ฐ ๊ณผํ•™์„ ์ „๊ณตํ•˜๊ฒŒ ๋˜์—ˆ์ฃ . ๊ทธ๋Š” ์Œ์•…, ๊ฒŒ์ž„, ๊ทธ๋ฆฌ๊ณ  ๋ฐˆ์„ ์ข‹์•„ํ•˜๋Š”๋ฐ, ์ฃผ๋กœ ๋ฐˆ์„ ๊ฐ€์žฅ ์ฆ๊ฒจ ๋ด…๋‹ˆ๋‹ค. </TeamMember> +======= +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca <TeamMember name="Sebastian Markbรฅge" permalink="sebastian-markbรฅge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel"> Sebastian์€ ์‹ฌ๋ฆฌํ•™์„ ์ „๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ํ‰์†Œ์—๋Š” ๋ง์ด ๋ณ„๋กœ ์—†๋Š”๋ฐ, ๊ฐ€๋” ํ•˜๋Š” ๋ง์ด ๋ช‡ ๋‹ฌ ํ›„์—์•ผ ๋น„๋กœ์†Œ ์˜๋ฏธ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์„ ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ฑ์€ **โ€œmark-boa-gehโ€**๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ ๋ฐœ์Œ์ด์ง€๋งŒ, ํ˜„์‹ค์ ์œผ๋กœ โ€œmark-beigeโ€๋กœ ๋ถ€๋ฅด๊ธฐ๋กœ ํƒ€ํ˜‘ํ–ˆ๊ณ , ๊ทธ๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ ์ข…์ข… ํƒ€ํ˜‘ํ•˜๊ณค ํ•ฉ๋‹ˆ๋‹ค. </TeamMember> +<<<<<<< HEAD <TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel"> Sebastian์€ ์ˆ˜์—… ์ค‘์— ํ•˜๋˜ ๋ธŒ๋ผ์šฐ์ € ๊ฒŒ์ž„์„ ๋” ์žฌ๋ฏธ์žˆ๊ฒŒ ์ฆ๊ธฐ๋ ค๊ณ  ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๊ณ„๊ธฐ๊ฐ€ ๋˜์–ด ๊ฐ€๋Šฅํ•œ ํ•œ ๋งŽ์€ ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•˜๊ฒŒ ๋˜์—ˆ์ฃ . ์ฝ”๋”ฉ ์™ธ์—๋Š” React ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋‹ค๋ฅธ Sebastian๊ณผ Zilberman๊ณผ ํ˜ผ๋™๋˜์ง€ ์•Š๋„๋ก ์ž์‹ ์„ ์•Œ๋ฆฌ๋Š” ๋ฐ ํž˜์“ฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. </TeamMember> @@ -94,10 +216,16 @@ React Core ํŒ€ ๊ตฌ์„ฑ์›๋“ค์€ React DOM๊ณผ React Native๋ฅผ ๊ตฌ๋™ํ•˜๋Š” ์—”์ง„, React๊ฐ€ ์ถœ์‹œ๋˜๊ณ  4์ผ ๋’ค, Sophie๋Š” ์ง„ํ–‰ํ•˜๋˜ ํ”„๋กœ์ ํŠธ ์ „์ฒด๋ฅผ React๋กœ ๋‹ค์‹œ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ, ์ง€๊ธˆ ์ƒ๊ฐํ•ด๋ณด๊ธฐ์—” ์ข€ ๋ฌด๋ชจํ–ˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ”„๋กœ์ ํŠธ์˜ ์ฃผ์š” ๊ธฐ์—ฌ์ž๊ฐ€ ๋œ ํ›„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ Facebook์—์„œ ๊ธ‰์—ฌ๋ฅผ ๋ฐ›๋Š”๋ฐ ์™œ ์ž์‹ ์€ ๋ฐ›์ง€ ๋ชปํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•ดํ–ˆ๊ณ , ๊ฒฐ๊ตญ ๊ณต์‹์ ์œผ๋กœ ํŒ€์— ํ•ฉ๋ฅ˜ํ•ด React์˜ ์ดˆ๊ธฐ ์„ฑ์žฅ์„ ์ด๋Œ์—ˆ์Šต๋‹ˆ๋‹ค. ๋น„๋ก ๋ช‡ ๋…„ ์ „์— ํšŒ์‚ฌ๋ฅผ ๊ทธ๋งŒ๋‘์—ˆ์ง€๋งŒ, ์—ฌ์ „ํžˆ ํŒ€์˜ ๊ทธ๋ฃน ์ฑ„ํŒ…๋ฐฉ์— ๋‚จ์•„ "๊ฐ€์น˜๋ฅผ ์ œ๊ณต"ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. </TeamMember> +======= +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca <TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta"> Yuzhi๋Š” ํ•™๊ต์—์„œ ์ปดํ“จํ„ฐ ๊ณผํ•™์„ ์ „๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ์‹คํ—˜์‹ค์— ๊ฐ€์ง€ ์•Š์•„๋„ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๋กœ ์‹คํ–‰๋˜๋Š” ์ฆ‰๊ฐ์ ์ธ ๋งŒ์กฑ๊ฐ์— ๋งค๋ฃŒ๋˜์—ˆ์ฃ . ํ˜„์žฌ๋Š” React ํŒ€์˜ ๋งค๋‹ˆ์ €๋กœ ์ผํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ทธ์ „์—๋Š” Relay ๋ฐ์ดํ„ฐ ํŽ˜์นญ ํ”„๋ ˆ์ž„์›Œํฌ ๊ฐœ๋ฐœ์— ์ฐธ์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ฐ€ ์‹œ๊ฐ„์—๋Š” ์ •์›์„ ๊ฐ€๊พธ๊ฑฐ๋‚˜ ์ง‘์•ˆ์„ ๋ณด์ˆ˜ํ•˜๋ฉฐ ์‚ถ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊น๋‹ˆ๋‹ค. </TeamMember> +<<<<<<< HEAD ## Past contributors {/*past-contributors*/} ๊ณผ๊ฑฐ ํŒ€ ๋ฉค๋ฒ„์™€ ์ˆ˜๋…„์— ๊ฑธ์ณ React์— ํฌ๊ฒŒ ๊ธฐ์—ฌํ•œ ์‚ฌ๋žŒ๋“ค์€ [๊ฐ์‚ฌ์˜ ๋ง](/community/acknowledgements) ํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +You can find the past team members and other people who significantly contributed to React over the years on the [acknowledgements](/community/acknowledgements) page. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index 711bac32b..3a517f7c9 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -131,9 +131,15 @@ React์˜ ๋ชจ๋“  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋Œ€์ค‘์—๊ฒŒ ๊ณต๊ฐœ๋˜๊ธฐ ์ „์— ๊ด‘๋ฒ”์œ„ํ•œ ```console yarn upgrade react@canary react-dom@canary ``` +<<<<<<< HEAD - ์—…๋ฐ์ดํŠธ๋œ ํŒจํ‚ค์ง€์— ๋Œ€ํ•ด ํ…Œ์ŠคํŠธ ์Šค์œ„ํŠธ๋ฅผ ์‹คํ–‰ํ•˜์„ธ์š”. - ํ…Œ์ŠคํŠธ๊ฐ€ ๋ชจ๋‘ ํ†ต๊ณผํ•˜๋ฉด, ๋‹น์‹ ์˜ ํ”„๋กœ์ ํŠธ๋Š” ๋‹ค์Œ ๋งˆ์ด๋„ˆ React ๋ฆด๋ฆฌ์ฆˆ์™€ ํ•จ๊ป˜ ์ •์ƒ ์ž‘๋™ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. - ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด, [์ด์Šˆ๋ฅผ ์ œ์ถœ](https://github.com/facebook/react/issues)ํ•ด ์ฃผ์„ธ์š”. +======= +- Run your test suite against the updated packages. +- If everything passes, great! You can expect that your project will work with the next minor React release. +- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/react/react/issues). +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca Next.js๋Š” ์ด ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ๋กœ Next.js์˜ [CircleCI ์„ค์ •](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml)์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. @@ -163,4 +169,8 @@ Next.js๋Š” ์ด ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ๋กœ ์ƒˆ๋กœ์šด ์‹คํ—˜์  ๊ธฐ๋Šฅ๋“ค์ด ์ค€๋น„๋˜๋ฉด [React ๋ธ”๋กœ๊ทธ](/blog)์— ๊ฒŒ์‹œ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ๋ชจ๋“  ์‹คํ—˜์  ๊ธฐ๋Šฅ๋“ค์„ ๊ณต๊ฐœํ•œ๋‹ค๋Š” ์˜๋ฏธ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. +<<<<<<< HEAD ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ๋Œ€ํ•œ ๋ณด๋‹ค ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊นƒํ—ˆ๋ธŒ ์ €์žฅ์†Œ์˜ [์ปค๋ฐ‹ ๋กœ๊ทธ](https://github.com/facebook/react/commits/main)์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +You can always refer to our public GitHub repository's [history](https://github.com/react/react/commits/main) for a comprehensive list of changes. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index d7d13ef46..091d503ef 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -43,10 +43,17 @@ React ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์•ฑ์„ ๋ง๊ฐ€๋œจ๋ฆด ์ˆ˜ ์žˆ๋Š” ์ฃผ์š” ์›์ธ ์ค‘ ํ•˜๋‚˜๋Š” ### ์ปดํŒŒ์ผ๋Ÿฌ ๋นŒ๋“œ ์˜ค๋ฅ˜ {/*compiler-build-errors*/} +<<<<<<< HEAD ๋นŒ๋“œ๋ฅผ ์˜ˆ์ƒ์น˜ ์•Š๊ฒŒ ์ค‘๋‹จ์‹œํ‚ค๋Š” ์ปดํŒŒ์ผ๋Ÿฌ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ปดํŒŒ์ผ๋Ÿฌ์˜ ๋ฒ„๊ทธ์ผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ •๋ณด์™€ ํ•จ๊ป˜ [facebook/react](https://github.com/facebook/react/issues) ์ €์žฅ์†Œ์— ๋ณด๊ณ ํ•ด ์ฃผ์„ธ์š”. - ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€ - ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ ์ฝ”๋“œ - React ๋ฐ ์ปดํŒŒ์ผ๋Ÿฌ ๋ฒ„์ „ +======= +If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [react/react](https://github.com/react/react/issues) repository with: +- The error message +- The code that caused the error +- Your React and compiler versions +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ### ๋Ÿฐํƒ€์ž„ ๋ฌธ์ œ {/*runtime-issues*/} @@ -78,6 +85,7 @@ function ProblematicComponent() { ์ปดํŒŒ์ผ๋Ÿฌ ๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋ฉด ๋‹ค์Œ์„ ํ™•์ธํ•˜์„ธ์š”. +<<<<<<< HEAD 1. **React ๊ทœ์น™ ์œ„๋ฐ˜์ด ์•„๋‹Œ์ง€ ํ™•์ธ** - ESLint๋กœ ๊ฒ€์‚ฌ 2. **์ตœ์†Œ ์žฌํ˜„ ์‚ฌ๋ก€ ์ƒ์„ฑ** - ์ž‘์€ ์˜ˆ์‹œ๋กœ ๋ฌธ์ œ ๊ฒฉ๋ฆฌ 3. **์ปดํŒŒ์ผ๋Ÿฌ ์—†์ด ํ…Œ์ŠคํŠธ** - ์ปดํŒŒ์ผ ์‹œ์—๋งŒ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ํ™•์ธ @@ -86,6 +94,16 @@ function ProblematicComponent() { - ์ตœ์†Œ ์žฌํ˜„ ์ฝ”๋“œ - ์˜ˆ์ƒ ๋™์ž‘ vs ์‹ค์ œ ๋™์ž‘ - ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€ +======= +1. **Verify it's not a Rules of React violation** - Check with ESLint +2. **Create a minimal reproduction** - Isolate the issue in a small example +3. **Test without the compiler** - Confirm the issue only occurs with compilation +4. **File an [issue](https://github.com/react/react/issues/new?template=compiler_bug_report.yml)**: + - React and compiler versions + - Minimal reproduction code + - Expected vs actual behavior + - Any error messages +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ## ๋‹ค์Œ ๋‹จ๊ณ„ {/*next-steps*/} diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 29874498f..4fbc96dce 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -190,7 +190,11 @@ ESLint ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. npm install -D eslint-plugin-react-hooks@latest </TerminalBlock> +<<<<<<< HEAD `eslint-plugin-react-hooks`๋ฅผ ์•„์ง ์„ค์ •ํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด [readme์˜ ์„ค์น˜ ์ง€์นจ](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)์„ ๋”ฐ๋ฅด์„ธ์š”. ์ปดํŒŒ์ผ๋Ÿฌ ๊ทœ์น™์€ `recommended-latest` ํ”„๋ฆฌ์…‹์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ESLint ๊ทœ์น™์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. - [React ๊ทœ์น™](/reference/rules) ์œ„๋ฐ˜ ์‹๋ณ„ diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index c563a7220..7b7db4f00 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -903,6 +903,7 @@ body { ### React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ {/*react-developer-tools*/} +<<<<<<< HEAD React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด React ์ปดํฌ๋„ŒํŠธ์˜ Props์™€ State๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CodeSandBox์˜ _๋ธŒ๋ผ์šฐ์ €_ ๊ตฌ์—ญ ํ•˜๋‹จ์—์„œ React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ํƒญ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ![CodeSandbox์˜ React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ](../images/tutorial/codesandbox-devtools.png) @@ -910,12 +911,26 @@ React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด React ์ปดํฌ๋„ŒํŠธ์˜ Props์™€ State๋ฅผ ํ™”๋ฉด์—์„œ ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฒ€์‚ฌํ•˜๋ ค๋ฉด React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ์™ผ์ชฝ ์œ„ ๋ชจ์„œ๋ฆฌ์— ์žˆ๋Š” ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์„ธ์š”. ![React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ํŽ˜์ด์ง€์˜ ์ปดํฌ๋„ŒํŠธ ์„ ํƒํ•˜๊ธฐ](../images/tutorial/devtools-select.gif) +======= +React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. -<Note> +After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab: + +![opening in new tab](../images/tutorial/sandbox-new-tab.png) + +Then, on the preview page, open your browser's DevTools and find the *Components* tab: +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca +![components tab](../images/tutorial/components-tab.png) + +<<<<<<< HEAD ๋กœ์ปฌ ํ™˜๊ฒฝ์—์„œ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒฝ์šฐ, React ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋Š” [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), ๊ทธ๋ฆฌ๊ณ  [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) ๋ธŒ๋ผ์šฐ์ €์˜ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ค์น˜ ํ›„ ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์— React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์ดํŠธ๋ฅผ ์œ„ํ•œ *Components* ํƒญ์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. +======= +To inspect a particular component on the screen, use the button in the top left corner of the Components tab: + +![inspecting with devtools](../images/tutorial/devtools-inspect.gif) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca -</Note> ## ๊ฒŒ์ž„ ์™„๋ฃŒํ•˜๊ธฐ {/*completing-the-game*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md index 5a20530c3..3fd255167 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md @@ -16,7 +16,11 @@ title: incompatible-library ## ๊ทœ์น™ ์„ธ๋ถ€ ์‚ฌํ•ญ {/*rule-details*/} +<<<<<<< HEAD ์ผ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” React์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํŒจํ„ด์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฆฐํ„ฐ๊ฐ€ [์•Œ๋ ค์ง„ ๋ชฉ๋ก](https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts)์—์„œ ์ด๋Ÿฌํ•œ API์˜ ์‚ฌ์šฉ์„ ๊ฐ์ง€ํ•˜๋ฉด ์ด ๊ทœ์น™์— ๋”ฐ๋ผ ํ”Œ๋ž˜๊ทธ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” React ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์•ฑ์„ ์†์ƒ์‹œํ‚ค์ง€ ์•Š๊ธฐ ์œ„ํ•ด ์ด๋Ÿฌํ•œ ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š” API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž๋™์œผ๋กœ ๊ฑด๋„ˆ๋›ธ ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. +======= +Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/react/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ```js // ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์ด ๊นจ์ง€๋Š” ์˜ˆ์‹œ @@ -135,4 +139,8 @@ function Component() { } ``` +<<<<<<< HEAD ์ผ๋ถ€ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์•„์ง React์˜ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๋ชจ๋ธ๊ณผ ํ˜ธํ™˜๋˜๋Š” ๋Œ€์ฒด API๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋ฆฐํ„ฐ๊ฐ€ ์ด๋Ÿฌํ•œ API๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋‚˜ Hook์„ ์ž๋™์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ์ง€ ์•Š๋Š”๋‹ค๋ฉด [์ด์Šˆ๋ฅผ ์ œ์ถœ](https://github.com/facebook/react/issues)ํ•˜์—ฌ ๋ฆฐํ„ฐ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ์„ธ์š”. +======= +Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/react/react/issues) so we can add it to the linter. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 0ceb161aa..54ada79d5 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -36,7 +36,11 @@ title: "๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ (์˜ˆ: <div>)" * `suppressHydrationWarning`: ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์ž…๋‹ˆ๋‹ค. [์„œ๋ฒ„ ๋ Œ๋”๋ง](/reference/react-dom/server)์„ ์‚ฌ์šฉํ•  ๋•Œ, ์ผ๋ฐ˜์ ์œผ๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋งํ•˜๋ฉด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ๋“œ๋ฌธ ์‚ฌ๋ก€(์˜ˆ: ํƒ€์ž„์Šคํƒฌํ”„)์—์„œ๋Š” ์ •ํ™•ํ•œ ์ผ์น˜๋ฅผ ๋ณด์žฅํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์–ด๋ ต๊ฑฐ๋‚˜ ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. `suppressHydrationWarning`๋ฅผ `true`๋กœ ์„ค์ •ํ•˜๋ฉด, React๋Š” ํ•ด๋‹น ์š”์†Œ์˜ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ์ฝ˜ํ…์ธ ๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š์•„๋„ ๊ฒฝ๊ณ ๋ฅผ ํ‘œ์‹œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ•œ ๋‹จ๊ณ„์˜ ๊นŠ์ด์—์„œ๋งŒ ์ž‘๋™ํ•˜๋ฉฐ, ํƒˆ์ถœ๊ตฌ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ณผ๋„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”. [Suppressing Hydration ์˜ค๋ฅ˜์— ๋Œ€ํ•ด์„œ ์ฝ์–ด๋ณด์„ธ์š”.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors) +<<<<<<< HEAD * `style`: `{ fontWeight: 'bold', margin: 20 }`์™€ ๊ฐ™์ด CSS ์Šคํƒ€์ผ์ด ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. DOM์˜ [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) ํ”„๋กœํผํ‹ฐ์—์„œ `fontWeight` ๋Œ€์‹  `font-weight`๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ CSS ํ”„๋กœํผํ‹ฐ์˜ ์ด๋ฆ„๋„ `camelCase`๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฌธ์ž์—ด์ด๋‚˜ ์ˆซ์ž๋ฅผ ๊ฐ’์œผ๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. `width: 100`์™€ ๊ฐ™์€ ์ˆซ์ž๋ฅผ ์ „๋‹ฌํ•œ๋‹ค๋ฉด React๋Š” [๋‹จ์œ„๊ฐ€ ์—†๋Š” ํ”„๋กœํผํ‹ฐ](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57)๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ์ž๋™์œผ๋กœ `px` ("ํ”ฝ์…€")๋กœ ๊ฐ’์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. `style`์€ ์Šคํƒ€์ผ ๊ฐ’์„ ๋ฏธ๋ฆฌ ์•Œ ์ˆ˜ ์—†๋Š” ๋™์  ์Šคํƒ€์ผ์—๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์™ธ์˜ ๊ฒฝ์šฐ์—๋Š” `className`์„ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ฐ˜ CSS ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค. [`className`๊ณผ `style`์— ๋Œ€ํ•ด์„œ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.](#applying-css-styles) +======= +* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/react/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ์•„๋ž˜์˜ ํ‘œ์ค€ DOM Props๋Š” ๋‚ด์žฅ๋œ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์—์„œ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index f4df10742..dd00456de 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -48,9 +48,53 @@ title: "<form>" ## ์‚ฌ์šฉ๋ฒ• {/*usage*/} +<<<<<<< HEAD ### ํด๋ผ์ด์–ธํŠธ์—์„œ ํผ ์ œ์ถœ ์ฒ˜๋ฆฌํ•˜๊ธฐ {/*handle-form-submission-on-the-client*/} ํผ์ด ์ œ์ถœ๋  ๋•Œ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด, ํผ์˜ `action` ํ”„๋กœํผํ‹ฐ์— ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜์„ธ์š”. [`formData`](https://developer.mozilla.org/ko/docs/Web/API/FormData)๊ฐ€ ํ•จ์ˆ˜์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋˜์–ด, ํผ์—์„œ ์ „๋‹ฌ๋œ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ ์ด URL๋งŒ ๋ฐ›๋˜ ๊ธฐ์กด [HTML action](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form)๊ณผ์˜ ์ฐจ์ด์ ์ž…๋‹ˆ๋‹ค. After the `action` function succeeds, all uncontrolled field elements in the form are reset. +======= +### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/} + +Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior. + +This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`. + +<Sandpack> + +```js src/App.js +export default function Search() { + function handleSubmit(e) { + // Prevent the browser from reloading the page + e.preventDefault(); + + // Read the form data + const form = e.target; + const formData = new FormData(form); + const query = formData.get("query"); + alert(`You searched for '${query}'`); + } + + return ( + <form onSubmit={handleSubmit}> + <input name="query" /> + <button type="submit">Search</button> + </form> + ); +} +``` + +</Sandpack> + +<Note> + +Reading form data with `onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), so you can call `e.preventDefault()` and read the data yourself. Passing the function to the `action` prop instead runs the submission in a [Transition](/reference/react/useTransition). React then tracks the pending state, sends thrown errors to the nearest error boundary, and lets the form work with [`useActionState`](/reference/react/useActionState) and [`useOptimistic`](/reference/react/useOptimistic). An `action` can also be a [Server Function](/reference/rsc/server-functions), which `onSubmit` does not support. + +</Note> + +### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/} + +Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca <Sandpack> diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 8ddf7ce85..bbaa62cd3 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -48,6 +48,7 @@ const { pipe } = renderToPipeableStream(<App />, { * `reactNode`: HTML๋กœ ๋ Œ๋”๋งํ•˜๋ ค๋Š” React ๋…ธ๋“œ. ์˜ˆ๋ฅผ ๋“ค์–ด, `<App />`๊ณผ ๊ฐ™์€ JSX ์—˜๋ฆฌ๋จผํŠธ์ž…๋‹ˆ๋‹ค. ์ „์ฒด ๋ฌธ์„œ๋ฅผ ๋‚˜ํƒ€๋‚ผ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋ฏ€๋กœ `App` ์ปดํฌ๋„ŒํŠธ๋Š” `<html>` ํƒœ๊ทธ๋ฅผ ๋ Œ๋”๋งํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD * `options`**(์„ ํƒ์‚ฌํ•ญ)**: ์ŠคํŠธ๋ฆฌ๋ฐ ์˜ต์…˜์ด ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. * `bootstrapScriptContent`**(์„ ํƒ์‚ฌํ•ญ)**: ์ง€์ •ํ•˜๋ฉด ์ด ๋ฌธ์ž์—ด์ด ์ธ๋ผ์ธ `<script>` ํƒœ๊ทธ์— ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. * `bootstrapScripts`**(์„ ํƒ์‚ฌํ•ญ)**: ํŽ˜์ด์ง€์— ํ‘œ์‹œํ•  `<script>` ํƒœ๊ทธ์— ๋Œ€ํ•œ ๋ฌธ์ž์—ด URL ๋ฐฐ์—ด์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)๋ฅผ ํ˜ธ์ถœํ•˜๋Š” `<script>`๋ฅผ ํฌํ•จํ•˜์„ธ์š”. ํด๋ผ์ด์–ธํŠธ์—์„œ React๋ฅผ ์ „ํ˜€ ์‹คํ–‰ํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด ์ƒ๋žตํ•˜์„ธ์š”. @@ -60,6 +61,20 @@ const { pipe } = renderToPipeableStream(<App />, { * `onShellReady`**(์„ ํƒ์‚ฌํ•ญ)**: [์ดˆ๊ธฐ ์…ธ](#specifying-what-goes-into-the-shell)์ด ๋ Œ๋”๋ง๋œ ์งํ›„์— ์‹คํ–‰๋˜๋Š” ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ [์ƒํƒœ ์ฝ”๋“œ๋ฅผ ์„ค์ •](#setting-the-status-code)ํ•˜๊ณ  `pipe`๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ŠคํŠธ๋ฆฌ๋ฐ์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React๋Š” HTML ๋กœ๋”ฉ ํด๋ฐฑ์„ ์ฝ˜ํ…์ธ ๋กœ ๋Œ€์ฒดํ•˜๋Š” ์ธ๋ผ์ธ `<script>` ํƒœ๊ทธ์™€ ํ•จ๊ป˜ ์…ธ ๋’ค์— [์ถ”๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐ](#streaming-more-content-as-it-loads)ํ•ฉ๋‹ˆ๋‹ค. * `onShellError`**(์„ ํƒ์‚ฌํ•ญ)**: ์ดˆ๊ธฐ ์…ธ์„ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ์˜ค๋ฅ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์ŠคํŠธ๋ฆผ์—์„œ ์•„์ง ๋ฐ”์ดํŠธ๊ฐ€ ์ „์†ก๋˜์ง€ ์•Š์•˜๊ณ , `onShellReady`๋‚˜ `onAllReady`๋„ ํ˜ธ์ถœ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ [ํด๋ฐฑ HTML ์…ธ์„ ์ถœ๋ ฅ](#recovering-from-errors-inside-the-shell) ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. * `progressiveChunkSize`**(์„ ํƒ์‚ฌํ•ญ)**: ์ฒญํฌ์˜ ๋ฐ”์ดํŠธ ์ˆ˜์ž…๋‹ˆ๋‹ค. [๊ธฐ๋ณธ ํœด๋ฆฌ์Šคํ‹ฑ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) +======= +* **optional** `options`: An object with streaming options. + * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. + * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. + * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). + * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML. + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. + * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content. + * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca #### ๋ฐ˜ํ™˜๊ฐ’ {/*returns*/} @@ -284,6 +299,7 @@ function ProfilePage() { <Note> +<<<<<<< HEAD **Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋งŒ Suspense ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.** ์ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)์™€ [Next.js](https://nextjs.org/docs/getting-started/react-essentials) ๊ฐ™์€ Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -295,6 +311,9 @@ Suspense๋Š” Effect ๋˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ `Posts` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์€ ์•ž์„œ ์„ค๋ช…ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ ํ•ด๋‹น ํ”„๋ ˆ์ž„์›Œํฌ ๋ฌธ์„œ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋…์ž์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense ์ง€์› ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ์•„์ง ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” React์˜ ํ–ฅํ›„ ๋ฒ„์ „์—์„œ ์ถœ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index c9436004d..bd955f1f4 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -49,6 +49,7 @@ async function handler(request) { * `reactNode`: ์‚ฌ์šฉ์ž๊ฐ€ HTML๋กœ ๋ Œ๋”๋งํ•˜๊ณ ์ž ํ•˜๋Š” React node์ž…๋‹ˆ๋‹ค. `<App />`๊ฐ™์€ JSX ์š”์†Œ๊ฐ€ ๊ทธ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. reactNode ์ธ์ž๋Š” ๋ฌธ์„œ ์ „์ฒด๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์–ด์•ผํ•˜๋ฉฐ, ๋”ฐ๋ผ์„œ `App` ์ปดํฌ๋„ŒํŠธ๋Š” `<html>`์— ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD * `options`**(์„ ํƒ์‚ฌํ•ญ)**: ์ŠคํŠธ๋ฆฌ๋ฐ ์˜ต์…˜์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. * `bootstrapScriptContent`**(์„ ํƒ์‚ฌํ•ญ)**: ์ง€์ •๋  ๊ฒฝ์šฐ, ํ•ด๋‹น ๋ฌธ์ž์—ด์€ `<script>` ํƒœ๊ทธ์— ์ธ๋ผ์ธ ํ˜•์‹์œผ๋กœ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. * `bootstrapScripts`**(์„ ํƒ์‚ฌํ•ญ)**: ๋ฌธ์ž์—ด ๋ฐฐ์—ด ํ˜•์‹์˜ ๋‹จ์ˆ˜ ํ˜น์€ ๋ณต์ˆ˜์˜ URL๋กœ ํŽ˜์ด์ง€์— ํ•จ๊ป˜ ์ž‘์„ฑ๋  `<script>` ํƒœ๊ทธ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ, `<script>` ํƒœ๊ทธ๋ฅผ ํฌํ•จ ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ์—์„œ React๊ฐ€ ์‹คํ–‰๋˜๊ธธ ์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ์ œ์™ธ์‹œ์ผœ์ฃผ์„ธ์š”. @@ -59,6 +60,18 @@ async function handler(request) { * `onError`**(์„ ํƒ์‚ฌํ•ญ)**: [ํšŒ๋ณตํ•  ์ˆ˜ ์žˆ๋“ ](#recovering-from-errors-outside-the-shell) ์žˆ๋“  [์—†๋“ ] ์ƒ๊ด€์—†์ด, ์„œ๋ฒ„์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ, ์ด ์ฝœ๋ฐฑ์€ `console.error`๋งŒ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. [ํฌ๋ž˜์‹œ ๋ฆฌํฌํŠธ๋ฅผ ๋กœ๊ทธํ•˜๊ธฐ](#logging-crashes-on-the-server) ์œ„ํ•ด ์˜ค๋ฒ„๋ผ์ด๋“œํ•˜๊ฑฐ๋‚˜, [์ƒํƒœ ์ฝ”๋“œ๋ฅผ ์กฐ์ •ํ•˜๊ธฐ](#setting-the-status-code) ์œ„ํ•ด ์˜ค๋ฒ„๋ผ์ด๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. * `progressiveChunkSize`**(์„ ํƒ์‚ฌํ•ญ)**: ์ฒญํฌ์˜ ๋ฐ”์ดํŠธ ์ˆ˜๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. [๊ธฐ๋ณธ ํœด๋ฆฌ์Šคํ‹ฑ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด๊ธฐ.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * `signal`**(์„ ํƒ์‚ฌํ•ญ)**: [์„œ๋ฒ„ ๋ Œ๋”๋ง์„ ์ทจ์†Œ](#aborting-server-rendering)ํ•˜๊ณ , ๊ทธ ๋‚˜๋จธ์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•œ [๊ฑฐ์ ˆ ์‹ ํ˜ธ(abort signal)](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. +======= +* **optional** `options`: An object with streaming options. + * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. + * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. + * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca #### ๋ฐ˜ํ™˜๊ฐ’ {/*returns*/} @@ -282,6 +295,7 @@ function ProfilePage() { <Note> +<<<<<<< HEAD **Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋งŒ Suspense ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.** ์ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)์™€ [Next.js](https://nextjs.org/docs/getting-started/react-essentials) ๊ฐ™์€ Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -293,6 +307,9 @@ Suspense๋Š” Effect ๋˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ `Posts` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์€ ์•ž์„œ ์„ค๋ช…ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ ํ•ด๋‹น ํ”„๋ ˆ์ž„์›Œํฌ ๋ฌธ์„œ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋…์ž์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense ์ง€์› ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ์•„์ง ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” React์˜ ํ–ฅํ›„ ๋ฒ„์ „์—์„œ ์ถœ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 96caf6128..a20fe38eb 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -49,6 +49,7 @@ async function handler(request, response) { * `reactNode`: HTML๋กœ ๋ Œ๋”๋งํ•˜๋ ค๋Š” React ๋…ธ๋“œ. ์˜ˆ๋ฅผ ๋“ค์–ด `<App />`๊ณผ ๊ฐ™์€ JSX ์—˜๋ฆฌ๋จผํŠธ์ž…๋‹ˆ๋‹ค. ์ „์ฒด ๋ฌธ์„œ๋ฅผ ๋‚˜ํƒ€๋‚ผ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋ฏ€๋กœ `App` ์ปดํฌ๋„ŒํŠธ๋Š” `<html>` ํƒœ๊ทธ๋ฅผ ๋ Œ๋”๋งํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD * `options`**(์„ ํƒ์‚ฌํ•ญ)**: ์ •์  ์ƒ์„ฑ ์˜ต์…˜์„ ๊ฐ€์ง„ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. * `bootstrapScriptContent`**(์„ ํƒ์‚ฌํ•ญ)**: ์ง€์ •๋  ๊ฒฝ์šฐ, ํ•ด๋‹น ๋ฌธ์ž์—ด์€ `<script>` ํƒœ๊ทธ์— ์ธ๋ผ์ธ ํ˜•์‹์œผ๋กœ ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. * `bootstrapScripts`**(์„ ํƒ์‚ฌํ•ญ)**: ํŽ˜์ด์ง€์— ํ‘œ์‹œํ•  `<script>` ํƒœ๊ทธ์— ๋Œ€ํ•œ ๋ฌธ์ž์—ด URL ๋ฐฐ์—ด์ž…๋‹ˆ๋‹ค. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)๋ฅผ ํ˜ธ์ถœํ•˜๋Š” `<script>`๋ฅผ ํฌํ•จํ•˜๋ ค๋ฉด ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜์„ธ์š”. ํด๋ผ์ด์–ธํŠธ์—์„œ React๋ฅผ ์ „ํ˜€ ์‹คํ–‰ํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด ์ƒ๋žตํ•˜์„ธ์š”. @@ -58,6 +59,17 @@ async function handler(request, response) { * `onError`**(์„ ํƒ์‚ฌํ•ญ)**: [๋ณต๊ตฌ ๊ฐ€๋Šฅ](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) ๋˜๋Š” [๋ถˆ๊ฐ€๋Šฅ](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)์— ๊ด€๊ณ„์—†์ด ์„œ๋ฒ„ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ `console.error`๋งŒ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด ํ•จ์ˆ˜๋ฅผ ์žฌ์ •์˜ํ•˜์—ฌ [ํฌ๋ž˜์‹œ ๋ฆฌํฌํŠธ๋ฅผ ๋กœ๊น…](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server)ํ•˜๋Š” ๊ฒฝ์šฐ `console.error`๋ฅผ ๊ณ„์† ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์…ธ์ด ์ถœ๋ ฅ๋˜๊ธฐ ์ „์— [์ƒํƒœ ์ฝ”๋“œ๋ฅผ ์„ค์ •](/reference/react-dom/server/renderToReadableStream#setting-the-status-code)ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. * `progressiveChunkSize`**(์„ ํƒ์‚ฌํ•ญ)**: ์ฒญํฌ์˜ ๋ฐ”์ดํŠธ ์ˆ˜์ž…๋‹ˆ๋‹ค. [๊ธฐ๋ณธ ํœด๋ฆฌ์Šคํ‹ฑ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด๊ธฐ.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * `signal`**(์„ ํƒ์‚ฌํ•ญ)**: [์‚ฌ์ „ ๋ Œ๋”๋ง์„ ์ค‘๋‹จ](#aborting-prerendering)ํ•˜๊ณ  ๋‚˜๋จธ์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•œ [์ค‘๋‹จ ์‹ ํ˜ธ<sup>Abort Signal</sup>](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. +======= +* **optional** `options`: An object with static generation options. + * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. + * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. + * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca #### ๋ฐ˜ํ™˜๊ฐ’ {/*returns*/} @@ -275,6 +287,7 @@ function ProfilePage() { <Note> +<<<<<<< HEAD **Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋งŒ Suspense ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.** ์ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)์™€ [Next.js](https://nextjs.org/docs/getting-started/react-essentials) ๊ฐ™์€ Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -286,6 +299,9 @@ Suspense๋Š” Effect๋‚˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ `Posts` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์€ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ ํ•ด๋‹น ํ”„๋ ˆ์ž„์›Œํฌ ๋ฌธ์„œ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋…์ž์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense ์ง€์› ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ์•„์ง ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” React์˜ ํ–ฅํ›„ ๋ฒ„์ „์—์„œ ์ถœ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 497bb8783..ad6c0091d 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -50,6 +50,7 @@ app.use('/', async (request, response) => { * `reactNode`: HTML๋กœ ๋ Œ๋”๋งํ•  React ๋…ธ๋“œ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด `<App />`๊ณผ ๊ฐ™์€ JSX ๋…ธ๋“œ๊ฐ€ ํ•ด๋‹น๋ฉ๋‹ˆ๋‹ค. ์ „์ฒด ๋ฌธ์„œ๋ฅผ ๋‚˜ํƒ€๋‚ด์•ผ ํ•˜๋ฏ€๋กœ, App ์ปดํฌ๋„ŒํŠธ๋Š” `<html>` ํƒœ๊ทธ๋ฅผ ๋ Œ๋”๋งํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +<<<<<<< HEAD * `options`**(์„ ํƒ์‚ฌํ•ญ)**: ์ •์  ์ƒ์„ฑ ์˜ต์…˜์„ ๊ฐ€์ง„ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. * `bootstrapScriptContent`**(์„ ํƒ์‚ฌํ•ญ)**: ์ง€์ •๋  ๊ฒฝ์šฐ, ์ด ๋ฌธ์ž์—ด์ด ์ธ๋ผ์ธ `<script>` ํƒœ๊ทธ์— ์‚ฝ์ž…๋ฉ๋‹ˆ๋‹ค. * `bootstrapScripts`**(์„ ํƒ์‚ฌํ•ญ)**: ํŽ˜์ด์ง€์— ์ถœ๋ ฅํ•  `<script>` ํƒœ๊ทธ์˜ ๋ฌธ์ž์—ด URL ๋ฐฐ์—ด์ž…๋‹ˆ๋‹ค. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)๋ฅผ ํ˜ธ์ถœํ•˜๋Š” `<script>`๋ฅผ ํฌํ•จํ•˜๋ ค๋ฉด ์ด ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜์„ธ์š”. ํด๋ผ์ด์–ธํŠธ์—์„œ React๋ฅผ ์ „ํ˜€ ์‹คํ–‰ํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด ์ƒ๋žตํ•˜์„ธ์š”. @@ -59,6 +60,17 @@ app.use('/', async (request, response) => { * `onError`**(์„ ํƒ์‚ฌํ•ญ)**: ์„œ๋ฒ„ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค, [๋ณต๊ตฌ ๊ฐ€๋Šฅ](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) [๋ถˆ๊ฐ€๋Šฅ](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) ์—ฌ๋ถ€์™€ ๊ด€๊ณ„์—†์ด ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ `console.error`๋งŒ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. [์ถฉ๋Œ ๋ณด๊ณ ๋ฅผ ๊ธฐ๋ก](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server)ํ•˜๋„๋ก ์žฌ์ •์˜ํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ๋ฐ˜๋“œ์‹œ `console.error`๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์…ธ์ด ์ถœ๋ ฅ๋˜๊ธฐ ์ „์— [์ƒํƒœ ์ฝ”๋“œ๋ฅผ ์„ค์ •](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code)ํ•˜๋Š” ๋ฐ์—๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. * `progressiveChunkSize`**(์„ ํƒ์‚ฌํ•ญ)**: ์ฒญํฌ์˜ ๋ฐ”์ดํŠธ ์ˆ˜์ž…๋‹ˆ๋‹ค. [๊ธฐ๋ณธ ํœด๋ฆฌ์Šคํ‹ฑ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * `signal`**(์„ ํƒ์‚ฌํ•ญ)**: [ํ”„๋ฆฌ๋ Œ๋”๋ง์„ ์ค‘๋‹จํ•˜๊ณ ](#aborting-prerendering) ๋‚˜๋จธ์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” [์ค‘๋‹จ ์‹ ํ˜ธ](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)์ž…๋‹ˆ๋‹ค. +======= +* **optional** `options`: An object with static generation options. + * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. + * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. + * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca #### ๋ฐ˜ํ™˜๊ฐ’ {/*returns*/} @@ -276,6 +288,7 @@ function ProfilePage() { <Note> +<<<<<<< HEAD **Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋งŒ์ด Suspense ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.** ์—ฌ๊ธฐ์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ํ˜น์€ [Next.js](https://nextjs.org/docs/getting-started/react-essentials) ์ฒ˜๋Ÿผ Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -287,6 +300,9 @@ Suspense๋Š” Effect๋‚˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ํŒจ์นญ๋  ์œ„ ์˜ˆ์‹œ์˜ `Posts` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ตฌ์ฒด์ ์ธ ๋ฐฉ๋ฒ•์€ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ํ•ด๋‹น ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ฐ์ดํ„ฐ ํŒจ์นญ ๋ฌธ์„œ์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠน์ • ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense ์ง€์› ๋ฐ์ดํ„ฐ ํŒจ์นญ์€ ์•„์ง ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense๋ฅผ ์ง€์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ํ˜„์žฌ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” React์˜ ํ–ฅํ›„ ๋ฒ„์ „์—์„œ ์ œ๊ณต๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index e739b43d7..1bfb4a937 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -755,6 +755,7 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } <Note> +<<<<<<< HEAD **์‚ฌ์ „ ๋ Œ๋”๋ง ์ค‘์—๋Š” Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.** ์—ฌ๊ธฐ์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)์™€ [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) ๊ฐ™์ด Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -766,6 +767,9 @@ Activity๋Š” Effect ๋‚ด๋ถ€์—์„œ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ์ง€ํ•˜์ง€ **์•Š์Šต๋‹ˆ ์œ„์˜ `Posts` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์€ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๊ด€๋ จ ๋ฌธ์„œ์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋…์ž์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๊ธฐ๋Šฅ์€ ์•„์ง ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense ์ง€์› ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” ํ–ฅํ›„ React ๋ฒ„์ „์—์„œ ์ถœ์‹œ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), is fetched during pre-rendering. Activity does not detect data fetched inside an Effect. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca </Note> diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 3481e474f..26aa3222c 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1009,7 +1009,11 @@ state๋ฅผ ํŒŒ์ƒํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ์žฅํ™ฉํ•ด์ง€๊ณ  ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•˜ #### ์ฃผ์˜ ์‚ฌํ•ญ {/*static-getderivedstatefromprops-caveats*/} +<<<<<<< HEAD - ์ด ๋ฉ”์„œ๋“œ๋Š” ์›์ธ์— ๊ด€๊ณ„์—†์ด *๋ชจ๋“ * ๋ Œ๋”๋ง์—์„œ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋ถ€๋ชจ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ์ผ์œผํ‚ฌ ๋•Œ๋งŒ ๋ฐœ๋™ํ•˜๊ณ  ๋กœ์ปฌ `setState`์˜ ๊ฒฐ๊ณผ๊ฐ€ ์•„๋‹ ๋•Œ๋งŒ ๋ฐœ๋™ํ•˜๋Š” [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops)์™€๋Š” ๋‹ค๋ฆ…๋‹ˆ๋‹ค. +======= +- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca - ์ด ๋ฉ”์„œ๋“œ์—๋Š” ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค์— ๋Œ€ํ•œ ์•ก์„ธ์Šค ๊ถŒํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค. ์›ํ•˜๋Š” ๊ฒฝ์šฐ ํด๋ž˜์Šค ์ •์˜ ์™ธ๋ถ€ ์ปดํฌ๋„ŒํŠธ props ๋ฐ state์˜ ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋ฅผ ์ถ”์ถœํ•˜์—ฌ `static getDerivedStateFromProps`์™€ ๋‹ค๋ฅธ ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ ์‚ฌ์ด์— ์ผ๋ถ€ ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index bc383ee05..1febc7d9b 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -24,11 +24,18 @@ title: <Suspense> ### `<Suspense>` {/*suspense*/} #### Props {/*props*/} +<<<<<<< HEAD * `children`: ๊ถ๊ทน์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋ ค๋Š” ์‹ค์ œ UI์ž…๋‹ˆ๋‹ค. `children`์˜ ๋ Œ๋”๋ง์ด ์ง€์—ฐ๋˜๋ฉด, Suspense๋Š” `fallback`์„ ๋Œ€์‹  ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. * `fallback`: ์‹ค์ œ UI๊ฐ€ ๋กœ๋”ฉ๋˜๊ธฐ ์ „๊นŒ์ง€ ๋Œ€์‹  ๋ Œ๋”๋ง๋˜๋Š” ๋Œ€์ฒด UI์ž…๋‹ˆ๋‹ค. ์˜ฌ๋ฐ”๋ฅธ React ๋…ธ๋“œ ํ˜•์‹์€ ๋ฌด์—‡์ด๋“  ๋Œ€์ฒด UI๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ๋กœ๋Š” ๋ณดํ†ต ๋กœ๋”ฉ ์Šคํ”ผ๋„ˆ๋‚˜ ์Šค์ผˆ๋ ˆํ†ค์ฒ˜๋Ÿผ ๊ฐ„๋‹จํ•œ Placeholder๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. Suspense๋Š” `children`์˜ ๋ Œ๋”๋ง์ด ์ง€์—ฐ๋˜๋ฉด ์ž๋™์œผ๋กœ `fallback`์œผ๋กœ ์ „ํ™˜ํ•˜๊ณ , ๋ฐ์ดํ„ฐ๊ฐ€ ์ค€๋น„๋˜๋ฉด `children`์œผ๋กœ ๋‹ค์‹œ ์ „ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ `fallback`์˜ ๋ Œ๋”๋ง์ด ์ง€์—ฐ๋˜๋ฉด, ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋ถ€๋ชจ Suspense๊ฐ€ ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค. +======= +* `children`: The actual UI you intend to render. If `children` suspends while rendering, the Suspense boundary will switch to rendering `fallback`. +* `fallback`: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to `fallback` when `children` suspends, and back to `children` when the data is ready. If `fallback` suspends while rendering, it will activate the closest parent Suspense boundary. +* <ExperimentalBadge /> **optional** `defer`: A boolean. When `true`, React may show the `fallback` first and render or stream `children` later, even when nothing in them suspends. Use it for content that is expensive to render. Defaults to `false`. +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca #### ์ฃผ์˜ ์‚ฌํ•ญ {/*caveats*/} +<<<<<<< HEAD - React๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ๋งˆ์šดํŠธ ๋˜๊ธฐ ์ „์— ์ง€์—ฐ๋œ ๋ Œ๋”๋ง์„ ํ•˜๋Š” ๋™์•ˆ์˜ ์–ด๋–ค State๋„ ์œ ์ง€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋กœ๋”ฉ๋˜๋ฉด React๋Š” ์ผ์‹œ ์ค‘์ง€๋œ ํŠธ๋ฆฌ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. - Suspense๊ฐ€ ํŠธ๋ฆฌ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ์„ ๋•Œ ๋˜ ๋‹ค์‹œ ์ง€์—ฐ๋˜๋ฉด [`startTransition`](/reference/react/startTransition)๋‚˜ [`useDeferredValue`](/reference/react/useDeferredValue)๋กœ ์ธํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์•„๋‹Œ ํ•œ, `fallback`์ด ๋‹ค์‹œ ๋ณด์ž…๋‹ˆ๋‹ค. - React๊ฐ€ ๋‹ค์‹œ ์ผ์‹œ ์ค‘์ง€๋˜์–ด ๋ณด์ด๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ฒจ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ, ์ฝ˜ํ…์ธ  ํŠธ๋ฆฌ์—์„œ [Layout Effect](/reference/react/useLayoutEffect)๋“ค์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ฝ˜ํ…์ธ ๊ฐ€ ๋‹ค์‹œ ๋ณด์ผ ์ค€๋น„๊ฐ€ ๋˜๋ฉด React๋Š” Layout Effect๋“ค์„ ๋‹ค์‹œ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ์จ DOM ๋ ˆ์ด์•„์›ƒ์„ ์ธก์ •ํ•˜๋Š” Effect๊ฐ€ ์ฝ˜ํ…์ธ ๊ฐ€ ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” ๋™์•ˆ ๋™์ž‘ํ•˜์ง€ ์•Š๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค. @@ -37,6 +44,42 @@ title: <Suspense> --- ## ์‚ฌ์šฉ๋ฒ• {/*usage*/} +======= +- Suspense does not detect when data is fetched inside an Effect or event handler. It only activates in the [cases listed below.](#what-activates-a-suspense-boundary) +- React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch. +- If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue). +- React reveals suspended content at most once every 300ms, measured from the last reveal. Boundaries that become ready within that window are [revealed together](/blog/2025/10/01/react-19-2#batching-suspense-boundaries-for-ssr) rather than one at a time. +- If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden. +- React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more. + +--- + +### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/} + +A Suspense boundary waits for its content to be ready before revealing it. Any of the following keeps a boundary from revealing its content: + +- Lazy-loading component code with [`lazy`](/reference/react/lazy). +- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks). +- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout. [See an example below.](#waiting-for-a-stylesheet-to-load) +- Waiting for a large boundary's HTML to arrive during streaming server rendering. Sending HTML takes time, so a boundary with enough content activates even when nothing in it suspends. React reveals the content as the HTML arrives. +- <CanaryBadge /> Loading fonts. Suspense doesn't wait for fonts by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load) +- <CanaryBadge /> Loading images. Suspense doesn't wait for images by default, but during a [`<ViewTransition>`](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load) +- <ExperimentalBadge /> Performing CPU-bound render work inside a [`<Suspense defer>`](#props) boundary. + +<Note> + +#### Suspense-enabled frameworks {/*suspense-enabled-frameworks*/} + +A *Suspense-enabled framework* gives you a way to read data in your component in a way that activates the closest Suspense boundary. The exact way you load your data depends on your framework, and you'll find the details in its documentation. Under the hood, a Suspense-enabled framework maintains a cache of Promises and calls [`use`](/reference/react/use) to suspend on a Promise. + +Without a framework, you can read a Promise with `use` directly, as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components) + +</Note> + +--- + +## Usage {/*usage*/} +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ### ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ๋™์•ˆ ๋Œ€์ฒด UI<sup>Fallback</sup> ๋ณด์—ฌ์ฃผ๊ธฐ {/*displaying-a-fallback-while-content-is-loading*/} @@ -203,8 +246,9 @@ async function getAlbums() { </Sandpack> -<Note> +By contrast, code that fetches data outside of `use`, such as inside an Effect, does not activate the boundary: +<<<<<<< HEAD **Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ๋งŒ์ด Suspense ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.** ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์ด ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)์™€ [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) ๊ฐ™์ด Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ. @@ -216,8 +260,256 @@ Suspense๋Š” Effect ๋˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์—์„œ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ์ด ์œ„์˜ `Albums` ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์€ ํ”„๋ ˆ์ž„์›Œํฌ๋งˆ๋‹ค ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๊ด€๋ จ ๋ฌธ์„œ์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋…๋‹จ์ ์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” Suspense๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๊ธฐ๋Šฅ์€ ์•„์ง ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Suspense ์ง€์› ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์€ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ Suspense์™€ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณต์‹ API๋Š” ํ–ฅํ›„ React ๋ฒ„์ „์—์„œ ์ถœ์‹œ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. +======= +<Sandpack> -</Note> +```js src/App.js hidden +import { useState } from 'react'; +import ArtistPage from './ArtistPage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ( + <ArtistPage + artist={{ + id: 'the-beatles', + name: 'The Beatles', + }} + /> + ); + } else { + return ( + <button onClick={() => setShow(true)}> + Open The Beatles artist page + </button> + ); + } +} +``` + +```js src/ArtistPage.js active +import { Suspense } from 'react'; +import EffectAlbums from './EffectAlbums.js'; + +export default function ArtistPage({ artist }) { + return ( + <> + <h1>{artist.name}</h1> + <Suspense fallback={<Loading />}> + <EffectAlbums artistId={artist.id} /> + </Suspense> + </> + ); +} +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca + +function Loading() { + return <h2>๐ŸŒ€ Loading...</h2>; +} +``` + +```js src/EffectAlbums.js +import { useState, useEffect } from 'react'; +import { fetchData } from './data.js'; + +export default function EffectAlbums({ artistId }) { + const [albums, setAlbums] = useState([]); + + useEffect(() => { + let active = true; + fetchData(`/${artistId}/albums`).then(result => { + if (active) { + setAlbums(result); + } + }); + return () => { + active = false; + }; + }, [artistId]); + + // Suspense can't see this fetch, so its fallback never + // shows. The list stays empty until the data arrives. + return ( + <ul> + {albums.map(album => ( + <li key={album.id}> + {album.title} ({album.year}) + </li> + ))} + </ul> + ); +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. +// Normally, the caching logic would be inside a framework. + +let cache = new Map(); + +export function fetchData(url) { + if (!cache.has(url)) { + cache.set(url, getData(url)); + } + return cache.get(url); +} + +async function getData(url) { + if (url === '/the-beatles/albums') { + return await getAlbums(); + } else { + throw Error('Not implemented'); + } +} + +async function getAlbums() { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 3000); + }); + + return [{ + id: 13, + title: 'Let It Be', + year: 1970 + }, { + id: 12, + title: 'Abbey Road', + year: 1969 + }, { + id: 11, + title: 'Yellow Submarine', + year: 1969 + }, { + id: 10, + title: 'The Beatles', + year: 1968 + }, { + id: 9, + title: 'Magical Mystery Tour', + year: 1967 + }, { + id: 8, + title: 'Sgt. Pepper\'s Lonely Hearts Club Band', + year: 1967 + }, { + id: 7, + title: 'Revolver', + year: 1966 + }, { + id: 6, + title: 'Rubber Soul', + year: 1965 + }, { + id: 5, + title: 'Help!', + year: 1965 + }, { + id: 4, + title: 'Beatles For Sale', + year: 1964 + }, { + id: 3, + title: 'A Hard Day\'s Night', + year: 1964 + }, { + id: 2, + title: 'With The Beatles', + year: 1963 + }, { + id: 1, + title: 'Please Please Me', + year: 1963 + }]; +} +``` + +</Sandpack> + +During streaming server rendering, a boundary also activates while its HTML is still streaming in. With any streaming server rendering API, React sends [the shell](/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell) with the `fallback` first, then streams in each boundary's HTML and swaps out its `fallback` as that content arrives. Press "Render the page" to watch the page stream in: + +<Sandpack> + +```js src/App.js hidden +``` + +```html public/index.html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Streaming SSR + + + +

+ + + +``` + +```js src/index.js +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import { Suspense, use } from 'react'; +import { renderToReadableStream } from 'react-dom/server'; + +let posts = null; + +function Posts() { + const text = use(posts.promise); + return

{text}

; +} + +function ProfilePage() { + return ( + + +

Alice

+

Photographer and traveler.

+ โŒ› Loading posts...

}> + + + + + ); +} + +async function main(frame) { + posts = Promise.withResolvers(); + const stream = await renderToReadableStream(); + + // The posts resolve after the shell has streamed, so React + // streams their HTML in and swaps out the fallback. + setTimeout(() => { + posts.resolve( + 'Just got back from two weeks along the coast. The drive ' + + 'was longer than expected, but every stop was worth it. ' + + 'A full write-up and more photos are coming soon.' + ); + }, 1500); + + await flushReadableStreamToFrame(stream, frame); +} + +document.getElementById('render').addEventListener('click', () => { + main(document.getElementById('container')); +}); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + for await (const chunk of readable) { + doc.write(decoder.decode(chunk, { stream: true })); + } + doc.close(); +} +``` + + --- @@ -1991,15 +2283,108 @@ main { ### Navigation์—์„œ Suspense ์žฌ์„ค์ •ํ•˜๊ธฐ {/*resetting-suspense-boundaries-on-navigation*/} +<<<<<<< HEAD Transition์ด ์ง„ํ–‰๋˜๋Š” ๋™์•ˆ React๋Š” ์ด๋ฏธ ๋ณด์ธ ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ธฐ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ๋Š” ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋Š” ๊ฒฝ์šฐ React์— *๋‹ค๋ฅธ* ์ฝ˜ํ…์ธ ๋ผ๊ณ  ์•Œ๋ ค์ฃผ๊ณ  ์‹ถ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ `key`๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +======= +During a Transition, React avoids hiding already revealed content. However, when you navigate to *different* content, such as another user's profile, you'll want the boundary to show the fallback instead of the previous content. You can express this with a `key`: +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca ```js ``` +<<<<<<< HEAD ์‚ฌ์šฉ์ž์˜ ํ”„๋กœํ•„ ํŽ˜์ด์ง€ ๋‚ด์—์„œ ์ด๋™ ์ค‘์ธ๋ฐ ๋ฌด์–ธ๊ฐ€๊ฐ€ ์ง€์—ฐ๋˜์—ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด์„ธ์š”. ํ•ด๋‹น ์—…๋ฐ์ดํŠธ๊ฐ€ Transition์œผ๋กœ ๊ฐ์‹ธ์ ธ ์žˆ์œผ๋ฉด ์ด๋ฏธ ํ‘œ์‹œ๋œ ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•œ Fallback์ด ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ ๋‘ ๊ฐœ์˜ ์„œ๋กœ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž ํ”„๋กœํ•„ ์‚ฌ์ด๋ฅผ ์ด๋™ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ Fallback์„ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํ•œ ์‚ฌ์šฉ์ž์˜ ํƒ€์ž„๋ผ์ธ์ด ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์˜ ํƒ€์ž„๋ผ์ธ๊ณผ *๋‹ค๋ฅธ ์ฝ˜ํ…์ธ *๋ผ๊ณ , ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. `key`๋ฅผ ์ง€์ •ํ•˜๋ฉด React๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์˜ ํ”„๋กœํ•„์„ ์„œ๋กœ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ทจ๊ธ‰ํ•˜๊ณ  ํƒ์ƒ‰ํ•˜๋Š” ๋™์•ˆ Suspense๋ฅผ ์žฌ์„ค์ •ํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Suspense ํ†ตํ•ฉ ๋ผ์šฐํ„ฐ๋Š” ์ด ๋™์ž‘์„ ์ž๋™์œผ๋กœ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +======= +With a different `key`, React treats the profiles as different content and resets the Suspense boundary during navigation. The `key` can go on the boundary itself or on a component above it. Suspense-integrated routers should do this automatically. + +In the example below, opening the profile page loads the first profile. Pressing "Bob" navigates to a different profile, and the `key` resets the boundary, so the fallback shows instead of the previous user's bio. Try removing the `key`: the previous bio stays visible while the next one loads: + + + +```js src/App.js hidden +import { useState } from 'react'; +import ProfilePage from './ProfilePage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ; + } + return ( + + ); +} +``` + +```js src/ProfilePage.js active +import { Suspense, useState, startTransition } from 'react'; +import Bio from './Bio.js'; +import { fetchBio } from './data.js'; + +export default function ProfilePage() { + const [user, setUser] = useState(() => ({ + id: 'alice', + bioPromise: fetchBio('alice'), + })); + function navigate(id) { + startTransition(() => { + setUser({ id, bioPromise: fetchBio(id) }); + }); + } + return ( + <> + + + โŒ› Loading profile...

}> + + + + ); +} +``` + +```js src/Bio.js +import { use } from 'react'; + +export default function Bio({ bioPromise }) { + const bio = use(bioPromise); + return

{bio}

; +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. + +export async function fetchBio(userId) { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 1500); + }); + + return userId === 'alice' + ? 'Alice is a photographer and traveler.' + : 'Bob collects vintage synthesizers.'; +} +``` + +```css +button { + margin-right: 8px; +} +``` + + +>>>>>>> 6be2b020a0cabf2fd6dbff5c42c399b8ac323bca --- @@ -2028,7 +2413,876 @@ function Chat() { --- +<<<<<<< HEAD ## ๋ฌธ์ œ ํ•ด๊ฒฐ {/*troubleshooting*/} +======= +### Waiting for a stylesheet to load {/*waiting-for-a-stylesheet-to-load*/} + +A stylesheet rendered with [`` and a `precedence` prop](/reference/react-dom/components/link#special-rendering-behavior) blocks the Suspense boundary until the stylesheet loads, up to a timeout, so the content doesn't appear unstyled. + +In the example below, the `Card` component renders a stylesheet with `precedence`. Press "Show card": React shows the fallback until the stylesheet has loaded, and then reveals the card with its styles applied. + +For comparison, the second button performs the same update without React, in a separate document. Nothing waits for the stylesheet, so the card's text appears in a fallback font first and then switches: + + + +```js +import { Suspense, useState, startTransition } from 'react'; +import { freshStylesheetUrl } from './styles.js'; +import VanillaCard from './VanillaCard.js'; + +function Card({ href }) { + return ( + <> + +
This card uses a font from the stylesheet.
+ + ); +} + +export default function App() { + const [href, setHref] = useState(null); + return ( + <> + + {href && ( + โŒ› Loading styles...

}> + + + )} +
+ + + ); +} +``` + +```js src/VanillaCard.js +import { useRef } from 'react'; +import { freshStylesheetUrl } from './styles.js'; + +export default function VanillaCard() { + const ref = useRef(null); + function show() { + const doc = ref.current.contentWindow.document; + doc.open(); + doc.write(` + +
This card uses a font from the stylesheet.
+ + `); + doc.close(); + } + return ( + <> + +