diff --git a/package.json b/package.json
index 01b46a0c2..0a17796b6 100644
--- a/package.json
+++ b/package.json
@@ -13,17 +13,25 @@
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
+<<<<<<< HEAD
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss lint-editorconfig",
+=======
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks",
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     "tsc": "tsc --noEmit",
     "start": "next start",
     "postinstall": "is-ci || husky install .husky",
     "check-all": "npm-run-all prettier lint:fix tsc rss",
     "rss": "node scripts/generateRss.js",
+<<<<<<< HEAD
     "cache-reset": "rm -rf node_modules/.cache && rm -rf .next && yarn cache clean",
     "lint-editorconfig": "yarn editorconfig-checker",
     "textlint-test": "yarn mocha ./textlint/tests/utils && yarn mocha ./textlint/tests/rules",
     "textlint-docs": "node ./textlint/generators/genTranslateGlossaryDocs.js && git add wiki/translate-glossary.md",
     "textlint-lint": "yarn textlint ./src/content --rulesdir ./textlint/rules -f pretty-error && npx --yes eslint@9 -c eslint.config.mjs"
+=======
+    "deadlinks": "node scripts/deadLinkChecker.js"
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",
@@ -64,7 +72,11 @@
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+<<<<<<< HEAD
     "editorconfig-checker": "^6.0.1",
+=======
+    "chalk": "4.1.2",
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js
new file mode 100644
index 000000000..90593b878
--- /dev/null
+++ b/scripts/deadLinkChecker.js
@@ -0,0 +1,385 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const globby = require('globby');
+const chalk = require('chalk');
+
+const CONTENT_DIR = path.join(__dirname, '../src/content');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+const fileCache = new Map();
+const anchorMap = new Map(); // Map<filepath, Set<anchorId>>
+const contributorMap = new Map(); // Map<anchorId, URL>
+const redirectMap = new Map(); // Map<source, destination>
+let errorCodes = new Set();
+
+async function readFileWithCache(filePath) {
+  if (!fileCache.has(filePath)) {
+    try {
+      const content = await fs.promises.readFile(filePath, 'utf8');
+      fileCache.set(filePath, content);
+    } catch (error) {
+      throw new Error(`Failed to read file ${filePath}: ${error.message}`);
+    }
+  }
+  return fileCache.get(filePath);
+}
+
+async function fileExists(filePath) {
+  try {
+    await fs.promises.access(filePath, fs.constants.R_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getMarkdownFiles() {
+  // Convert Windows paths to POSIX for globby compatibility
+  const baseDir = CONTENT_DIR.replace(/\\/g, '/');
+  const patterns = [
+    path.posix.join(baseDir, '**/*.md'),
+    path.posix.join(baseDir, '**/*.mdx'),
+  ];
+  return globby.sync(patterns);
+}
+
+function extractAnchorsFromContent(content) {
+  const anchors = new Set();
+
+  // MDX-style heading IDs: {/*anchor-id*/}
+  const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g;
+  let match;
+  while ((match = mdxPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // HTML id attributes
+  const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g;
+  while ((match = htmlIdPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // Markdown heading with explicit ID: ## Heading {#anchor-id}
+  const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm;
+  while ((match = markdownHeadingPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  return anchors;
+}
+
+async function buildAnchorMap(files) {
+  for (const filePath of files) {
+    const content = await readFileWithCache(filePath);
+    const anchors = extractAnchorsFromContent(content);
+    if (anchors.size > 0) {
+      anchorMap.set(filePath, anchors);
+    }
+  }
+}
+
+function extractLinksFromContent(content) {
+  const linkPattern = /\[([^\]]*)\]\(([^)]+)\)/g;
+  const links = [];
+  let match;
+
+  while ((match = linkPattern.exec(content)) !== null) {
+    const [, linkText, linkUrl] = match;
+    if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {
+      const lines = content.substring(0, match.index).split('\n');
+      const line = lines.length;
+      const lastLineStart =
+        lines.length > 1 ? content.lastIndexOf('\n', match.index - 1) + 1 : 0;
+      const column = match.index - lastLineStart + 1;
+
+      links.push({
+        text: linkText,
+        url: linkUrl,
+        line,
+        column,
+      });
+    }
+  }
+
+  return links;
+}
+
+async function findTargetFile(urlPath) {
+  // Check if it's an image or static asset that might be in the public directory
+  const imageExtensions = [
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.svg',
+    '.ico',
+    '.webp',
+  ];
+  const hasImageExtension = imageExtensions.some((ext) =>
+    urlPath.toLowerCase().endsWith(ext)
+  );
+
+  if (hasImageExtension || urlPath.includes('.')) {
+    // Check in public directory (with and without leading slash)
+    const publicPaths = [
+      path.join(PUBLIC_DIR, urlPath),
+      path.join(PUBLIC_DIR, urlPath.substring(1)),
+    ];
+
+    for (const p of publicPaths) {
+      if (await fileExists(p)) {
+        return p;
+      }
+    }
+  }
+
+  const possiblePaths = [
+    path.join(CONTENT_DIR, urlPath + '.md'),
+    path.join(CONTENT_DIR, urlPath + '.mdx'),
+    path.join(CONTENT_DIR, urlPath, 'index.md'),
+    path.join(CONTENT_DIR, urlPath, 'index.mdx'),
+    // Without leading slash
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'),
+  ];
+
+  for (const p of possiblePaths) {
+    if (await fileExists(p)) {
+      return p;
+    }
+  }
+  return null;
+}
+
+async function validateLink(link) {
+  const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;
+  const anchorMatch = link.url.match(urlAnchorPattern);
+  const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');
+
+  if (urlWithoutAnchor === '/') {
+    return {valid: true};
+  }
+
+  // Check for redirects
+  if (redirectMap.has(urlWithoutAnchor)) {
+    const redirectDestination = redirectMap.get(urlWithoutAnchor);
+    if (
+      redirectDestination.startsWith('http://') ||
+      redirectDestination.startsWith('https://')
+    ) {
+      return {valid: true};
+    }
+    const redirectedLink = {
+      ...link,
+      url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),
+    };
+    return validateLink(redirectedLink);
+  }
+
+  // Check if it's an error code link
+  const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/);
+  if (errorCodeMatch) {
+    const code = errorCodeMatch[1];
+    if (!errorCodes.has(code)) {
+      return {
+        valid: false,
+        reason: `Error code ${code} not found in React error codes`,
+      };
+    }
+    return {valid: true};
+  }
+
+  // Check if it's a contributor link on the team or acknowledgements page
+  if (
+    anchorMatch &&
+    (urlWithoutAnchor === '/community/team' ||
+      urlWithoutAnchor === '/community/acknowledgements')
+  ) {
+    const anchorId = anchorMatch[1].toLowerCase();
+    if (contributorMap.has(anchorId)) {
+      const correctUrl = contributorMap.get(anchorId);
+      if (correctUrl !== link.url) {
+        return {
+          valid: false,
+          reason: `Contributor link should be updated to: ${correctUrl}`,
+        };
+      }
+      return {valid: true};
+    } else {
+      return {
+        valid: false,
+        reason: `Contributor link not found`,
+      };
+    }
+  }
+
+  const targetFile = await findTargetFile(urlWithoutAnchor);
+
+  if (!targetFile) {
+    return {
+      valid: false,
+      reason: `Target file not found for: ${urlWithoutAnchor}`,
+    };
+  }
+
+  // Only check anchors for content files, not static assets
+  if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) {
+    const anchorId = anchorMatch[1].toLowerCase();
+
+    // TODO handle more special cases. These are usually from custom MDX components that include
+    // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag.
+    switch (anchorId) {
+      case 'challenges':
+      case 'recap': {
+        return {valid: true};
+      }
+    }
+
+    const fileAnchors = anchorMap.get(targetFile);
+
+    if (!fileAnchors || !fileAnchors.has(anchorId)) {
+      return {
+        valid: false,
+        reason: `Anchor #${anchorMatch[1]} not found in ${path.relative(
+          CONTENT_DIR,
+          targetFile
+        )}`,
+      };
+    }
+  }
+
+  return {valid: true};
+}
+
+async function processFile(filePath) {
+  const content = await readFileWithCache(filePath);
+  const links = extractLinksFromContent(content);
+  const deadLinks = [];
+
+  for (const link of links) {
+    const result = await validateLink(link);
+    if (!result.valid) {
+      deadLinks.push({
+        file: path.relative(process.cwd(), filePath),
+        line: link.line,
+        column: link.column,
+        text: link.text,
+        url: link.url,
+        reason: result.reason,
+      });
+    }
+  }
+
+  return {deadLinks, totalLinks: links.length};
+}
+
+async function buildContributorMap() {
+  const teamFile = path.join(CONTENT_DIR, 'community/team.md');
+  const teamContent = await readFileWithCache(teamFile);
+
+  const teamMemberPattern = /<TeamMember[^>]*permalink=["']([^"']+)["']/g;
+  let match;
+
+  while ((match = teamMemberPattern.exec(teamContent)) !== null) {
+    const permalink = match[1];
+    contributorMap.set(permalink, `/community/team#${permalink}`);
+  }
+
+  const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md');
+  const ackContent = await readFileWithCache(ackFile);
+  const contributorPattern = /\*\s*\[([^\]]+)\]\(([^)]+)\)/g;
+
+  while ((match = contributorPattern.exec(ackContent)) !== null) {
+    const name = match[1];
+    const url = match[2];
+    const hyphenatedName = name.toLowerCase().replace(/\s+/g, '-');
+    if (!contributorMap.has(hyphenatedName)) {
+      contributorMap.set(hyphenatedName, url);
+    }
+  }
+}
+
+async function fetchErrorCodes() {
+  try {
+    const response = await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    );
+    if (!response.ok) {
+      throw new Error(`Failed to fetch error codes: ${response.status}`);
+    }
+    const codes = await response.json();
+    errorCodes = new Set(Object.keys(codes));
+    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
+  } catch (error) {
+    throw new Error(`Failed to fetch error codes: ${error.message}`);
+  }
+}
+
+async function buildRedirectsMap() {
+  try {
+    const vercelConfigPath = path.join(__dirname, '../vercel.json');
+    const vercelConfig = JSON.parse(
+      await fs.promises.readFile(vercelConfigPath, 'utf8')
+    );
+
+    if (vercelConfig.redirects) {
+      for (const redirect of vercelConfig.redirects) {
+        redirectMap.set(redirect.source, redirect.destination);
+      }
+      console.log(
+        chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`)
+      );
+    }
+  } catch (error) {
+    console.log(
+      chalk.yellow(
+        `Warning: Could not load redirects from vercel.json: ${error.message}\n`
+      )
+    );
+  }
+}
+
+async function main() {
+  const files = getMarkdownFiles();
+  console.log(chalk.gray(`Checking ${files.length} markdown files...`));
+
+  await fetchErrorCodes();
+  await buildRedirectsMap();
+  await buildContributorMap();
+  await buildAnchorMap(files);
+
+  const filePromises = files.map((filePath) => processFile(filePath));
+  const results = await Promise.all(filePromises);
+  const deadLinks = results.flatMap((r) => r.deadLinks);
+  const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);
+
+  if (deadLinks.length > 0) {
+    console.log('\n');
+    for (const link of deadLinks) {
+      console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));
+      console.log(chalk.reset(`  Link text: ${link.text}`));
+      console.log(chalk.reset(`  URL: ${link.url}`));
+      console.log(`  ${chalk.red('✗')} ${chalk.red(link.reason)}\n`);
+    }
+
+    console.log(
+      chalk.red(
+        `\nFound ${deadLinks.length} dead link${
+          deadLinks.length > 1 ? 's' : ''
+        } out of ${totalLinks} total links\n`
+      )
+    );
+    process.exit(1);
+  }
+
+  console.log(chalk.green(`\n✓ All ${totalLinks} links are valid!\n`));
+  process.exit(0);
+}
+
+main().catch((error) => {
+  console.log(chalk.red(`Error: ${error.message}`));
+  process.exit(1);
+});
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 8c1219c2a..3043aff07 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -782,9 +782,7 @@ function CommunityGallery() {
   }, []);
 
   return (
-    <div
-      ref={ref}
-      className="relative flex overflow-x-hidden overflow-y-visible w-auto">
+    <div ref={ref} className="relative flex overflow-x-clip w-auto">
       <div
         className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
         style={{
@@ -811,21 +809,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
+            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
           )}>
           <div
             className={cn(
-              'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
               i % 2 === 0
-                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
-                : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
+                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
+                : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
             )}>
-            <img
-              loading={isLazy ? 'lazy' : 'eager'}
-              src={src}
-              alt={alt}
-              className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
-            />
+            <div
+              className={cn(
+                'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
+              )}>
+              <img
+                loading={isLazy ? 'lazy' : 'eager'}
+                src={src}
+                alt={alt}
+                className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+              />
+            </div>
           </div>
         </div>
       ))}
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 2fb2cd398..5e322489a 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -107,7 +107,11 @@ Activity는 여전히 연구 중이며, 라이브러리 개발자에게 노출
 
 이번 업데이트 외에도 우리 팀은 컨퍼런스에서 발표하고 팟캐스트 출연을 통해 우리의 작업에 관해 이야기를 나누고 질문에 답변했습니다.
 
+<<<<<<< HEAD
 - [Sathya Gunasekaran](/community/team#sathya-gunasekaran)은 [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) 컨퍼런스에서 React 컴파일러에 관해 이야기했습니다.
+=======
+- [Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 - [Dan Abramov](/community/team#dan-abramov)은 [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s)에서 "다른 차원의 React"를 주제로 강연했습니다. 이곳에서 React 서버 컴포넌트와 액션을 어떻게 만들었는지에 관한 대안적인 역사를 탐구했습니다.
 
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 7e25ac7a6..db665e797 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
@@ -72,11 +72,11 @@ Or, if you're using Yarn:
 yarn add -D eslint-plugin-react-compiler@beta
 </TerminalBlock>
 
-After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
 
 ## Backwards Compatibility {/*backwards-compatibility*/}
 
-React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/reference/react-compiler/configuration#react-17-18).
 
 ## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
 
@@ -86,7 +86,7 @@ React Compiler can also be used to compile libraries. Because React Compiler nee
 
 Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
 
-[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+[You can find more docs on this here.](/reference/react-compiler/compiling-libraries)
 
 ## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
 
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 c725e13f2..780ded2fb 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
@@ -2495,7 +2495,7 @@ For example, we can slow down the `default` cross fade animation:
 </ViewTransition>
 ```
 
-And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes):
+And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class):
 
 ```css
 ::view-transition-old(.slow-fade) {
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index b4da5cdff..479ae50d4 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -137,9 +137,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Portugal {/*portugal*/}
 * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
 
-## Scotland (UK) {/*scotland-uk*/}
-* [Edinburgh](https://www.meetup.com/React-Scotland/)
-
 ## Spain {/*spain*/}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
 
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index f6f212b83..24ed29417 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -24,7 +24,11 @@ title: 기존 프로젝트에 React 추가하기
 2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*<sup>*Base Path*</sup>로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!)
 3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 앱에서 처리되도록 하세요.
 
+<<<<<<< HEAD
 이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들<sup>Best Practices</sup>로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)
+=======
+This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 자바스크립트를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby의 경우 기본값)를 `/some-app/`에서 대신 제공하세요.
 
diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
new file mode 100644
index 000000000..1883125a6
--- /dev/null
+++ b/src/content/learn/react-compiler/debugging.md
@@ -0,0 +1,93 @@
+---
+title: Debugging and Troubleshooting
+---
+
+<Intro>
+This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues.
+</Intro>
+
+<YouWillLearn>
+
+* The difference between compiler errors and runtime issues
+* Common patterns that break compilation
+* Step-by-step debugging workflow
+
+</YouWillLearn>
+
+## Understanding Compiler Behavior {/*understanding-compiler-behavior*/}
+
+React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior.
+
+### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/}
+
+**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail.
+
+**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped.
+
+When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur.
+
+
+## Common Breaking Patterns {/*common-breaking-patterns*/}
+
+One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.
+
+Common scenarios where this occurs:
+
+- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders
+- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
+- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization
+
+## Debugging Workflow {/*debugging-workflow*/}
+
+Follow these steps when you encounter issues:
+
+### Compiler Build Errors {/*compiler-build-errors*/}
+
+If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with:
+- The error message
+- The code that caused the error
+- Your React and compiler versions
+
+### Runtime Issues {/*runtime-issues*/}
+
+For runtime behavior issues:
+
+### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/}
+
+Use `"use no memo"` to isolate whether an issue is compiler-related:
+
+```js
+function ProblematicComponent() {
+  "use no memo"; // Skip compilation for this component
+  // ... rest of component
+}
+```
+
+If the issue disappears, it's likely related to a Rules of React violation.
+
+You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed.
+
+### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/}
+
+1. Identify the root cause (often memoization-for-correctness)
+2. Test after each fix
+3. Remove `"use no memo"` once fixed
+4. Verify the component shows the ✨ badge in React DevTools
+
+## Reporting Compiler Bugs {/*reporting-compiler-bugs*/}
+
+If you believe you've found a compiler bug:
+
+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/facebook/react/issues/new?template=compiler_bug_report.yml)**:
+   - React and compiler versions
+   - Minimal reproduction code
+   - Expected vs actual behavior
+   - Any error messages
+
+## Next Steps {/*next-steps*/}
+
+- Review the [Rules of React](/reference/rules) to prevent issues
+- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md
new file mode 100644
index 000000000..56d932034
--- /dev/null
+++ b/src/content/learn/react-compiler/incremental-adoption.md
@@ -0,0 +1,225 @@
+---
+title: Incremental Adoption
+---
+
+<Intro>
+React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
+</Intro>
+
+<YouWillLearn>
+
+* Why incremental adoption is recommended
+* Using Babel overrides for directory-based adoption
+* Using the "use memo" directive for opt-in compilation
+* Using the "use no memo" directive to exclude components
+* Runtime feature flags with gating
+* Monitoring your adoption progress
+
+</YouWillLearn>
+
+## Why Incremental Adoption? {/*why-incremental-adoption*/}
+
+React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
+
+Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
+
+Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
+
+By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
+
+## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
+
+There are three main approaches to adopt React Compiler incrementally:
+
+1. **Babel overrides** - Apply the compiler to specific directories
+2. **Opt-in with "use memo"** - Only compile components that explicitly opt in
+3. **Runtime gating** - Control compilation with feature flags
+
+All approaches allow you to test the compiler on specific parts of your application before full rollout.
+
+## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
+
+Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
+
+### Basic Configuration {/*basic-configuration*/}
+
+Start by applying the compiler to a specific directory:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins that apply to all files
+  ],
+  overrides: [
+    {
+      test: './src/modern/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    }
+  ]
+};
+```
+
+### Expanding Coverage {/*expanding-coverage*/}
+
+As you gain confidence, add more directories:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins
+  ],
+  overrides: [
+    {
+      test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'],
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    },
+    {
+      test: './src/legacy/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        // Different plugins for legacy code
+      ]
+    }
+  ]
+};
+```
+
+### With Compiler Options {/*with-compiler-options*/}
+
+You can also configure compiler options per override:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [],
+  overrides: [
+    {
+      test: './src/experimental/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    },
+    {
+      test: './src/production/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    }
+  ]
+};
+```
+
+
+## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
+
+For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
+
+<Note>
+This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
+</Note>
+
+### Annotation Mode Configuration {/*annotation-mode-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation',
+    }],
+  ],
+};
+```
+
+### Using the Directive {/*using-the-directive*/}
+
+Add `"use memo"` at the beginning of functions you want to compile:
+
+```js
+function TodoList({ todos }) {
+  "use memo"; // Opt this component into compilation
+
+  const sortedTodos = todos.slice().sort();
+
+  return (
+    <ul>
+      {sortedTodos.map(todo => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </ul>
+  );
+}
+
+function useSortedData(data) {
+  "use memo"; // Opt this hook into compilation
+
+  return data.slice().sort();
+}
+```
+
+With `compilationMode: 'annotation'`, you must:
+- Add `"use memo"` to every component you want optimized
+- Add `"use memo"` to every custom hook
+- Remember to add it to new components
+
+This gives you precise control over which components are compiled while you evaluate the compiler's impact.
+
+## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
+
+The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
+
+### How Gating Works {/*how-gating-works*/}
+
+The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs.
+
+### Gating Configuration {/*gating-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: {
+        source: 'ReactCompilerFeatureFlags',
+        importSpecifierName: 'isCompilerEnabled',
+      },
+    }],
+  ],
+};
+```
+
+### Implementing the Feature Flag {/*implementing-the-feature-flag*/}
+
+Create a module that exports your gating function:
+
+```js
+// ReactCompilerFeatureFlags.js
+export function isCompilerEnabled() {
+  // Use your feature flag system
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+## Troubleshooting Adoption {/*troubleshooting-adoption*/}
+
+If you encounter issues during adoption:
+
+1. Use `"use no memo"` to temporarily exclude problematic components
+2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues
+3. Fix Rules of React violations identified by the ESLint plugin
+4. Consider using `compilationMode: 'annotation'` for more gradual adoption
+
+## Next Steps {/*next-steps*/}
+
+- Read the [configuration guide](/reference/react-compiler/configuration) for more options
+- Learn about [debugging techniques](/learn/react-compiler/debugging)
+- Check the [API reference](/reference/react-compiler/configuration) for all compiler options
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md
new file mode 100644
index 000000000..480187ed5
--- /dev/null
+++ b/src/content/learn/react-compiler/index.md
@@ -0,0 +1,33 @@
+---
+title: React Compiler
+---
+
+## Introduction {/*introduction*/}
+
+Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
+
+## Installation {/*installation*/}
+
+Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools.
+
+
+## Incremental Adoption {/*incremental-adoption*/}
+
+Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet.
+
+## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/}
+
+When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
+
+## Configuration and Reference {/*configuration-and-reference*/}
+
+For detailed configuration options and API reference:
+
+- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility
+- [Directives](/reference/react-compiler/directives) - Function-level compilation control
+- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
new file mode 100644
index 000000000..3606c9c6d
--- /dev/null
+++ b/src/content/learn/react-compiler/installation.md
@@ -0,0 +1,258 @@
+---
+title: Installation
+---
+
+<Intro>
+This guide will help you install and configure React Compiler in your React application.
+</Intro>
+
+<YouWillLearn>
+
+* How to install React Compiler
+* Basic configuration for different build tools
+* How to verify your setup is working
+
+</YouWillLearn>
+
+## Prerequisites {/*prerequisites*/}
+
+React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
+
+<Note>
+React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
+</Note>
+
+## Installation {/*installation*/}
+
+Install React Compiler as a `devDependency`:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with pnpm:
+
+<TerminalBlock>
+pnpm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+## Basic Setup {/*basic-setup*/}
+
+React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
+
+The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
+
+<Pitfall>
+React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
+</Pitfall>
+
+### Babel {/*babel*/}
+
+Create or update your `babel.config.js`:
+
+```js {3}
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler', // must run first!
+    // ... other plugins
+  ],
+  // ... other config
+};
+```
+
+### Vite {/*vite*/}
+
+If you use Vite, you can add the plugin to vite-plugin-react:
+
+```js {3,9}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+Alternatively, if you prefer a separate Babel plugin for Vite:
+
+<TerminalBlock>
+npm install -D vite-plugin-babel
+</TerminalBlock>
+
+```js {2,11}
+// vite.config.js
+import babel from 'vite-plugin-babel';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({
+      babelConfig: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+### Next.js {/*usage-with-nextjs*/}
+
+Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
+
+### React Router {/*usage-with-react-router*/}
+Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+<TerminalBlock>
+{`npm install vite-plugin-babel`}
+</TerminalBlock>
+
+```js {3-4,16}
+// vite.config.js
+import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
+import { reactRouter } from "@react-router/dev/vite";
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    babel({
+      filter: /\.[jt]sx?$/,
+      babelConfig: {
+        presets: ["@babel/preset-typescript"], // if you use TypeScript
+        plugins: [
+          ["babel-plugin-react-compiler", ReactCompilerConfig],
+        ],
+      },
+    }),
+  ],
+});
+```
+
+### Webpack {/*usage-with-webpack*/}
+
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+
+### Expo {/*usage-with-expo*/}
+
+Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
+
+### Metro (React Native) {/*usage-with-react-native-metro*/}
+
+React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
+
+### Rspack {/*usage-with-rspack*/}
+
+Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+
+### Rsbuild {/*usage-with-rsbuild*/}
+
+Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+
+
+## ESLint Integration {/*eslint-integration*/}
+
+React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+
+Install the ESLint plugin:
+
+<TerminalBlock>
+npm install -D eslint-plugin-react-hooks@rc
+</TerminalBlock>
+
+Then enable the compiler rule in your ESLint configuration:
+
+```js {3}
+// .eslintrc.js
+module.exports = {
+  rules: {
+    'react-hooks/react-compiler': 'error',
+  },
+};
+```
+
+The ESLint rule will:
+- Identify violations of the [Rules of React](/reference/rules)
+- Show which components can't be optimized
+- Provide helpful error messages for fixing issues
+
+## Verify Your Setup {/*verify-your-setup*/}
+
+After installation, verify that React Compiler is working correctly.
+
+### Check React DevTools {/*check-react-devtools*/}
+
+Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
+
+1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
+2. Open your app in development mode
+3. Open React DevTools
+4. Look for the ✨ emoji next to component names
+
+If the compiler is working:
+- Components will show a "Memo ✨" badge in React DevTools
+- Expensive calculations will be automatically memoized
+- No manual `useMemo` is required
+
+### Check Build Output {/*check-build-output*/}
+
+You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
+
+```js
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Opting out specific components {/*opting-out-specific-components*/}
+
+If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
+
+```js
+function ProblematicComponent() {
+  "use no memo";
+  // Component code here
+}
+```
+
+This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
+
+For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
+
+## Next Steps {/*next-steps*/}
+
+Now that you have React Compiler installed, learn more about:
+
+- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
+- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
+- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
+- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
+- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
new file mode 100644
index 000000000..440c66ab6
--- /dev/null
+++ b/src/content/learn/react-compiler/introduction.md
@@ -0,0 +1,176 @@
+---
+title: Introduction
+---
+
+<Intro>
+React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+</Intro>
+
+<YouWillLearn>
+
+* What React Compiler does
+* Getting started with the compiler
+* Incremental adoption strategies
+* Debugging and troubleshooting when things go wrong
+* Using the compiler on your React library
+
+</YouWillLearn>
+
+<Note>
+React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag.
+</Note>
+
+## What does React Compiler do? {/*what-does-react-compiler-do*/}
+
+React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.
+
+### Before React Compiler {/*before-react-compiler*/}
+
+Without the compiler, you need to manually memoize components and values to optimize re-renders:
+
+```js
+import { useMemo, useCallback, memo } from 'react';
+
+const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
+  const processedData = useMemo(() => {
+    return expensiveProcessing(data);
+  }, [data]);
+
+  const handleClick = useCallback((item) => {
+    onClick(item.id);
+  }, [onClick]);
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+});
+```
+
+### After React Compiler {/*after-react-compiler*/}
+
+With React Compiler, you write the same code without manual memoization:
+
+```js
+function ExpensiveComponent({ data, onClick }) {
+  const processedData = expensiveProcessing(data);
+
+  const handleClick = (item) => {
+    onClick(item.id);
+  };
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+}
+```
+
+_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_
+
+React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary.
+
+<DeepDive>
+#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+
+1. **Skipping cascading re-rendering of components**
+    * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
+1. **Skipping expensive calculations from outside of React**
+    * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+
+#### Optimizing Re-renders {/*optimizing-re-renders*/}
+
+React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+
+```javascript
+function FriendList({ friends }) {
+  const onlineCount = useFriendOnlineCount();
+  if (friends.length === 0) {
+    return <NoFriends />;
+  }
+  return (
+    <div>
+      <span>{onlineCount} online</span>
+      {friends.map((friend) => (
+        <FriendListCard key={friend.id} friend={friend} />
+      ))}
+      <MessageButton />
+    </div>
+  );
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+
+React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+
+#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+
+React Compiler can also automatically memoize expensive calculations used during rendering:
+
+```js
+// **Not** memoized by React Compiler, since this is not a component or hook
+function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
+
+// Memoized by React Compiler since this is a component
+function TableContainer({ items }) {
+  // This function call would be memoized:
+  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
+  // ...
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+
+However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+
+- React Compiler only memoizes React components and hooks, not every function
+- React Compiler's memoization is not shared across multiple components or hooks
+
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+</DeepDive>
+
+## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work.
+
+### Is it safe to use? {/*is-it-safe-to-use*/}
+
+React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+
+## What build tools are supported? {/*what-build-tools-are-supported*/}
+
+React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild.
+
+React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future.
+
+Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up.
+
+## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+
+If you are using React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
+
+This is done out of caution as a common anti-pattern with manual memoization is using it for correctness.  This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
+
+## Try React Compiler {/*try-react-compiler*/}
+
+This section will help you get started with React Compiler and understand how to use it effectively in your projects.
+
+* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools
+* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19
+* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs
+* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases
+* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler
+* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code
+* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index a4cb2fde7..ae6891461 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -732,8 +732,13 @@ Effect 안에서 `fetch` 호출을 작성하는 것은 [데이터를 가져오
 
 이 단점 목록은 React에만 해당되는 것은 아닙니다. 어떤 라이브러리에서든 마운트 시에 데이터를 가져온다면 비슷한 단점이 존재합니다. 마운트 시에 데이터를 페칭하는 것도 라우팅과 마찬가지로 잘 수행하기 어려운 작업이므로 다음 접근 방식을 권장합니다.
 
+<<<<<<< HEAD
 - **[프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 사용하는 경우 해당 프레임워크의 내장 데이터 페칭 메커니즘을 사용하세요.** 현대적인 React 프레임워크에는 위의 단점을 겪지 않는 효율적이고 통합적인 데이터 페칭 메커니즘이 포함되어 있습니다.
 - **그렇지 않은 경우 클라이언트 측 캐시를 사용하거나 구축하는 것을 고려하세요.** 인기 있는 오픈 소스 솔루션으로는 [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) 및 [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview)이 있습니다. 직접 솔루션을 구축할 수도 있으며 이 경우 Effect를 내부적으로 사용하면서 요청 중복을 제거하고 응답을 캐시하고 네트워크 폭포를 피하는 로직을 추가할 것입니다. (데이터를 사전에 로드하거나 데이터 요구 사항을 라우트)
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 이러한 접근 방식 중 어느 것도 적합하지 않은 경우, Effect 내에서 데이터를 직접 가져오는 것을 계속하셔도 됩니다.
 
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 7822f3623..1ccf1a984 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -11,16 +11,27 @@ TypeScript는 JavaScript 코드 베이스에 타입 정의를 추가하는 데 
 
 <YouWillLearn>
 
+<<<<<<< HEAD
 * [React 컴포넌트가 있는 TypeScript](/learn/typescript#typescript-with-react-components)
 * [Hooks 타이핑 예시](/learn/typescript#example-hooks)
 * [`@types/react`의 일반적인 타입](/learn/typescript/#useful-types)
 * [추가 학습 위치](/learn/typescript/#further-learning)
+=======
+* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
+* [Examples of typing with Hooks](/learn/typescript#example-hooks)
+* [Common types from `@types/react`](/learn/typescript#useful-types)
+* [Further learning locations](/learn/typescript#further-learning)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 </YouWillLearn>
 
 ## 설치 {/*installation*/}
 
+<<<<<<< HEAD
 모든 [프로덕션 수준의 React 프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 TypeScript 사용을 지원합니다. 프레임워크별 설치 가이드를 따르세요.
+=======
+All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
@@ -124,7 +135,11 @@ export default App = AppTSX;
 
 ## Hooks 예시 {/*example-hooks*/}
 
+<<<<<<< HEAD
 `@types/react`의 타입 정의에는 내장 Hooks에 대한 타입이 포함되어 있으므로 추가 설정 없이 컴포넌트에 사용할 수 있습니다. 컴포넌트에 작성한 코드를 고려하도록 만들어졌기 때문에 대부분의 경우 [추론된 타입](https://www.typescriptlang.org/ko/docs/handbook/type-inference.html)을 얻을 수 있으며, 이상적으로는 타입을 제공하는 사소한 작업을 처리할 필요가 없습니다.
+=======
+The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 하지만, hooks에 타입을 제공하는 방법의 몇 가지 예시를 볼 수 있습니다.
 
@@ -140,7 +155,11 @@ const [enabled, setEnabled] = useState(false);
 `boolean` 타입이 `enabled`에 할당되고, `setEnabled` 는 `boolean` 인수나 `boolean`을 반환하는 함수를 받는 함수가 됩니다. state에 대한 타입을 명시적으로 제공하려면 `useState` 호출에 타입 인수를 제공하면 됩니다.
 
 ```ts
+<<<<<<< HEAD
 // 명시적으로 타입을 "boolean"으로 설정합니다
+=======
+// Explicitly set the type to "boolean"
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 const [enabled, setEnabled] = useState<boolean>(false);
 ```
 
@@ -284,7 +303,11 @@ export default App = AppTSX;
 
 </Sandpack>
 
+<<<<<<< HEAD
 이 기술은 합리적인 기본값이 있을 때 효과적이지만 그렇지 않은 경우도 간혹 있으며, 그러한 경우 `null`이 기본값으로 합리적이라고 느낄 수 있습니다. 그러나, 타입 시스템이 코드를 이해할 수 있도록 하려면 `createContext`에서 `ContextShape | null`을 명시적으로 설정해야 합니다.
+=======
+This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 이에 따라 context 소비자에 대한 타입에서 `| null`을 제거해야 하는 문제가 발생합니다. 권장 사항은 Hook이 런타임에 존재 여부를 검사하고 존재하지 않을 경우 에러를 throw 하는 것입니다.
 
@@ -329,7 +352,17 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
+<<<<<<< HEAD
 [`useMemo`](/reference/react/useMemo) Hooks는 함수 호출로부터 memorized 된 값을 생성/재접근하여, 두 번째 매개변수로 전달된 종속성이 변경될 때만 함수를 다시 실행합니다. Hook을 호출한 결과는 첫 번째 매개변수에 있는 함수의 반환 값에서 추론됩니다. Hook에 타입 인수를 제공하여 더욱더 명확하게 할 수 있습니다.
+=======
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ```ts
 // visibleTodos의 타입은 filterTodos의 반환 값에서 추론됩니다.
@@ -339,7 +372,17 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
+<<<<<<< HEAD
 [`useCallback`](/reference/react/useCallback)는 두 번째 매개변수로 전달되는 종속성이 같다면 함수에 대한 안정적인 참조를 제공합니다. `useMemo`와 마찬가지로, 함수의 타입은 첫 번째 매개변수에 있는 함수의 반환 값에서 추론되며, Hook에 타입 인수를 제공하여 더욱더 명확하게 할 수 있습니다.
+=======
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
+The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 
 ```ts
@@ -350,7 +393,11 @@ const handleClick = useCallback(() => {
 
 TypeScript strict mode에서 작업할 때 `useCallback`을 사용하려면 콜백에 매개변수를 위한 타입을 추가해야 합니다. 콜백의 타입은 함수의 반환 값에서 추론되고, 매개변수 없이는 타입을 완전히 이해할 수 없기 때문입니다.
 
+<<<<<<< HEAD
 코드 스타일 선호도에 따라, 콜백을 정의하는 동시에 이벤트 핸들러의 타입을 제공하기 위해 React 타입의 `*EventHandler` 함수를 사용할 수 있습니다.
+=======
+Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ```ts
 import { useState, useCallback } from 'react';
@@ -433,7 +480,11 @@ interface ModalRendererProps {
 }
 ```
 
+<<<<<<< HEAD
 자식이 특정 JSX 엘리먼트 타입이라고 설명하기 위해 TypeScript를 사용할 수 없으므로, `<li>` 자식만 허용하는 컴포넌트를 설명하기 위해 타입 시스템을 사용할 수 없다는 점에 주의하세요.
+=======
+Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 [TypeScript 플레이그라운드](https://www.typescriptlang.org/ko/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA)에서 타입 체커를 사용하여 `React.ReactNode`와 `React.ReactElement`의 모든 예시를 확인할 수 있습니다.
 
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 7c1e57132..5a9d0178a 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -26,7 +26,11 @@ Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다.
 * **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** 예를 들어 리스트를 표시하기 전에 필터링하고 싶다고 가정해 보겠습니다. 리스트가 변경될 때 state 변수를 업데이트하는 Effect를 작성하고 싶을 수 있습니다. 하지만 이는 비효율적입니다. state를 업데이트할 때 React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산합니다. 그런 다음 React는 이러한 변경 사항을 DOM에 ["commit"](/learn/render-and-commit)하여 화면을 업데이트합니다. 그리고 나서 React가 Effect를 실행합니다. 만약 Effect도 *즉시* state를 업데이트한다면 전체 프로세스가 처음부터 다시 시작됩니다! 불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서 모든 데이터를 변환하세요. 그러면 props나 state가 변경될 때마다 해당 코드가 자동으로 다시 실행됩니다.
 * **사용자 이벤트를 처리하는 데 Effect가 필요하지 않습니다.** 예를 들어 사용자가 제품을 구매할 때 `/api/buy` POST 요청을 전송하고 알림을 표시하고 싶다고 가정해 보겠습니다. 구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있습니다. Effect가 실행될 때까지 사용자가 무엇을 했는지 (예: 어떤 버튼을 클릭 했는지) 알 수 없습니다. 그렇기 때문에 일반적으로 해당되는 이벤트 핸들러에서 사용자 이벤트를 처리합니다.
 
+<<<<<<< HEAD
 외부 시스템과 [동기화](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events)하려면 Effect가 *반드시* 필요합니다. 예를 들어 jQuery 위젯이 React State와 동기화되도록 유지하는 Effect를 작성할 수 있습니다. Effect로 데이터를 가져올 수도 있습니다: 예를 들어 검색 결과를 현재 검색 쿼리와 동기화할 수 있습니다. 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 컴포넌트에 직접 Effect를 작성하는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공한다는 점을 명심하세요.
+=======
+You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 올바른 직관을 얻기 위해, 몇 가지 일반적이고 구체적인 예를 살펴봅시다!
 
@@ -95,6 +99,12 @@ function TodoList({ todos, filter }) {
 
 [`useMemo`](/reference/react/useMemo) Hook으로 래핑해서 값비싼 계산을 캐시(또는 ["메모이제이션"](https://ko.wikipedia.org/wiki/메모이제이션)) 할 수 있습니다.
 
+<Note>
+
+[React Compiler](/learn/react-compiler) can automatically memoize expensive calculations for you, eliminating the need for manual `useMemo` in many cases.
+
+</Note>
+
 ```js {5-8}
 import { useMemo, useState } from 'react';
 
@@ -752,7 +762,11 @@ function SearchResults({ query }) {
 
 데이터 가져오기를 구현할 때 경쟁 조건을 처리하는 것만이 어려운 것은 아닙니다. 응답 캐싱(사용자가 뒤로가기 버튼을 클릭하여 이전 화면을 즉시 볼 수 있도록), 서버에서 데이터를 가져오는 방법(초기 서버 렌더링 HTML에 스피너 대신 가져온 콘텐츠가 포함되도록), 네트워크 워터폴을 피하는 방법(자식이 모든 부모를 기다리지 않고 데이터를 가져올 수 있도록)도 고려해야 합니다.
 
+<<<<<<< HEAD
 **이러한 문제는 React뿐만 아니라 모든 UI 라이브러리에 적용됩니다. 이러한 문제를 해결하는 것은 간단하지 않기 때문에 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 Effect에서 데이터를 가져오는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공합니다.**
+=======
+**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 프레임워크를 사용하지 않고(그리고 직접 빌드하고 싶지 않고) Effect에서 데이터를 보다 인체공학적으로 가져오고 싶다면 이 예시처럼 가져오기 로직을 사용자 정의 Hook으로 추출하는 것을 고려하세요.
 
diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md
new file mode 100644
index 000000000..5513d1c6a
--- /dev/null
+++ b/src/content/reference/react-compiler/compilationMode.md
@@ -0,0 +1,201 @@
+---
+title: compilationMode
+---
+
+<Intro>
+
+The `compilationMode` option controls how the React Compiler selects which functions to compile.
+
+</Intro>
+
+```js
+{
+  compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `compilationMode` {/*compilationmode*/}
+
+Controls the strategy for determining which functions the React Compiler will optimize.
+
+#### Type {/*type*/}
+
+```
+'infer' | 'syntax' | 'annotation' | 'all'
+```
+
+#### Default value {/*default-value*/}
+
+`'infer'`
+
+#### Options {/*options*/}
+
+- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
+  - Functions explicitly annotated with `"use memo"` directive
+  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+
+- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+
+- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+
+- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+
+#### Caveats {/*caveats*/}
+
+- The `'infer'` mode requires functions to follow React naming conventions to be detected
+- Using `'all'` mode may negatively impact performance by compiling utility functions
+- The `'syntax'` mode requires Flow and won't work with TypeScript
+- Regardless of mode, functions with `"use no memo"` directive are always skipped
+
+---
+
+## Usage {/*usage*/}
+
+### Default inference mode {/*default-inference-mode*/}
+
+The default `'infer'` mode works well for most codebases that follow React conventions:
+
+```js
+{
+  compilationMode: 'infer'
+}
+```
+
+With this mode, these functions will be compiled:
+
+```js
+// ✅ Compiled: Named like a component + returns JSX
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Compiled: Named like a hook + calls hooks
+function useCounter() {
+  const [count, setCount] = useState(0);
+  return [count, setCount];
+}
+
+// ✅ Compiled: Explicit directive
+function expensiveCalculation(data) {
+  "use memo";
+  return data.reduce(/* ... */);
+}
+
+// ❌ Not compiled: Not a component/hook pattern
+function calculateTotal(items) {
+  return items.reduce((a, b) => a + b, 0);
+}
+```
+
+### Incremental adoption with annotation mode {/*incremental-adoption*/}
+
+For gradual migration, use `'annotation'` mode to only compile marked functions:
+
+```js
+{
+  compilationMode: 'annotation'
+}
+```
+
+Then explicitly mark functions to compile:
+
+```js
+// Only this function will be compiled
+function ExpensiveList(props) {
+  "use memo";
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+// This won't be compiled without the directive
+function NormalComponent(props) {
+  return <div>{props.content}</div>;
+}
+```
+
+### Using Flow syntax mode {/*flow-syntax-mode*/}
+
+If your codebase uses Flow instead of TypeScript:
+
+```js
+{
+  compilationMode: 'syntax'
+}
+```
+
+Then use Flow's component syntax:
+
+```js
+// Compiled: Flow component syntax
+component Button(label: string) {
+  return <button>{label}</button>;
+}
+
+// Compiled: Flow hook syntax
+hook useCounter(initial: number) {
+  const [count, setCount] = useState(initial);
+  return [count, setCount];
+}
+
+// Not compiled: Regular function syntax
+function helper(data) {
+  return process(data);
+}
+```
+
+### Opting out specific functions {/*opting-out*/}
+
+Regardless of compilation mode, use `"use no memo"` to skip compilation:
+
+```js
+function ComponentWithSideEffects() {
+  "use no memo"; // Prevent compilation
+
+  // This component has side effects that shouldn't be memoized
+  logToAnalytics('component_rendered');
+
+  return <div>Content</div>;
+}
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+
+In `'infer'` mode, ensure your component follows React conventions:
+
+```js
+// ❌ Won't be compiled: lowercase name
+function button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Will be compiled: PascalCase name
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ❌ Won't be compiled: doesn't create JSX or call hooks
+function useData() {
+  return window.localStorage.getItem('data');
+}
+
+// ✅ Will be compiled: calls a hook
+function useData() {
+  const [data] = useState(() => window.localStorage.getItem('data'));
+  return data;
+}
+```
diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md
new file mode 100644
index 000000000..f09ffcb72
--- /dev/null
+++ b/src/content/reference/react-compiler/compiling-libraries.md
@@ -0,0 +1,106 @@
+---
+title: Compiling Libraries
+---
+
+<Intro>
+This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+</Intro>
+
+<InlineToc />
+
+## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+
+As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+
+- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
+- **No configuration required by users** - The optimizations work out of the box
+- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+
+## Setting Up Compilation {/*setting-up-compilation*/}
+
+Add React Compiler to your library's build process:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Configure your build tool to compile your library. For example, with Babel:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler',
+  ],
+  // ... other config
+};
+```
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+
+If your library supports React versions below 19, you'll need additional configuration:
+
+### 1. Install the runtime package {/*install-runtime-package*/}
+
+We recommend installing react-compiler-runtime as a direct dependency:
+
+<TerminalBlock>
+npm install react-compiler-runtime@rc
+</TerminalBlock>
+
+```json
+{
+  "dependencies": {
+    "react-compiler-runtime": "^19.1.0-rc.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}
+```
+
+### 2. Configure the target version {/*configure-target-version*/}
+
+Set the minimum React version your library supports:
+
+```js
+{
+  target: '17', // Minimum supported React version
+}
+```
+
+## Testing Strategy {/*testing-strategy*/}
+
+Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+
+If your compiled library throws errors in React 17 or 18:
+
+1. Verify you've installed `react-compiler-runtime` as a dependency
+2. Check that your `target` configuration matches your minimum supported React version
+3. Ensure the runtime package is included in your published bundle
+
+### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+
+Some Babel plugins may conflict with React Compiler:
+
+1. Place `babel-plugin-react-compiler` early in your plugin list
+2. Disable conflicting optimizations in other plugins
+3. Test your build output thoroughly
+
+### Runtime module not found {/*runtime-module-not-found*/}
+
+If users see "Cannot find module 'react-compiler-runtime'":
+
+1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
+2. Check that your bundler includes the runtime in the output
+3. Verify the package is published to npm with your library
+
+## Next Steps {/*next-steps*/}
+
+- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
+- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
+- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md
new file mode 100644
index 000000000..f38f1afc0
--- /dev/null
+++ b/src/content/reference/react-compiler/configuration.md
@@ -0,0 +1,151 @@
+---
+title: Configuration
+---
+
+<Intro>
+
+This page lists all configuration options available in React Compiler.
+
+</Intro>
+
+<Note>
+
+For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
+
+</Note>
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-react-compiler', {
+        // compiler options
+      }
+    ]
+  ]
+};
+```
+
+---
+
+## Compilation Control {/*compilation-control*/}
+
+These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
+---
+
+## Version Compatibility {/*version-compatibility*/}
+
+React version configuration ensures the compiler generates code compatible with your React version.
+
+[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
+
+```js
+// For React 18 projects
+{
+  target: '18' // Also requires react-compiler-runtime package
+}
+```
+
+---
+
+## Error Handling {/*error-handling*/}
+
+These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
+
+[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
+
+```js
+// Recommended for production
+{
+  panicThreshold: 'none' // Skip components with errors instead of failing the build
+}
+```
+
+---
+
+## Debugging {/*debugging*/}
+
+Logging and analysis options help you understand what the compiler is doing.
+
+[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileSuccess') {
+        console.log('Compiled:', filename);
+      }
+    }
+  }
+}
+```
+
+---
+
+## Feature Flags {/*feature-flags*/}
+
+Conditional compilation lets you control when optimized code is used.
+
+[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'isCompilerEnabled'
+  }
+}
+```
+
+---
+
+## Common Configuration Patterns {/*common-patterns*/}
+
+### Default configuration {/*default-configuration*/}
+
+For most React 19 applications, the compiler works without configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler'
+  ]
+};
+```
+
+### React 17/18 projects {/*react-17-18*/}
+
+Older React versions need the runtime package and target configuration:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+```js
+{
+  target: '18' // or '17'
+}
+```
+
+### Incremental adoption {/*incremental-adoption*/}
+
+Start with specific directories and expand gradually:
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
new file mode 100644
index 000000000..705d0f620
--- /dev/null
+++ b/src/content/reference/react-compiler/directives.md
@@ -0,0 +1,198 @@
+---
+title: Directives
+---
+
+<Intro>
+React Compiler directives are special string literals that control whether specific functions are compiled.
+</Intro>
+
+```js
+function MyComponent() {
+  "use memo"; // Opt this component into compilation
+  return <div>{/* ... */}</div>;
+}
+```
+
+<InlineToc />
+
+---
+
+## Overview {/*overview*/}
+
+React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module.
+
+### Available directives {/*available-directives*/}
+
+* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation
+* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation
+
+### Quick comparison {/*quick-comparison*/}
+
+| Directive | Purpose | When to use |
+|-----------|---------|-------------|
+| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics |
+| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code |
+
+---
+
+## Usage {/*usage*/}
+
+### Function-level directives {/*function-level*/}
+
+Place directives at the beginning of a function to control its compilation:
+
+```js
+// Opt into compilation
+function OptimizedComponent() {
+  "use memo";
+  return <div>This will be optimized</div>;
+}
+
+// Opt out of compilation
+function UnoptimizedComponent() {
+  "use no memo";
+  return <div>This won't be optimized</div>;
+}
+```
+
+### Module-level directives {/*module-level*/}
+
+Place directives at the top of a file to affect all functions in that module:
+
+```js
+// At the very top of the file
+"use memo";
+
+// All functions in this file will be compiled
+function Component1() {
+  return <div>Compiled</div>;
+}
+
+function Component2() {
+  return <div>Also compiled</div>;
+}
+
+// Can be overridden at function level
+function Component3() {
+  "use no memo"; // This overrides the module directive
+  return <div>Not compiled</div>;
+}
+```
+
+### Compilation modes interaction {/*compilation-modes*/}
+
+Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode):
+
+* **`annotation` mode**: Only functions with `"use memo"` are compiled
+* **`infer` mode**: Compiler decides what to compile, directives override decisions
+* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions
+
+---
+
+## Best practices {/*best-practices*/}
+
+### Use directives sparingly {/*use-sparingly*/}
+
+Directives are escape hatches. Prefer configuring the compiler at the project level:
+
+```js
+// ✅ Good - project-wide configuration
+{
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'infer'
+    }]
+  ]
+}
+
+// ⚠️ Use directives only when needed
+function SpecialCase() {
+  "use no memo"; // Document why this is needed
+  // ...
+}
+```
+
+### Document directive usage {/*document-usage*/}
+
+Always explain why a directive is used:
+
+```js
+// ✅ Good - clear explanation
+function DataGrid() {
+  "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123)
+  // Complex grid implementation
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### Plan for removal {/*plan-removal*/}
+
+Opt-out directives should be temporary:
+
+1. Add the directive with a TODO comment
+2. Create a tracking issue
+3. Fix the underlying problem
+4. Remove the directive
+
+```js
+function TemporaryWorkaround() {
+  "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0
+  return <ThirdPartyComponent />;
+}
+```
+
+---
+
+## Common patterns {/*common-patterns*/}
+
+### Gradual adoption {/*gradual-adoption*/}
+
+When adopting the React Compiler in a large codebase:
+
+```js
+// Start with annotation mode
+{
+  compilationMode: 'annotation'
+}
+
+// Opt in stable components
+function StableComponent() {
+  "use memo";
+  // Well-tested component
+}
+
+// Later, switch to infer mode and opt out problematic ones
+function ProblematicComponent() {
+  "use no memo"; // Fix issues before removing
+  // ...
+}
+```
+
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+For specific issues with directives, see the troubleshooting sections in:
+
+* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting)
+* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting)
+
+### Common issues {/*common-issues*/}
+
+1. **Directive ignored**: Check placement (must be first) and spelling
+2. **Compilation still happens**: Check `ignoreUseNoForget` setting
+3. **Module directive not working**: Ensure it's before all imports
+
+---
+
+## See also {/*see-also*/}
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
+* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
+* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md
new file mode 100644
index 000000000..431862682
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-memo.md
@@ -0,0 +1,157 @@
+---
+title: "use memo"
+titleForTitleTag: "'use memo' directive"
+---
+
+<Intro>
+
+`"use memo"` marks a function for React Compiler optimization.
+
+</Intro>
+
+<Note>
+
+In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+</Note>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use memo"` {/*use-memo*/}
+
+Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use memo";
+  // ...
+}
+```
+
+When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.
+
+#### Caveats {/*caveats*/}
+
+* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use memo"`.
+* Only the first directive in a function is processed; additional directives are ignored.
+* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting.
+
+### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/}
+
+In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it.
+
+`"use memo"` explicitly marks a function for optimization, overriding the default behavior:
+
+* In `annotation` mode: Only functions with `"use memo"` are optimized
+* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization
+* In `all` mode: Everything is optimized by default, making `"use memo"` redundant
+
+The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.
+
+### When to use `"use memo"` {/*when-to-use*/}
+
+You should consider using `"use memo"` when:
+
+#### You're using annotation mode {/*annotation-mode-use*/}
+In `compilationMode: 'annotation'`, the directive is required for any function you want optimized:
+
+```js
+// ✅ This component will be optimized
+function OptimizedList() {
+  "use memo";
+  // ...
+}
+
+// ❌ This component won't be optimized
+function SimpleWrapper() {
+  // ...
+}
+```
+
+#### You're gradually adopting React Compiler {/*gradual-adoption*/}
+Start with `annotation` mode and selectively optimize stable components:
+
+```js
+// Start by optimizing leaf components
+function Button({ onClick, children }) {
+  "use memo";
+  // ...
+}
+
+// Gradually move up the tree as you verify behavior
+function ButtonGroup({ buttons }) {
+  "use memo";
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+### Working with different compilation modes {/*compilation-modes*/}
+
+The behavior of `"use memo"` changes based on your compiler configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation' // or 'infer' or 'all'
+    }]
+  ]
+};
+```
+
+#### Annotation mode {/*annotation-mode-example*/}
+```js
+// ✅ Optimized with "use memo"
+function ProductCard({ product }) {
+  "use memo";
+  // ...
+}
+
+// ❌ Not optimized (no directive)
+function ProductList({ products }) {
+  // ...
+}
+```
+
+#### Infer mode (default) {/*infer-mode-example*/}
+```js
+// Automatically memoized because this is named like a Component
+function ComplexDashboard({ data }) {
+  // ...
+}
+
+// Skipped: Is not named like a Component
+function simpleDisplay({ text }) {
+  // ...
+}
+```
+
+In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Verifying optimization {/*verifying-optimization*/}
+
+To confirm your component is being optimized:
+
+1. Check the compiled output in your build
+2. Use React DevTools to check for Memo ✨ badge
+
+### See also {/*see-also*/}
+
+* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md
new file mode 100644
index 000000000..e6c419bc6
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-no-memo.md
@@ -0,0 +1,147 @@
+---
+title: "use no memo"
+titleForTitleTag: "'use no memo' directive"
+---
+
+<Intro>
+
+`"use no memo"` prevents a function from being optimized by React Compiler.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use no memo"` {/*use-no-memo*/}
+
+Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use no memo";
+  // ...
+}
+```
+
+When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler.
+
+#### Caveats {/*caveats*/}
+
+* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use no memo"` or its alias `"use no forget"`.
+* This directive takes precedence over all compilation modes and other directives.
+* It's intended as a temporary debugging tool, not a permanent solution.
+
+### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/}
+
+React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely.
+
+This directive takes precedence over all other settings:
+* In `all` mode: The function is skipped despite the global setting
+* In `infer` mode: The function is skipped even if heuristics would optimize it
+
+The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written.
+
+### When to use `"use no memo"` {/*when-to-use*/}
+
+`"use no memo"` should be used sparingly and temporarily. Common scenarios include:
+
+#### Debugging compiler issues {/*debugging-compiler*/}
+When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:
+
+```js
+function ProblematicComponent({ data }) {
+  "use no memo"; // TODO: Remove after fixing issue #123
+
+  // Rules of React violations that weren't statically detected
+  // ...
+}
+```
+
+#### Third-party library integration {/*third-party*/}
+When integrating with libraries that might not be compatible with the compiler:
+
+```js
+function ThirdPartyWrapper() {
+  "use no memo";
+
+  useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:
+
+```js
+function MyComponent() {
+  "use no memo";
+  // Function body
+}
+```
+
+The directive can also be placed at the top of a file to affect all functions in that module:
+
+```js
+"use no memo";
+
+// All functions in this file will be skipped by the compiler
+```
+
+`"use no memo"` at the function level overrides the module level directive.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Directive not preventing compilation {/*not-preventing*/}
+
+If `"use no memo"` isn't working:
+
+```js
+// ❌ Wrong - directive after code
+function Component() {
+  const data = getData();
+  "use no memo"; // Too late!
+}
+
+// ✅ Correct - directive first
+function Component() {
+  "use no memo";
+  const data = getData();
+}
+```
+
+Also check:
+* Spelling - must be exactly `"use no memo"`
+* Quotes - must use single or double quotes, not backticks
+
+### Best practices {/*best-practices*/}
+
+**Always document why** you're disabling optimization:
+
+```js
+// ✅ Good - clear explanation and tracking
+function DataProcessor() {
+  "use no memo"; // TODO: Remove after fixing rule of react violation
+  // ...
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### See also {/*see-also*/}
+
+* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md
new file mode 100644
index 000000000..479506af3
--- /dev/null
+++ b/src/content/reference/react-compiler/gating.md
@@ -0,0 +1,141 @@
+---
+title: gating
+---
+
+<Intro>
+
+The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime.
+
+</Intro>
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `gating` {/*gating*/}
+
+Configures runtime feature flag gating for compiled functions.
+
+#### Type {/*type*/}
+
+```
+{
+  source: string;
+  importSpecifierName: string;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Properties {/*properties*/}
+
+- **`source`**: Module path to import the feature flag from
+- **`importSpecifierName`**: Name of the exported function to import
+
+#### Caveats {/*caveats*/}
+
+- The gating function must return a boolean
+- Both compiled and original versions increase bundle size
+- The import is added to every file with compiled functions
+
+---
+
+## Usage {/*usage*/}
+
+### Basic feature flag setup {/*basic-setup*/}
+
+1. Create a feature flag module:
+
+```js
+// src/utils/feature-flags.js
+export function shouldUseCompiler() {
+  // your logic here
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+2. Configure the compiler:
+
+```js
+{
+  gating: {
+    source: './src/utils/feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+3. The compiler generates gated code:
+
+```js
+// Input
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// Output (simplified)
+import { shouldUseCompiler } from './src/utils/feature-flags';
+
+const Button = shouldUseCompiler()
+  ? function Button_optimized(props) { /* compiled version */ }
+  : function Button_original(props) { /* original version */ };
+```
+
+Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Feature flag not working {/*flag-not-working*/}
+
+Verify your flag module exports the correct function:
+
+```js
+// ❌ Wrong: Default export
+export default function shouldUseCompiler() {
+  return true;
+}
+
+// ✅ Correct: Named export matching importSpecifierName
+export function shouldUseCompiler() {
+  return true;
+}
+```
+
+### Import errors {/*import-errors*/}
+
+Ensure the source path is correct:
+
+```js
+// ❌ Wrong: Relative to babel.config.js
+{
+  source: './src/flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Correct: Module resolution path
+{
+  source: '@myapp/feature-flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Also correct: Absolute path from project root
+{
+  source: './src/utils/flags',
+  importSpecifierName: 'flag'
+}
+```
diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md
new file mode 100644
index 000000000..41e2a1da0
--- /dev/null
+++ b/src/content/reference/react-compiler/logger.md
@@ -0,0 +1,118 @@
+---
+title: logger
+---
+
+<Intro>
+
+The `logger` option provides custom logging for React Compiler events during compilation.
+
+</Intro>
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      console.log(`[Compiler] ${event.kind}: ${filename}`);
+    }
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `logger` {/*logger*/}
+
+Configures custom logging to track compiler behavior and debug issues.
+
+#### Type {/*type*/}
+
+```
+{
+  logEvent: (filename: string | null, event: LoggerEvent) => void;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Methods {/*methods*/}
+
+- **`logEvent`**: Called for each compiler event with the filename and event details
+
+#### Event types {/*event-types*/}
+
+- **`CompileSuccess`**: Function successfully compiled
+- **`CompileError`**: Function skipped due to errors
+- **`CompileDiagnostic`**: Non-fatal diagnostic information
+- **`CompileSkip`**: Function skipped for other reasons
+- **`PipelineError`**: Unexpected compilation error
+- **`Timing`**: Performance timing information
+
+#### Caveats {/*caveats*/}
+
+- Event structure may change between versions
+- Large codebases generate many log entries
+
+---
+
+## Usage {/*usage*/}
+
+### Basic logging {/*basic-logging*/}
+
+Track compilation success and failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      switch (event.kind) {
+        case 'CompileSuccess': {
+          console.log(`✅ Compiled: ${filename}`);
+          break;
+        }
+        case 'CompileError': {
+          console.log(`❌ Skipped: ${filename}`);
+          break;
+        }
+        default: {}
+      }
+    }
+  }
+}
+```
+
+### Detailed error logging {/*detailed-error-logging*/}
+
+Get specific information about compilation failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileError') {
+        console.error(`\nCompilation failed: ${filename}`);
+        console.error(`Reason: ${event.detail.reason}`);
+
+        if (event.detail.description) {
+          console.error(`Details: ${event.detail.description}`);
+        }
+
+        if (event.detail.loc) {
+          const { line, column } = event.detail.loc.start;
+          console.error(`Location: Line ${line}, Column ${column}`);
+        }
+
+        if (event.detail.suggestions) {
+          console.error('Suggestions:', event.detail.suggestions);
+        }
+      }
+    }
+  }
+}
+```
+
diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md
new file mode 100644
index 000000000..e20f5c0c5
--- /dev/null
+++ b/src/content/reference/react-compiler/panicThreshold.md
@@ -0,0 +1,87 @@
+---
+title: panicThreshold
+---
+
+<Intro>
+
+The `panicThreshold` option controls how the React Compiler handles errors during compilation.
+
+</Intro>
+
+```js
+{
+  panicThreshold: 'none' // Recommended
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `panicThreshold` {/*panicthreshold*/}
+
+Determines whether compilation errors should fail the build or skip optimization.
+
+#### Type {/*type*/}
+
+```
+'none' | 'critical_errors' | 'all_errors'
+```
+
+#### Default value {/*default-value*/}
+
+`'none'`
+
+#### Options {/*options*/}
+
+- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building
+- **`'critical_errors'`**: Fail the build only on critical compiler errors
+- **`'all_errors'`**: Fail the build on any compiler diagnostic
+
+#### Caveats {/*caveats*/}
+
+- Production builds should always use `'none'`
+- Build failures prevent your application from building
+- The compiler automatically detects and skips problematic code with `'none'`
+- Higher thresholds are only useful during development for debugging
+
+---
+
+## Usage {/*usage*/}
+
+### Production configuration (recommended) {/*production-configuration*/}
+
+For production builds, always use `'none'`. This is the default value:
+
+```js
+{
+  panicThreshold: 'none'
+}
+```
+
+This ensures:
+- Your build never fails due to compiler issues
+- Components that can't be optimized run normally
+- Maximum components get optimized
+- Stable production deployments
+
+### Development debugging {/*development-debugging*/}
+
+Temporarily use stricter thresholds to find issues:
+
+```js
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+{
+  panicThreshold: isDevelopment ? 'critical_errors' : 'none',
+  logger: {
+    logEvent(filename, event) {
+      if (isDevelopment && event.kind === 'CompileError') {
+        // ...
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md
new file mode 100644
index 000000000..381748513
--- /dev/null
+++ b/src/content/reference/react-compiler/target.md
@@ -0,0 +1,148 @@
+---
+title: target
+---
+
+<Intro>
+
+The `target` option specifies which React version the compiler should generate code for.
+
+</Intro>
+
+```js
+{
+  target: '19' // or '18', '17'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `target` {/*target*/}
+
+Configures the React version compatibility for the compiled output.
+
+#### Type {/*type*/}
+
+```
+'17' | '18' | '19'
+```
+
+#### Default value {/*default-value*/}
+
+`'19'`
+
+#### Valid values {/*valid-values*/}
+
+- **`'19'`**: Target React 19 (default). No additional runtime required.
+- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package.
+- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package.
+
+#### Caveats {/*caveats*/}
+
+- Always use string values, not numbers (e.g., `'17'` not `17`)
+- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`)
+- React 19 includes built-in compiler runtime APIs
+- React 17 and 18 require installing `react-compiler-runtime@rc`
+
+---
+
+## Usage {/*usage*/}
+
+### Targeting React 19 (default) {/*targeting-react-19*/}
+
+For React 19, no special configuration is needed:
+
+```js
+{
+  // defaults to target: '19'
+}
+```
+
+The compiler will use React 19's built-in runtime APIs:
+
+```js
+// Compiled output uses React 19's native APIs
+import { c as _c } from 'react/compiler-runtime';
+```
+
+### Targeting React 17 or 18 {/*targeting-react-17-or-18*/}
+
+For React 17 and React 18 projects, you need two steps:
+
+1. Install the runtime package:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+2. Configure the target:
+
+```js
+// For React 18
+{
+  target: '18'
+}
+
+// For React 17
+{
+  target: '17'
+}
+```
+
+The compiler will use the polyfill runtime for both versions:
+
+```js
+// Compiled output uses the polyfill
+import { c as _c } from 'react-compiler-runtime';
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Runtime errors about missing compiler runtime {/*missing-runtime*/}
+
+If you see errors like "Cannot find module 'react/compiler-runtime'":
+
+1. Check your React version:
+   ```bash
+   npm why react
+   ```
+
+2. If using React 17 or 18, install the runtime:
+   ```bash
+   npm install react-compiler-runtime@rc
+   ```
+
+3. Ensure your target matches your React version:
+   ```js
+   {
+     target: '18' // Must match your React major version
+   }
+   ```
+
+### Runtime package not working {/*runtime-not-working*/}
+
+Ensure the runtime package is:
+
+1. Installed in your project (not globally)
+2. Listed in your `package.json` dependencies
+3. The correct version (`@rc` tag)
+4. Not in `devDependencies` (it's needed at runtime)
+
+### Checking compiled output {/*checking-output*/}
+
+To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18):
+
+```js
+// For React 19 (built-in runtime)
+import { c } from 'react/compiler-runtime'
+//                      ^
+
+// For React 17/18 (polyfill runtime)
+import { c } from 'react-compiler-runtime'
+//                      ^
+```
\ No newline at end of file
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index e57dcbb31..1c1ad21a4 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -207,7 +207,11 @@ HTML이 비어있으면, 앱의 자바스크립트 코드가 로드되고 실행
 <div id="root"></div>
 ```
 
+<<<<<<< HEAD
 이것은 매우 느리게 느껴질 수 있습니다! 이 문제를 해결하기 위해 [서버에서 또는 빌드 중에](/reference/react-dom/server) 컴포넌트로부터 초기 HTML을 생성할 수 있습니다. 그러면 방문자는 자바스크립트 코드가 로드되기 전에 텍스트를 읽고, 이미지를 보고, 링크를 클릭할 수 있습니다. 이 최적화를 기본적으로 수행하는 [프레임워크를 사용](/learn/start-a-new-react-project#production-grade-react-frameworks)하는 것이 좋습니다. 실행 시점에 따라 이를 *서버 측 렌더링<sup>SSR</sup>* 또는 *정적 사이트 생성<sup>SSG</sup>* 이라고 합니다.
+=======
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 </Note>
 
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index 16bbf609a..5c3ce207c 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,7 +4,12 @@ title: Client React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/client` API를 사용하면 클라이언트(브라우저)에서 React 컴포넌트를 렌더링 할 수 있습니다. 이러한 API는 일반적으로 앱의 최상위 수준에서 React 트리를 초기화하기 위해 사용합니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 </Intro>
 
 ---
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 3f0c95544..7e004c235 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -917,7 +917,11 @@ export default function Form() {
 
 </Sandpack>
 
+<<<<<<< HEAD
 [ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs) 및 [더 많은 예시](/reference/react/useRef#examples-dom)에 대해 더 자세히 읽어보세요.
+=======
+Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#usage)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 고급 사용 사례의 경우 `ref` 어트리뷰트는 [콜백 함수](#ref-callback)도 허용합니다.
 
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index ab61de9f8..986b962eb 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -36,7 +36,11 @@ title: "<form>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<form>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<form>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): URL 혹은 함수. URL을 `action`을 통해 전달하면, 폼은 HTML 폼 컴포넌트처럼 동작합니다. 함수를 `action`을 통해 전달하면, 해당 함수는 폼 제출을 처리합니다. `action`을 통한 함수는 비동기로 동작할 수 있으며, 폼을 통해 제출된 [`formData`](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 포함한 단일 인수로 호출됩니다. `action`의 프로퍼티는 `formAction`의 속성인 `<button>`, `<input type="submit">`, 혹은 `<input type="image">`로 재정의될 수 있습니다.
 
@@ -232,7 +236,12 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
+<<<<<<< HEAD
 `useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/hooks/useOptimistic)를 확인하세요.
+=======
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
+[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ### 폼 제출 오류 처리하기 {/*handling-form-submission-errors*/}
 
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index d23c7189c..67025ad29 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -30,7 +30,11 @@ title: "<input>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<input>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<input>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 - [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
 
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index d3b35a696..666e7dee4 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -30,7 +30,11 @@ link: "<link>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<link>`는 모든 [공통 요소 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<link>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 * `rel`: 문자열 타입, 필수, [리소스와의 관계](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)를 지정합니다. React는 다른 링크와는 달리 [`rel="stylesheet"` 링크를 특별하게 처리](#special-rendering-behavior)합니다.
 
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index aa3ebe11d..93af670b8 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -30,7 +30,11 @@ meta: "<meta>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<meta>`는 [공통 요소 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<meta>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 다음 속성 중 _하나만_ 가져야 합니다. `name`, `httpEquiv`, `charset`, `itemProp`.
 
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 4138e2908..bc083314f 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -36,7 +36,11 @@ title: "<option>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<option>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<option>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 또한, `<option>`은 아래와 같은 Props를 지원합니다.
 
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 5f731b971..c104c7117 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -30,7 +30,11 @@ title: "<progress>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<progress>`는 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 또한 `<progress>`는 아래와 같은 Props를 지원합니다.
 
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 37ecb9f8b..08e63fa55 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -31,7 +31,11 @@ script: "<script>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<script>`는 모든 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<script>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 `children` 또는 `src` 속성을 가져야 합니다.
 
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index bb9ab9c1c..8ffb788fe 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -36,7 +36,11 @@ select box를 표시하려면 [내장 브라우저 `<select>` 컴포넌트](http
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<select>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<select>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 [select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index 7195afed2..4f8bfb3c8 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -30,7 +30,11 @@ style: "<style>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<style>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<style>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 * `children`: 문자열 타입. 필수 항목. 스타일시트의 내용.
 * `precedence`: 문자열 타입. 문서의 `<head>` 내 다른 요소들에 비해 `<style>` DOM 노드의 순위를 지정하여, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다. React는 먼저 발견한 우선순위를 "낮게", 나중에 발견한 우선순위를 "높게" 추론합니다. 많은 스타일 시스템은 스타일 규칙이 원자적이기 때문에 단일 우선순위 값을 사용해도 잘 작동할 수 있습니다. 동일한 우선순위를 가지는 스타일시트는 `<link>` 태그인지 인라인 `<style>` 태그인지 [`preinit`](/reference/react-dom/preinit) 함수로 로드된 것인지와 무관하게 함께 적용됩니다.
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 462a7ce2c..40d3e51d2 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -30,7 +30,11 @@ title: "<textarea>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<textarea>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<textarea>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 [텍스트 영역을 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 84c611347..996136893 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -30,7 +30,11 @@ title: "<title>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<title>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<title>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 * `children`: `<title>`은 자식으로 텍스트만 허용합니다. 이 텍스트는 문서의 제목이 됩니다. 텍스트만 렌더링하는 한, 사용자 정의 컴포넌트도 전달할 수 있습니다.
 
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index 1182b9424..f1ccfd80a 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -49,7 +49,11 @@ Portal은 DOM 노드의 물리적 배치만 변경합니다. 이외의 모든 
 
 * `domNode` : `document.getElementById()`가 반환하는 것과 같은 일부 DOM 노드. 노드가 이미 존재해야 합니다. 업데이트 중에 다른 DOM 노드를 전달하면 Portal 콘텐츠가 다시 생성됩니다.
 
+<<<<<<< HEAD
 * **Optional** `key`: Portal의 [`key`](/learn/rendering-lists/#keeping-list-items-in-order-with-key)로 사용할 고유한 문자열 또는 숫자입니다.
+=======
+* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 #### 반환값 {/*returns*/}
 
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index 1ef5474df..51f84461d 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,11 @@ title: Server React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/server` API를 사용하면 React 컴포넌트를 서버 측에서 HTML로 렌더링할 수 있습니다. 이 API는 앱의 최상위 레벨에 있는 서버에서만 초기 HTML을 생성하는 데 사용됩니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 </Intro>
 
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index 06750193c..c01a2d44a 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,7 +4,11 @@ title: Static React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/static` API를 사용하면 React 컴포넌트를 위한 정적 HTML을 생성할 수 있습니다. 이는 스트리밍 API에 비해 제한된 기능을 가지고 있습니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 </Intro>
 
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index a0763e230..04f69907a 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -19,12 +19,16 @@ React의 실험적 버전에는 버그가 포함될 수 있습니다. 프로덕
 
 <Intro>
 
+<<<<<<< HEAD
 `<Activity>`를 사용하면 UI 일부를 숨기거나 보여줄 수 있습니다.
 
+=======
+`<Activity>` lets you hide and restore the UI and internal state of its children.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ```js
-<Activity mode={mode}>
-  <Page />
+<Activity mode={visibility}>
+  <Sidebar />
 </Activity>
 ```
 
@@ -38,16 +42,19 @@ React의 실험적 버전에는 버그가 포함될 수 있습니다. 프로덕
 
 ### `<Activity>` {/*activity*/}
 
+<<<<<<< HEAD
 UI 일부를 `<Activity>`로 감싸서 표시 상태를 관리할 수 있습니다.
+=======
+You can use Activity to hide part of your application:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
-```js
-import {unstable_Activity as Activity} from 'react';
-
-<Activity mode={isVisible ? 'visible' : 'hidden'}>
-  <Page />
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
+<<<<<<< HEAD
 "hidden" 상태일 때 `<Activity />`의 `children`은 페이지에 표시되지 않습니다. 새로운 `<Activity>`가 "hidden" 상태로 마운트되면 페이지의 표시되는 콘텐츠를 차단하지 않으면서 낮은 우선순위로 콘텐츠를 사전 렌더링하지만, Effect를 생성하여 마운트하지는 않습니다. "visible" Activity가 "hidden"으로 전환되면 모든 Effect를 제거하여 개념적으로는 마운트 해제되지만, 상태는 저장됩니다. 이를 통해 "hidden" Activity의 상태를 재생성하지 않고도 "visible"과 "hidden" 상태 간의 빠른 전환이 가능합니다.
 
 앞으로는 메모리 등 리소스 상황에 따라, "hidden" Activity의 상태가 자동으로 제거될 수 있습니다.
@@ -56,162 +63,109 @@ import {unstable_Activity as Activity} from 'react';
 
 * `children`: 실제로 렌더링하려는 UI입니다.
 * **optional** `mode`: "visible" 또는 "hidden" 중 하나입니다. 기본값은 "visible"입니다. "hidden"일 때는 자식 컴포넌트의 업데이트가 낮은 우선순위로 지연됩니다. 컴포넌트는 Activity가 "visible"로 전환할 때까지 Effect를 생성하지 않습니다. "visible" Activity가 "hidden"으로 전환되면 Effect가 제거됩니다.
+=======
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep>, React will visually hide <CodeStep step={2}>its children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
+
+While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.
+
+When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
+
+In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects.
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+* `children`: The UI you intend to show and hide.
+* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. 
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 - 숨겨진 상태에서 `<Activity>`의 `children`은 페이지에 숨겨집니다.
 - `<Activity>`는 "visible"에서 "hidden"으로 전환할 때 React나 DOM 상태를 제거하지 않고 모든 Effect를 마운트 해제합니다. 이는 마운트 시 한 번만 실행될 것으로 예상되는 Effect가 "hidden"에서 "visible"로 전환할 때 다시 실행됨을 의미합니다. 개념적으로는 "hidden" Activity는 마운트 해제되지만, 제거되지는 않습니다. 이러한 동작으로 인한 예상치 못한 부작용을 잡기 위해 [`<StrictMode>`](/reference/react/StrictMode)를 사용하는 것을 추천합니다.
 - `<ViewTransition>`과 함께 사용할 때 전환에서 나타나는 숨겨진 Activity는 "enter" 애니메이션을 활성화합니다. 전환에서 숨겨지는 표시되는 Activity는 "exit" 애니메이션을 활성화합니다.
 - `<Activity mode="hidden">`으로 감싸진 UI 부분은 SSR 응답에 포함되지 않습니다.
 - `<Activity mode="visible">`으로 감싸진 UI 부분은 다른 콘텐츠보다 낮은 우선순위로 하이드레이션됩니다.
+=======
+- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ---
 
 ## 사용법 {/*usage*/}
 
+<<<<<<< HEAD
 ### UI 일부 사전 렌더링하기 {/*pre-render-part-of-the-ui*/}
 
 `<Activity mode="hidden">`을 사용하여 UI 일부를 사전 렌더링할 수 있습니다.
+=======
+### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
+
+```jsx
+{isShowingSidebar && (
+  <Sidebar />
+)}
+```
+
+But unmounting a component destroys its internal state, which is not always what you want.
+
+When you hide a component using an Activity boundary instead, React will "save" its state for later:
+
+```jsx
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
+<<<<<<< HEAD
 Activity가 `mode="hidden"`으로 렌더링되면 `children`은 페이지에 표시되지 않지만, 페이지의 표시되는 콘텐츠보다 낮은 우선순위로 렌더링됩니다.
 
 나중에 `mode`가 "visible"로 전환되면 사전 렌더링 된 자식 컴포넌트가 마운트되고 표시됩니다. 이를 통해 사용자가 다음에 상호작용을 할 가능성이 높은 UI 부분을 미리 준비하여 로딩 시간을 줄일 수 있습니다.
 
 다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `PostsTab` 컴포넌트는 `use`를 사용하여 일부 데이터를 가져옵니다. "Posts" 탭을 클릭하면 `PostsTab` 컴포넌트가 일시 중단되어 버튼 로딩 상태가 나타납니다.
+=======
+This makes it possible to restore components to their previous state.
 
-<Sandpack>
-
-```js
-import { Suspense, useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
-
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
-  return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
-      >
-        Posts
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
-      >
-        Contact
-      </TabButton>
-      <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
-  );
-}
-```
-
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
+The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
-  return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
-  );
-}
-```
+Try expanding the Overview section, then toggling the sidebar closed and open:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+<Sandpack>
 
-export default function AboutTab() {
-  return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
-  );
-}
-```
+```js src/App.js active
+import { useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+    <>
+      {isShowingSidebar && (
+        <Sidebar />
       )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
+```js src/Sidebar.js
+import { useState } from 'react';
 
+<<<<<<< HEAD
 ```js src/data.js hidden
 // Note: 데이터 페칭 방법은
 // Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
@@ -247,14 +201,62 @@ async function getPosts() {
     });
   }
   return posts;
+=======
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
+  );
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 }
 ```
 
 ```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
 ```
 
 ```json package.json hidden
@@ -276,99 +278,84 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+<<<<<<< HEAD
 이 예시에서 "Posts" 탭을 클릭할 때 게시물이 로드될 때까지 기다려야 합니다.
 
 숨겨진 `<Activity>`로 비활성 탭을 사전 렌더링하여 "Posts" 탭의 지연 시간을 줄일 수 있습니다.
+=======
+The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
-<Sandpack>
+This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
-  return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
-      </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
-        Posts
-      </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
-      <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
-  );
-}
+Let's replace the conditional rendering of our sidebar with an Activity boundary:
+
+```jsx {7,9}
+// Before
+{isShowingSidebar && (
+  <Sidebar />
+)}
+
+// After
+<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+  <Sidebar />
+</Activity>
 ```
 
+and check out the new behavior:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
-```js src/TabButton.js active
-import { useTransition } from 'react';
+<Sandpack>
 
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
-  return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
-  );
-}
-```
+```js src/App.js active
+import { unstable_Activity as Activity, useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-export default function AboutTab() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <>
+      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+        <Sidebar />
+      </Activity>
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+```js src/Sidebar.js
+import { useState } from 'react';
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
       )}
-    </ul>
-      </ViewTransition>
+    </nav>
   );
 }
+<<<<<<< HEAD
 
 function Post({ title }) {
   return (
@@ -440,13 +427,40 @@ async function getPosts() {
   }
   return posts;
 }
+=======
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 ```
 
 ```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
 ```
 
 ```json package.json hidden
@@ -468,172 +482,363 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+Our sidebar's internal state is now restored, without any changes to its implementation.
+
 ---
 
+<<<<<<< HEAD
 ### UI 일부의 상태 유지하기 {/*keeping-state-for-part-of-the-ui*/}
+=======
+### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/}
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
+Since Activity boundaries hide their children using `display: none`, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again.
 
+<<<<<<< HEAD
 `<Activity>`를 "visible"에서 "hidden"으로 전환하여 UI 일부의 상태를 유지할 수 있습니다.
-
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
-</Activity>
-```
-
-Activity가 `mode="visible"`에서 "hidden"으로 전환되면 `children`은 페이지에서 숨겨지고 모든 Effect를 제거하여 마운트 해제되지만, React와 DOM 상태는 유지됩니다.
-
-나중에 `mode`가 "visible"로 전환되면 저장된 상태가 모든 Effect를 생성하여 자식 컴포넌트를 마운트할 때 재사용됩니다. 이를 통해 사용자가 다시 상호작용할 가능성이 높은 UI 부분의 상태를 유지하여 DOM이나 React 상태를 유지할 수 있습니다.
-
-다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `ContactTab`은 보낼 메시지 초안이 담긴 `<textarea>`를 포함합니다. 텍스트를 입력하고 다른 탭으로 변경한 다음 "Contact" 탭을 다시 클릭하면 메시지 초안이 사라집니다.
-
+=======
+In this example, the Contact tab has a `<textarea>` where the user can enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js 
+import { useState } from 'react';
 import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('contact');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
+    <>
       <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
       >
-        Posts
+        Home
       </TabButton>
       <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
       >
         Contact
       </TabButton>
+
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'contact' && <Contact />}
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
-
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
+```js src/Contact.js active
+export default function Contact() {
   return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+    <div>
+      <p>Send me a message!</p>
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
       <textarea />
-      <p>
-        You can find me online here:
-      </p>
+
+      <p>You can find me online here:</p>
       <ul>
         <li>admin@mysite.com</li>
         <li>+123456789</li>
       </ul>
-    </ViewTransition>
+    </div>
   );
 }
 ```
 
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
 
-```js src/data.js hidden
-// Note: 데이터 페칭 방법은
-// Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
-// 일반적으로 캐싱 로직은 프레임워크 내부에 있습니다.
-
-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.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
+
+If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
+      >
+        Contact
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
+        <Contact />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Contact.js 
+export default function Contact() {
+  return (
+    <div>
+      <p>Send me a message!</p>
+
+      <textarea />
+
+      <p>You can find me online here:</p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Again, the Activity boundary let us preserve the Contact tab's internal state without changing its implementation.
+
+---
+
+### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
+
+So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
+
+But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
+
+```jsx [[1, 1, "\\"hidden\\""]]
+<Activity mode="hidden">
+  <SlowComponent />
+</Activity>
+```
+
+<<<<<<< HEAD
+Activity가 `mode="visible"`에서 "hidden"으로 전환되면 `children`은 페이지에서 숨겨지고 모든 Effect를 제거하여 마운트 해제되지만, React와 DOM 상태는 유지됩니다.
+
+나중에 `mode`가 "visible"로 전환되면 저장된 상태가 모든 Effect를 생성하여 자식 컴포넌트를 마운트할 때 재사용됩니다. 이를 통해 사용자가 다시 상호작용할 가능성이 높은 UI 부분의 상태를 유지하여 DOM이나 React 상태를 유지할 수 있습니다.
+
+다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `ContactTab`은 보낼 메시지 초안이 담긴 `<textarea>`를 포함합니다. 텍스트를 입력하고 다른 탭으로 변경한 다음 "Contact" 탭을 다시 클릭하면 메시지 초안이 사라집니다.
+=======
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
+
+This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.
+
+Let's look at an example.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
+
+In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
+
+<Sandpack>
+
+```js src/App.js
+import { useState, Suspense } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
+        Posts
+      </TabButton>
+
+      <hr />
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
+
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
+      )}
+    </ul>
+  );
+}
+```
+
+```js src/data.js hidden
+// Note: 데이터 페칭 방법은
+// Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
+// 일반적으로 캐싱 로직은 프레임워크 내부에 있습니다.
+
+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.startsWith('/posts')) {
+    return await getPosts();
+  } else {
+    throw Error('Not implemented');
   }
 }
 
@@ -658,6 +863,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -679,133 +885,98 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+<<<<<<< HEAD
 이는 사용자가 입력한 DOM 상태를 잃게 됩니다. `<Activity>`로 비활성 탭을 숨겨서 Contact 탭의 상태를 유지할 수 있습니다.
+=======
+This is because `App` doesn't mount `Posts` until its tab is active.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
+
+If we update `App` to use an Activity boundary to show and hide the active tab, `Posts` will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
 
+Try clicking the Posts tab now:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js
+import { useState, Suspense, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
         Posts
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+          <Home />
+        </Activity>
+        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
+          <Posts />
+        </Activity>
+      </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
 import { fetchData } from './data.js';
 
-function PostsTab() {
+export default function Posts() {
   const posts = use(fetchData('/posts'));
+
   return (
-    <ViewTransition>
     <ul className="items">
       {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
       )}
     </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
   );
 }
-
-export default PostsTab;
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
-  );
-}
-```
-
-
 ```js src/data.js hidden
 // Note: 데이터 페칭 방법은
 // Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
@@ -849,6 +1020,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -868,12 +1040,172 @@ b { display: inline-block; margin-right: 10px; }
 }
 ```
 
-</Sandpack>
+</Sandpack>
+
+`Posts` was able to prepare itself for a faster render, thanks to the hidden Activity boundary.
+
+---
+
+Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
+
+<Note>
+
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
+
+Activity **does not** detect data that is fetched inside an Effect.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+
+### Speeding up interactions during page load {/*speeding-up-interactions-during-page-load*/}
+
+React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
+
+Suspense boundaries participate in Selective Hydration, because they naturally divide your component tree into units that are independent from one another:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <MessageComposer />
+
+      <Suspense fallback="Loading chats...">
+        <Chats />
+      </Suspense>
+    </>
+  )
+}
+```
+
+Here, `MessageComposer` can be fully hydrated during the initial render of the page, even before `Chats` is mounted and starts to fetch its data.
+
+So by breaking up your component tree into discrete units, Suspense allows React to hydrate your app's server-rendered HTML in chunks, enabling parts of your app to become interactive as fast as possible.
+
+But what about pages that don't use Suspense?
+
+Take this tabs example:
+
+```jsx
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      {activeTab === 'home' && (
+        <Home />
+      )}
+      {activeTab === 'video' && (
+        <Video />
+      )}
+    </>
+  )
+}
+```
+
+Here, React must hydrate the entire page all at once. If `Home` or `Video` are slower to render, they could make the tab buttons feel unresponsive during hydration.
+
+Adding Suspense around the active tab would solve this:
+
+```jsx {13,20}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Suspense fallback={<Placeholder />}>
+        {activeTab === 'home' && (
+          <Home />
+        )}
+        {activeTab === 'video' && (
+          <Video />
+        )}
+      </Suspense>
+    </>
+  )
+}
+```
+
+...but it would also change the UI, since the `Placeholder` fallback would be displayed on the initial render.
+
+Instead, we can use Activity. Since Activity boundaries show and hide their children, they already naturally divide the component tree into independent units. And just like Suspense, this feature allows them to participate in Selective Hydration.
+
+Let's update our example to use Activity boundaries around the active tab:
+
+```jsx {13-18}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Activity mode={activeTab === "home" ? "visible" : "hidden"}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === "video" ? "visible" : "hidden"}>
+        <Video />
+      </Activity>
+    </>
+  )
+}
+```
+
+Now our initial server-rendered HTML looks the same as it did in the original version, but thanks to Activity, React can hydrate the tab buttons first, before it even mounts `Home` or `Video`.
+
+---
+
+Thus, in addition to hiding and showing content, Activity boundaries help improve your app's performance during hydration by letting React know which parts of your page can become interactive in isolation.
+
+And even if your page doesn't ever hide part of its content, you can still add always-visible Activity boundaries to improve hydration performance:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <Post />
+
+      <Activity>
+        <Comments />
+      </Activity>
+    </>
+  );
+} 
+```
 
 ---
 
 ## 문제 해결 {/*troubleshooting*/}
 
+<<<<<<< HEAD
 ### Activity가 숨겨져 있을 때 Effect가 마운트되지 않습니다 {/*effects-dont-mount-when-an-activity-is-hidden*/}
 
 `<Activity>`가 "hidden"일 때 모든 Effect가 마운트 해제됩니다. 개념적으로는 컴포넌트가 마운트 해제되지만, React는 나중에 사용할 상태를 저장합니다.
@@ -881,33 +1213,30 @@ b { display: inline-block; margin-right: 10px; }
 이는 Activity의 기능입니다. 숨겨진 UI 부분에 대한 구독이 이루어지지 않아 숨겨진 콘텐츠에 대한 작업량이 줄어들기 때문입니다. 또한 비디오 일시 정지와 같은 정리 작업(Activity 없이 마운트 해제했을 때 예상되는 동작)이 실행됩니다. Activity가 "visible"로 전환되면 Effect를 생성하여 마운트하고, 이때 구독하고 비디오를 재생합니다.
 
 각 버튼에 대해 다른 비디오가 재생되는 다음 예시를 살펴보세요.
+=======
+### My hidden components have unwanted side effects {/*my-hidden-components-have-unwanted-side-effects*/}
 
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their Effects. So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
 
-<Sandpack>
-
-```js
-import { useState, useRef, useEffect } from 'react';
-import './checker.js';
+But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
 
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
+<Sandpack>
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
+```js src/App.js active
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
     <>
+<<<<<<< HEAD
       <div>
         <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
         <button onClick={() => setVideo(2)}>Elephants Dream</button>
@@ -924,24 +1253,37 @@ export default function App() {
           src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
         />
       }
+=======
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'video' && <Video />}
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-let interval = setInterval(() => {
-  const videos = Array.from(document.querySelectorAll('video'));
-  const playing = videos.filter(
-    (v) => !v.paused
-  );
-  if (playing.length > 1) {
-    console.error(`Multiple playing videos: ${playing.length}`);
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
-    
-}, 50);
-```
 
+<<<<<<< HEAD
 
 ```css
 body { height: 275px; }
@@ -999,10 +1341,17 @@ export default function App() {
       </div>
       <VideoChecker />
     </>
+=======
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   );
 }
 ```
 
+<<<<<<< HEAD
 ```js src/checker.js hidden
 import {useRef, useEffect} from 'react';
 
@@ -1092,47 +1441,300 @@ export default function App() {
       </Activity>
       <VideoChecker />
     </>
+=======
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
+    />
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
 
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<<<<<<< HEAD
+이러한 이유로 Activity를 개념적으로는 컴포넌트를 "마운트 해제"하고 "재마운트"하되 React나 DOM 상태는 나중에 사용할 수 있도록 저장하는 것으로 생각하는 것이 좋습니다. 실제로는 [You Might Not Need an Effect](learn/you-might-not-need-an-effect) 가이드를 따랐다면 예상대로 작동합니다. 문제가 있는 Effect를 적극적으로 찾으려면 Activity 마운트 해제와 마운트를 적극적으로 수행하여 예상치 못한 부작용을 잡아내는 [`<StrictMode>`](/reference/react/StrictMode)를 추가하는 것을 추천합니다.
+
+### 숨겨진 Activity가 SSR에서 렌더링되지 않습니다 {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+
+서버 사이드 렌더링 중에 `<Activity mode="hidden">`을 사용하면 Activity의 콘텐츠가 SSR 응답에 포함되지 않습니다. 이는 콘텐츠가 페이지에 표시되지 않고 초기 렌더링에 필요하지 않기 때문입니다. SSR 응답에 콘텐츠를 포함해야 한다면 [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하여 콘텐츠의 렌더링을 지연시키는 것과 같은 다른 접근 방법을 사용할 수 있습니다.
+=======
+The video stops playing as expected.
+
+Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
+
+This is a great use case for Activity!
+
+Let's update `App` to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Whoops! The video and audio continue to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
+
+To fix this, we can add an Effect with a cleanup function that pauses the video:
+
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current;
 
-    }, 50);
-    
     return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
+      videoRef.pause()
     }
-  });
-  
+  }, []);
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
+  );
+}
+```
+
+We call `useLayoutEffect` instead of `useEffect` because conceptually the clean-up code is tied to the component's UI being visually hidden. If we used a regular effect, the code could be delayed by (say) a re-suspending Suspense boundary or a View Transition.
+
+Let's see the new behavior. Try playing the video, switching to the Home tab, then back to the Video tab:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
 }
+```
+
+```js src/Video.js 
+import { useRef, useLayoutEffect } from 'react';
+
+export default function Video() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current
 
+    return () => {
+      videoRef.pause()
+    };
+  }, [])
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
+}
 ```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -1154,8 +1756,32 @@ video { width: 300px; margin-top: 10px; }
 
 </Sandpack>
 
-이러한 이유로 Activity를 개념적으로는 컴포넌트를 "마운트 해제"하고 "재마운트"하되 React나 DOM 상태는 나중에 사용할 수 있도록 저장하는 것으로 생각하는 것이 좋습니다. 실제로는 [You Might Not Need an Effect](learn/you-might-not-need-an-effect) 가이드를 따랐다면 예상대로 작동합니다. 문제가 있는 Effect를 적극적으로 찾으려면 Activity 마운트 해제와 마운트를 적극적으로 수행하여 예상치 못한 부작용을 잡아내는 [`<StrictMode>`](/reference/react/StrictMode)를 추가하는 것을 추천합니다.
+It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to keep watching it.
 
-### 숨겨진 Activity가 SSR에서 렌더링되지 않습니다 {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
 
-서버 사이드 렌더링 중에 `<Activity mode="hidden">`을 사용하면 Activity의 콘텐츠가 SSR 응답에 포함되지 않습니다. 이는 콘텐츠가 페이지에 표시되지 않고 초기 렌더링에 필요하지 않기 때문입니다. SSR 응답에 콘텐츠를 포함해야 한다면 [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하여 콘텐츠의 렌더링을 지연시키는 것과 같은 다른 접근 방법을 사용할 수 있습니다.
+---
+
+Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
+
+The most common cases of this will be from the following tags:
+
+  - `<video>`
+  - `<audio>`
+  - `<iframe>`
+
+Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
+
+To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
+
+---
+
+
+### My hidden components have Effects that aren't running {/*my-hidden-components-have-effects-that-arent-running*/}
+
+When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
+
+If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
+
+To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 306b22e78..779e5ddfa 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -143,10 +143,17 @@ View Transition 클래스는 ViewTransition이 활성화될 때 Transition 중
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 - 기본적으로 `setState` 업데이트는 즉시 이루어지며 `<ViewTransition>`을 활성화하지 않습니다. [Transition](/reference/react/useTransition)으로 감싼 업데이트만 해당됩니다. [`<Suspense>`](/reference/react/Suspense)를 사용하여 Transition을 선택하여 [콘텐츠를 표시](/link-to-suspense-below)할 수도 있습니다.
 - `<ViewTransition>`은 이동, 확대/축소, 크로스 페이드할 수 있는 이미지를 생성합니다. React Native나 Motion에서 본 레이아웃 애니메이션과 달리 내부의 모든 개별 엘리먼트가 위치에 애니메이션되지는 않습니다. 이는 더 나은 성능과 개별 부분을 애니메이션하는 것과 비교하여 더 연속적이고 부드러운 애니메이션 느낌을 줄 수 있습니다. 그러나 스스로 움직여야 하는 것들의 연속성을 잃을 수도 있습니다. 결과적으로 더 많은 `<ViewTransition>` 경계를 수동으로 추가해야 할 수 있습니다.
 - 많은 사용자가 페이지에서 애니메이션을 선호하지 않을 수 있습니다. React는 이 경우 애니메이션을 자동으로 비활성화하지 않습니다. 사용자 선호도에 따라 `@media (prefers-reduced-motion)` 미디어 쿼리를 사용하여 애니메이션을 비활성화하거나 약하게 만드는 것을 권장합니다. 향후 CSS 라이브러리에서는 프리셋에 이것이 내장되어 있을 수 있습니다.
 - 현재 `<ViewTransition>`은 DOM에서만 작동합니다. React Native 및 다른 플랫폼에 대한 지원을 추가하는 작업을 진행하고 있습니다.
+=======
+- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
+- `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
+- Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.
+- Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ---
 
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
index 6d8cc502d..7e4fe79fe 100644
--- a/src/content/reference/react/captureOwnerStack.md
+++ b/src/content/reference/react/captureOwnerStack.md
@@ -57,7 +57,7 @@ If no Owner Stack is available, `null` is returned (see [Troubleshooting: The Ow
 
 #### Owner Stack vs Component Stack {/*owner-stack-vs-component-stack*/}
 
-The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
+The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production).
 
 For example, consider the following code:
 
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 0b28853f6..0301e6b47 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -29,7 +29,19 @@ React DOM은 브라우저 DOM 환경에서 실행되는 웹 애플리케이션
 * [클라이언트 API](/reference/react-dom/client) - `react-dom/client` API를 사용하면 브라우저에서 React 컴포넌트를 렌더링할 수 있습니다.
 * [서버 API](/reference/react-dom/server) - `react-dom/server` API를 사용하면 서버에서 React 컴포넌트를 HTML로 렌더링할 수 있습니다.
 
+<<<<<<< HEAD
 ## React의 규칙 {/*rules-of-react*/}
+=======
+## React Compiler {/*react-compiler*/}
+
+The React Compiler is a build-time optimization tool that automatically memoizes your React components and values:
+
+* [Configuration](/reference/react-compiler/configuration) - Configuration options for React Compiler.
+* [Directives](/reference/react-compiler/directives) - Function-level directives to control compilation.
+* [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Guide for shipping pre-compiled library code.
+
+## Rules of React {/*rules-of-react*/}
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 React에는 패턴 이해를 쉽게 하며 고품질의 애플리케이션을 만들 수 있게 하는 일종의 규칙 혹은 모범적인 방식이 있습니다.
 
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index af3769702..ef47dd899 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -12,6 +12,12 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically applies the equivalent of `memo` to all components, reducing the need for manual memoization. You can use the compiler to handle component memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
@@ -111,7 +117,11 @@ label {
 
 #### 모든 곳에 `memo`를 추가해야할까요? {/*should-you-add-memo-everywhere*/}
 
+<<<<<<< HEAD
 이 사이트와 같이 대부분의 상호작용이 투박한 앱의 경우(페이지 또는 전체 섹션 교체 등) 일반적으로 메모이제이션은 불필요합니다. 반면 앱이 그림 편집기이고 도형 이동과 같은 대부분의 상호작용이 세분되어 있다면, 메모이제이션이 유용할 수 있습니다.
+=======
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 `memo`로 최적화하는 것은 컴포넌트가 정확히 동일한 Props로 자주 리렌더링 되고, 리렌더링 로직이 비용이 많이 드는 경우에만 유용합니다. 컴포넌트가 리렌더링 될 때 인지할 수 있을 만큼의 지연이 없다면 `memo`가 필요하지 않습니다. `memo`는 객체 또는 렌더링 중에 정의된 일반 함수처럼 *항상 다른* Props가 컴포넌트에 전달되는 경우에 완전히 무용지물입니다. 따라서 `memo`와 함께 [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)이 종종 필요합니다.
 
@@ -355,7 +365,93 @@ function arePropsEqual(oldProps, newProps) {
 
 ---
 
+<<<<<<< HEAD
 ## 문제 해결 {/*troubleshooting*/}
 ### Prop가 객체, 배열 또는 함수인 경우 컴포넌트가 리렌더링됩니다. {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+=======
+### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
+
+When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
+
+Here's how it works:
+
+**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
+
+```js
+// Parent re-renders every second
+function Parent() {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <h1>Seconds: {seconds}</h1>
+      <ExpensiveChild name="John" />
+    </>
+  );
+}
+
+// Without memo, this re-renders every second even though props don't change
+const ExpensiveChild = memo(function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+});
+```
+
+**With React Compiler enabled**, the same optimization happens automatically:
+
+```js
+// No memo needed - compiler prevents re-renders automatically
+function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+}
+```
+
+Here's the key part of what the React Compiler generates:
+
+```js {6-12}
+function Parent() {
+  const $ = _c(7);
+  const [seconds, setSeconds] = useState(0);
+  // ... other code ...
+
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <ExpensiveChild name="John" />;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  // ... return statement ...
+}
+```
+
+Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
+
+The React Compiler automatically:
+1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
+2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
+3. Skips re-rendering `ExpensiveChild` entirely
+
+This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
+
+<Note>
+
+The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 React는 얕은 비교를 기준으로 이전 Props와 새로운 Props를 비교합니다. 즉, 각각의 새로운 Prop가 이전 Prop와 참조가 동일한지 여부를 고려합니다. 부모가 리렌더링 될 때마다 새로운 객체나 배열을 생성하면, 개별 요소들이 모두 동일하더라도 React는 여전히 변경된 것으로 간주합니다. 마찬가지로 부모 컴포넌트를 렌더링할 때 새로운 함수를 만들면 React는 함수의 정의가 동일하더라도 변경된 것으로 간주합니다. 이를 방지하려면 [부모 컴포넌트에서 Props를 단순화하거나 메모화 하세요.](#minimizing-props-changes)
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 902ee1032..b0ec0d3c6 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -310,7 +310,11 @@ export default async function App() {
 }
 ```
 
+<<<<<<< HEAD
 하지만 [서버 컴포넌트](/reference/react/use-server)에서 `await`을 사용하면 `await` 문이 완료될 때까지 렌더링이 차단됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 Promise를 Prop으로 전달하면 Promise가 서버 컴포넌트의 렌더링을 차단하는 것을 방지할 수 있습니다.
+=======
+But using `await` in a [Server Component](/reference/rsc/server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index a44530baa..819548fce 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -12,6 +12,12 @@ const cachedFn = useCallback(fn, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 1b8ee4e36..22b4bc87d 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -897,7 +897,11 @@ button { margin: 5px; }
 
 ### Effect를 이용한 데이터 페칭 {/*fetching-data-with-effects*/}
 
+<<<<<<< HEAD
 컴포넌트에 데이터를 페칭하기 위해 Effect를 사용할 수 있습니다. 만약 [프레임워크를 사용하고 있다면](/learn/start-a-new-react-project#production-grade-react-frameworks) 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Effect를 직접 작성하는 것보다 더 효율적일 것입니다.
+=======
+You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 만약 직접 Effect를 작성하여 데이터를 페칭하고 싶다면, 코드는 다음과 같을 수 있습니다.
 
@@ -1049,8 +1053,13 @@ Effect 내부에서 `fetch` 호출을 작성하는 것은 클라이언트 사이
 
 이러한 단점은 React만 해당되는 것이 아닙니다. 다른 라이브러리를 사용하여 데이터를 페칭할 때도 해당됩니다. 라우팅과 마찬가지로 데이터 페칭은 세부적인 사항이 많으므로 다음과 같은 접근 방식을 권장합니다.
 
+<<<<<<< HEAD
 - **[프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 사용하는 경우, 해당 프레임워크에 내장된 데이터 페칭 메커니즘을 활용하세요.** 현대 React 프레임워크는 매우 효율적이며 위에서 언급한 문제점이 없는 통합된 데이터 페칭 기능을 가지고 있습니다.
 - **그렇지 않은 경우, 클라이언트 측 캐시를 사용하거나 직접 개발을 고려해 보세요.** 인기 있는 오픈소스 솔루션으로는 [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), 그리고 [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview)가 있습니다. 물론 직접 솔루션을 개발할수도 있으며 이 경우에는 이펙트를 내부적으로 사용하면서도 데이터 사전로드 또는 데이터 요구사항을 라우트로 호이스팅하는 방법을 통해 중복 요청 방지, 응답 캐싱 및 네트워크 폭포 효과 방지를 구현할 수 있습니다.
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 만약 이러한 접근 방식이 적합하지 않다면 Effect 내부에서 데이터를 페칭하는 것을 계속 진행할 수 있습니다.
 
@@ -1733,7 +1742,11 @@ function Page({ url, shoppingCart }) {
 
 ### 서버와 클라이언트에서 다른 컨텐츠를 표시하기 {/*displaying-different-content-on-the-server-and-the-client*/}
 
+<<<<<<< HEAD
 앱이 서버 렌더링을 사용하는 경우 ([직접](/reference/react-dom/server) 또는 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 통해) 컴포넌트는 두 가지 다른 환경에서 렌더링됩니다. 서버에서는 초기 HTML을 생성하기 위해 렌더링되고, 클라이언트에서는 React가 이벤트 핸들러를 해당 HTML에 연결하기 위해 다시 렌더링 코드를 실행합니다. 이것이 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html)이 작동하려면 초기 렌더링 출력이 서버와 클라이언트에서 동일해야 하는 이유입니다.
+=======
+If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 드물게 클라이언트에서 다른 내용을 표시해야 할 수 있습니다. 예를 들어 앱이 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)에서 일부 데이터를 읽는 경우, 이를 서버에서 구현할 수 없습니다. 다음은 이것을 구현하는 방법입니다.
 
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index f1bd6a3e8..bd69c4f12 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -134,7 +134,11 @@ function useCSS(rule) {
 
 #### 이것이 렌더링 중에 스타일을 주입하거나 useLayoutEffect를 사용하는 것보다 어떻게 더 나은가요? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
+<<<<<<< HEAD
 렌더링 중에 스타일을 주입하고 React가 [non-blocking update](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 **매우 느릴 수 있습니다.**
+=======
+If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#perform-non-blocking-updates-with-actions) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 `useInsertionEffect`는 컴포넌트에서 다른 Effect가 실행될 때 `<style>` 태그가 주입되어 있음을 보장하기 때문에 [`useLayoutEffect`](/reference/react/useLayoutEffect) 또는 [`useEffect`](/reference/react/useEffect)로 스타일을 주입하는 것보다 낫습니다. 그렇지 않으면 오래된 스타일로 인해 일반 Effects의 레이아웃 계산이 잘못될 수 있습니다.
 
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index e2fcc16b5..f500cbfdd 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -12,6 +12,12 @@ const cachedValue = useMemo(calculateValue, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index 354cce57a..e20ced8df 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -96,7 +96,14 @@ async function addToCart(data) {
 
 지원되는 직렬화 가능한 반환 값은 경계 클라이언트 컴포넌트의 [직렬화 가능한 Props](/reference/rsc/use-client#passing-props-from-server-to-client-components)와 동일합니다.
 
+<<<<<<< HEAD
 ## 사용법 {/*usage*/}
+=======
+Supported serializable return values are the same as [serializable props](/reference/rsc/use-client#serializable-types) for a boundary Client Component.
+
+
+## Usage {/*usage*/}
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 ### Server Functions in forms {/*server-functions-in-forms*/}
 
diff --git a/src/sidebarHome.json b/src/sidebarHome.json
index e986ce6e8..b38d59af1 100644
--- a/src/sidebarHome.json
+++ b/src/sidebarHome.json
@@ -14,6 +14,10 @@
       "title": "설치하기",
       "path": "/learn/installation"
     },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler"
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "React 학습하기"
@@ -76,7 +80,27 @@
     },
     {
       "hasSectionHeader": true,
+<<<<<<< HEAD
       "sectionHeader": "참여하기"
+=======
+      "sectionHeader": "REACT COMPILER API"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration"
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives"
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "GET INVOLVED"
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     },
     {
       "title": "React 커뮤니티",
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index aca75a736..e85862b1e 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -53,11 +53,35 @@
         {
           "title": "React 개발자 도구",
           "path": "/learn/react-developer-tools"
+        }
+      ]
+    },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler",
+      "canary": true,
+      "routes": [
+        {
+          "title": "Introduction",
+          "path": "/learn/react-compiler/introduction"
         },
         {
+<<<<<<< HEAD
           "title": "React 컴파일러",
           "path": "/learn/react-compiler",
           "canary": true
+=======
+          "title": "Installation",
+          "path": "/learn/react-compiler/installation"
+        },
+        {
+          "title": "Incremental Adoption",
+          "path": "/learn/react-compiler/incremental-adoption"
+        },
+        {
+          "title": "Debugging and Troubleshooting",
+          "path": "/learn/react-compiler/debugging"
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
         }
       ]
     },
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 6a98dcf33..cd4f94c03 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -127,7 +127,8 @@
         {
           "title": "cache",
           "path": "/reference/react/cache"
-        },        {
+        },
+        {
           "title": "captureOwnerStack",
           "path": "/reference/react/captureOwnerStack"
         },
@@ -326,7 +327,59 @@
     },
     {
       "hasSectionHeader": true,
+<<<<<<< HEAD
       "sectionHeader": "React의 규칙"
+=======
+      "sectionHeader": "React Compiler"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration",
+      "routes": [
+        {
+          "title": "compilationMode",
+          "path": "/reference/react-compiler/compilationMode"
+        },
+        {
+          "title": "gating",
+          "path": "/reference/react-compiler/gating"
+        },
+        {
+          "title": "logger",
+          "path": "/reference/react-compiler/logger"
+        },
+        {
+          "title": "panicThreshold",
+          "path": "/reference/react-compiler/panicThreshold"
+        },
+        {
+          "title": "target",
+          "path": "/reference/react-compiler/target"
+        }
+      ]
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives",
+      "routes": [
+        {
+          "title": "\"use memo\"",
+          "path": "/reference/react-compiler/directives/use-memo"
+        },
+        {
+          "title": "\"use no memo\"",
+          "path": "/reference/react-compiler/directives/use-no-memo"
+        }
+      ]
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "Rules of React"
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     },
     {
       "title": "개요",
diff --git a/yarn.lock b/yarn.lock
index 1dcb1446a..6acd3a52f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2733,6 +2733,14 @@ ccount@^2.0.0:
   resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -2742,6 +2750,7 @@ chalk@^2.0.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+<<<<<<< HEAD
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -2755,6 +2764,8 @@ chalk@^5.4.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.4.1.tgz#1b48bf0963ec158dce2aacf69c093ae2dd2092d8"
   integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==
 
+=======
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 character-entities-html4@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz"