From 78c0a985148c57109d3388e1785e6aa489506a6d Mon Sep 17 00:00:00 2001
From: DDOLDDOL <doyt@naver.com>
Date: Sat, 23 Nov 2019 06:44:40 +0900
Subject: [PATCH 1/5] concurrent-mode-API-reference.md has been commited

---
 concurrent-mode-API-reference.md | 203 +++++++++++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 concurrent-mode-API-reference.md

diff --git a/concurrent-mode-API-reference.md b/concurrent-mode-API-reference.md
new file mode 100644
index 000000000..75d6863bb
--- /dev/null
+++ b/concurrent-mode-API-reference.md
@@ -0,0 +1,203 @@
+---
+id: concurrent-mode-reference
+title: Concurrent 모드 API Reference (실험적)
+permalink: docs/concurrent-mode-reference.html
+prev: concurrent-mode-adoption.html
+---
+
+>주의:
+>
+>이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 리액터의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
+>
+>이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다
+
+이 페이지는 React[Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API Reference입니다 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인하세요
+
+**주의: 이는 커뮤니티 프리뷰이며 최종적으로 안정된 배포판이 아닙니다. 향후에 이 API는 변경될 수도 있습니다. 본인의 책임하에 사용하세요!**
+
+- [Concurrent 모드 활성화](#concurrent-mode)
+    - [`루트만들기`](#createroot)
+    - [`Blocking루트만들기`](#createblockingroot)
+- [서스펜스](#suspense)
+    - [`서스펜스`](#suspensecomponent)
+    - ['서스펜스목록`](#suspenselist)
+    - [`전환사용`](#usetransition)
+    - [`지연된값사용`](#usedeferredvalue)
+
+## Concurrent 모드 활성화{#concurrent-mode}
+
+### `루트만들기` {#createroot}
+
+```js
+ReactDOM.createRoot(rootNode).render(<App />);
+```
+
+ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
+
+Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)을 참고하세요
+
+### `Blocking루트만들기` {#createblockingroot}
+
+```js
+ReactDOM.createBlockingRoot(rootNode).render()
+```
+
+`ReactDOM.render( />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
+
+Concurrent 모드를 선택하면 React 작동 방식의 의미가 변경됩니다, 즉 Concurrent 모드를 몇몇 컴포넌트 내에서는 Concurrent 모드를 사용할 수 없게 됩니다. 이 때문에, 몇몇 앱은 Concurrent 모드로 직접적인 마이그레이션을 할 수 없습니다.
+
+Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.
+
+## 서스펜스 API {#suspense}
+
+### `서스펜스` {#suspensecomponent}
+
+```js
+<Suspense fallback={<h1>Loading...</h1>}>
+  <ProfilePhoto />
+  <ProfileDetails />
+</Suspense>
+```
+
+‘서스펜스’는 렌더링 하기 전에 컴포넌트가 무언가를 “대기”하도록 만들고, 기다리는 동안에 폴백을 보여줍니다.
+
+위 예시에서는, ‘ProfileDetails’가 데이터를 가져오기 위해 비동기적 호출을 기다립니다 ‘ProfileDetails’와 ‘ProfilePhoto’를 기다리는 동안엔 ‘Loading…’ 폴백을 표시합니다 ‘<서스펜스>’ 내에 모든 아이가 로드되기 전까지는, 폴백을 계속 표시해야 한다는 점에 유의해야 합니다.
+
+‘서스펜스’는 두 개의 props를 사용합니다:
+* **폴백**은 로드 표시기를 사용합니다 폴백은 ‘서스펜스’ 컴포넌트의 모든 아이가 렌더링을 마치기 전까지 표시됩니다.
+* **불안정한_폴백피하기**는 부울 방식을 사용합니다 이 도구는 초기 로드 중에 이 경계에 대한 “무시” 여부를 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
+
+### `<서스펜스목록>` {#suspenselist}
+
+```js
+<SuspenseList revealOrder="forwards">
+  <Suspense fallback={'Loading...'}>
+    <ProfilePicture id={1} />
+  </Suspense>
+  <Suspense fallback={'Loading...'}>
+    <ProfilePicture id={2} />
+  </Suspense>
+  <Suspense fallback={'Loading...'}>
+    <ProfilePicture id={3} />
+  </Suspense>
+  ...
+</SuspenseList>
+```
+
+‘서스펜스목록’은 사용자에게 출력되는 순서를 변경하여 일시 중단할 수도 있는 컴포넌트를 조정할 수 있습니다.
+
+여러 컴포넌트가 데이터를 가져올 때, 예상치 못한 순서로 가져올 수도 있지만, ‘서스펜스 목록’에 있는 이 도구들로 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
+
+‘서스펜스 목록’은 두 개의 props를 사용합니다:
+* **순서표시(앞,뒤, 동시에)**는 ‘서스펜스목록’ 아이들이 표시되는 순서를 정의합니다.
+ * ’동시에’는 하나씩 표시하는 것 대신에 준비된 *모두*를 표시합니다.
+* **테일(축소, 숨김)**은 ‘서스펜스목록’에서 언 로드된 항목을 표시하는 방법을 나타냅니다
+ * 기본적으로, ‘서스펜스목록’은 목록에 모든 폴백을 표시합니다
+ * ‘축소’는 목록에서 다음 폴백만 표시합니다
+ * ‘숨김’은 언 로드된 항목을 표시하지 않습니다.
+
+‘서스펜스 목록’은 ‘서스펜스 목록’ 하에 있고 가장 인접한 ‘서스펜스’ 와 ‘서스펜스 목록’ 컴포넌트에만 동작한다는 점에 유의하세요 서스펜스 목록은 한 단계 더 깊은 경계는 검색하지 않지만, ‘서스펜스 목록’의 여러 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.
+
+### `useTransition` {#usetransition}
+
+```js
+const SUSPENSE_CONFIG = { timeoutMs: 2000 };
+
+const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
+```
+
+`useTransition`은 **다음 화면으로 전환**하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있습니다. 또한 컴포넌트가 후속 렌더링까지 더 느린 데이터 페치 업데이트를 지연시켜 보다 중요한 업데이트를 즉시 렌더링 할 수 있습니다.
+
+`useTransition` hook은 배열에서 두 개의 값을 반환합니다.
+* `startTransition`은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 전하기 위해 이 함수를 사용할 수 있습니다.
+*'isPending'은 부울입니다. 전환이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.
+
+**일부 상태 업데이트로 컴포넌트가 중단되면 해당 상태 업데이트는 전환으로 래핑되어야 합니다.**
+
+```js
+const SUSPENSE_CONFIG = {timeoutMs: 2000 };
+
+function App() {
+  const [resource, setResource] = useState(initialResource);
+  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
+  return (
+    <>
+      <button
+        disabled={isPending}
+        onClick={() => {
+          startTransition(() => {
+            const nextUserId = getNextId(resource.userId);
+            setResource(fetchProfileData(nextUserId));
+          });
+        }}
+      >
+        Next
+      </button>
+      {isPending ? " Loading..." : null}
+      <Suspense fallback={<Spinner />}>
+        <ProfilePage resource={resource} />
+      </Suspense>
+    </>
+  );
+}
+```
+
+위 코드에서는 데이터 페칭을 `startTransition`으로 래핑했습니다. 이를 통해 다음 프로필 페이지의 렌더링과 연관된 ‘스피너’를 2초동안(`timeoutMS`에 표시된 시간) 지연시키면서 프로필 데이터를 바로 가져올 수 있습니다.
+
+`isPending` 부울은 React에게 컴포넌트가 전환중임을 알리기 때문에, 이전 프로필 페이지에 로딩텍스트를 표시하여 사용자에게 알려줍니다.
+
+** 전환에 대한 자세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#transitions)를 참고하세요.**
+
+#### useTransition Config {#usetransition-config}
+
+```js
+const SUSPENSE_CONFIG = { timeoutMs: 2000 };
+```
+
+`useTransition`은 `timeoutMS`가 포함 된 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 대기시간을 React에게 알려줍니다.
+
+**참고: 여러 모듈간에 서스펜스 Config를 공유하는 것이 좋습니다.**
+
+
+### `useDeferredValue` {#usedeferredvalue}
+
+```js
+const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
+```
+
+최대 `timeoutMS` 동안 "지연된" 값의 지연된 버전을 반환하세요.
+
+이는 흔히 사용자 입력을 기반으로 즉시 렌더링되는 것과 데이터 패칭을 기다려야 할 때 인터페이스를 반응적으로 유지하는 데에 사용합니다.
+
+이에 대한 좋은 예는 텍스트 입력입니다.
+
+```js
+function App() {
+  const [text, setText] = useState("hello");
+  const deferredText = useDeferredValue(text, {timeoutMs: 2000 }); 
+
+  return (
+    <div className="App">
+      {/* Keep passing the current text to the input */}
+      <input value={text} onChange={handleChange} />
+      ...
+      {/* But the list is allowed to "lag behind" when necessary */}
+      <MySlowList text={deferredText} />
+    </div>
+  );
+ }
+```
+
+이를 통해 `입력`에 대한 새 텍스트를 즉시 표시 할 수 있으므로 웹페이지가 반응적으로 느껴지도록 합니다. 한편, `MySlowList`는 업데이트 전에 ‘timeoutMS’에 따라 최대 2초 동안 “지연”되어 백그라운드에서 현재 텍스트를 렌더링 할 수 있습니다. 
+
+**값의 지연에 대한 상세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#deferring-a-value)를 참고하세요.**
+
+#### useDeferredValue Config {#usedeferredvalue-config}
+
+```js
+const SUSPENSE_CONFIG = { timeoutMs: 2000 };
+```
+
+`useDeferredValue`는 `timeoutMS`가 있는 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리초 내에 일어나는)는 지연된 값이 지연 될 수 있는 시간을 React에게 알립니다.
+
+React는 네트워크와 장치가 허용할 때 항상 더 짧은 지연시간을 사용하려고 합니다.

From 172a96ca8ce58df1c91346a60051c971446b3da7 Mon Sep 17 00:00:00 2001
From: Taehwan Noh <taehwanno.dev@gmail.com>
Date: Sun, 24 May 2020 19:22:51 +0900
Subject: [PATCH 2/5] Move translation to the original file for diff

---
 concurrent-mode-API-reference.md          | 203 ----------------------
 content/docs/concurrent-mode-reference.md | 131 +++++++-------
 2 files changed, 60 insertions(+), 274 deletions(-)
 delete mode 100644 concurrent-mode-API-reference.md

diff --git a/concurrent-mode-API-reference.md b/concurrent-mode-API-reference.md
deleted file mode 100644
index 75d6863bb..000000000
--- a/concurrent-mode-API-reference.md
+++ /dev/null
@@ -1,203 +0,0 @@
----
-id: concurrent-mode-reference
-title: Concurrent 모드 API Reference (실험적)
-permalink: docs/concurrent-mode-reference.html
-prev: concurrent-mode-adoption.html
----
-
->주의:
->
->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 리액터의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
->
->이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다
-
-이 페이지는 React[Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API Reference입니다 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인하세요
-
-**주의: 이는 커뮤니티 프리뷰이며 최종적으로 안정된 배포판이 아닙니다. 향후에 이 API는 변경될 수도 있습니다. 본인의 책임하에 사용하세요!**
-
-- [Concurrent 모드 활성화](#concurrent-mode)
-    - [`루트만들기`](#createroot)
-    - [`Blocking루트만들기`](#createblockingroot)
-- [서스펜스](#suspense)
-    - [`서스펜스`](#suspensecomponent)
-    - ['서스펜스목록`](#suspenselist)
-    - [`전환사용`](#usetransition)
-    - [`지연된값사용`](#usedeferredvalue)
-
-## Concurrent 모드 활성화{#concurrent-mode}
-
-### `루트만들기` {#createroot}
-
-```js
-ReactDOM.createRoot(rootNode).render(<App />);
-```
-
-ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
-
-Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)을 참고하세요
-
-### `Blocking루트만들기` {#createblockingroot}
-
-```js
-ReactDOM.createBlockingRoot(rootNode).render()
-```
-
-`ReactDOM.render( />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
-
-Concurrent 모드를 선택하면 React 작동 방식의 의미가 변경됩니다, 즉 Concurrent 모드를 몇몇 컴포넌트 내에서는 Concurrent 모드를 사용할 수 없게 됩니다. 이 때문에, 몇몇 앱은 Concurrent 모드로 직접적인 마이그레이션을 할 수 없습니다.
-
-Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.
-
-## 서스펜스 API {#suspense}
-
-### `서스펜스` {#suspensecomponent}
-
-```js
-<Suspense fallback={<h1>Loading...</h1>}>
-  <ProfilePhoto />
-  <ProfileDetails />
-</Suspense>
-```
-
-‘서스펜스’는 렌더링 하기 전에 컴포넌트가 무언가를 “대기”하도록 만들고, 기다리는 동안에 폴백을 보여줍니다.
-
-위 예시에서는, ‘ProfileDetails’가 데이터를 가져오기 위해 비동기적 호출을 기다립니다 ‘ProfileDetails’와 ‘ProfilePhoto’를 기다리는 동안엔 ‘Loading…’ 폴백을 표시합니다 ‘<서스펜스>’ 내에 모든 아이가 로드되기 전까지는, 폴백을 계속 표시해야 한다는 점에 유의해야 합니다.
-
-‘서스펜스’는 두 개의 props를 사용합니다:
-* **폴백**은 로드 표시기를 사용합니다 폴백은 ‘서스펜스’ 컴포넌트의 모든 아이가 렌더링을 마치기 전까지 표시됩니다.
-* **불안정한_폴백피하기**는 부울 방식을 사용합니다 이 도구는 초기 로드 중에 이 경계에 대한 “무시” 여부를 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
-
-### `<서스펜스목록>` {#suspenselist}
-
-```js
-<SuspenseList revealOrder="forwards">
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={1} />
-  </Suspense>
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={2} />
-  </Suspense>
-  <Suspense fallback={'Loading...'}>
-    <ProfilePicture id={3} />
-  </Suspense>
-  ...
-</SuspenseList>
-```
-
-‘서스펜스목록’은 사용자에게 출력되는 순서를 변경하여 일시 중단할 수도 있는 컴포넌트를 조정할 수 있습니다.
-
-여러 컴포넌트가 데이터를 가져올 때, 예상치 못한 순서로 가져올 수도 있지만, ‘서스펜스 목록’에 있는 이 도구들로 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
-
-‘서스펜스 목록’은 두 개의 props를 사용합니다:
-* **순서표시(앞,뒤, 동시에)**는 ‘서스펜스목록’ 아이들이 표시되는 순서를 정의합니다.
- * ’동시에’는 하나씩 표시하는 것 대신에 준비된 *모두*를 표시합니다.
-* **테일(축소, 숨김)**은 ‘서스펜스목록’에서 언 로드된 항목을 표시하는 방법을 나타냅니다
- * 기본적으로, ‘서스펜스목록’은 목록에 모든 폴백을 표시합니다
- * ‘축소’는 목록에서 다음 폴백만 표시합니다
- * ‘숨김’은 언 로드된 항목을 표시하지 않습니다.
-
-‘서스펜스 목록’은 ‘서스펜스 목록’ 하에 있고 가장 인접한 ‘서스펜스’ 와 ‘서스펜스 목록’ 컴포넌트에만 동작한다는 점에 유의하세요 서스펜스 목록은 한 단계 더 깊은 경계는 검색하지 않지만, ‘서스펜스 목록’의 여러 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.
-
-### `useTransition` {#usetransition}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-
-const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
-```
-
-`useTransition`은 **다음 화면으로 전환**하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있습니다. 또한 컴포넌트가 후속 렌더링까지 더 느린 데이터 페치 업데이트를 지연시켜 보다 중요한 업데이트를 즉시 렌더링 할 수 있습니다.
-
-`useTransition` hook은 배열에서 두 개의 값을 반환합니다.
-* `startTransition`은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 전하기 위해 이 함수를 사용할 수 있습니다.
-*'isPending'은 부울입니다. 전환이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.
-
-**일부 상태 업데이트로 컴포넌트가 중단되면 해당 상태 업데이트는 전환으로 래핑되어야 합니다.**
-
-```js
-const SUSPENSE_CONFIG = {timeoutMs: 2000 };
-
-function App() {
-  const [resource, setResource] = useState(initialResource);
-  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
-  return (
-    <>
-      <button
-        disabled={isPending}
-        onClick={() => {
-          startTransition(() => {
-            const nextUserId = getNextId(resource.userId);
-            setResource(fetchProfileData(nextUserId));
-          });
-        }}
-      >
-        Next
-      </button>
-      {isPending ? " Loading..." : null}
-      <Suspense fallback={<Spinner />}>
-        <ProfilePage resource={resource} />
-      </Suspense>
-    </>
-  );
-}
-```
-
-위 코드에서는 데이터 페칭을 `startTransition`으로 래핑했습니다. 이를 통해 다음 프로필 페이지의 렌더링과 연관된 ‘스피너’를 2초동안(`timeoutMS`에 표시된 시간) 지연시키면서 프로필 데이터를 바로 가져올 수 있습니다.
-
-`isPending` 부울은 React에게 컴포넌트가 전환중임을 알리기 때문에, 이전 프로필 페이지에 로딩텍스트를 표시하여 사용자에게 알려줍니다.
-
-** 전환에 대한 자세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#transitions)를 참고하세요.**
-
-#### useTransition Config {#usetransition-config}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-```
-
-`useTransition`은 `timeoutMS`가 포함 된 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 대기시간을 React에게 알려줍니다.
-
-**참고: 여러 모듈간에 서스펜스 Config를 공유하는 것이 좋습니다.**
-
-
-### `useDeferredValue` {#usedeferredvalue}
-
-```js
-const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
-```
-
-최대 `timeoutMS` 동안 "지연된" 값의 지연된 버전을 반환하세요.
-
-이는 흔히 사용자 입력을 기반으로 즉시 렌더링되는 것과 데이터 패칭을 기다려야 할 때 인터페이스를 반응적으로 유지하는 데에 사용합니다.
-
-이에 대한 좋은 예는 텍스트 입력입니다.
-
-```js
-function App() {
-  const [text, setText] = useState("hello");
-  const deferredText = useDeferredValue(text, {timeoutMs: 2000 }); 
-
-  return (
-    <div className="App">
-      {/* Keep passing the current text to the input */}
-      <input value={text} onChange={handleChange} />
-      ...
-      {/* But the list is allowed to "lag behind" when necessary */}
-      <MySlowList text={deferredText} />
-    </div>
-  );
- }
-```
-
-이를 통해 `입력`에 대한 새 텍스트를 즉시 표시 할 수 있으므로 웹페이지가 반응적으로 느껴지도록 합니다. 한편, `MySlowList`는 업데이트 전에 ‘timeoutMS’에 따라 최대 2초 동안 “지연”되어 백그라운드에서 현재 텍스트를 렌더링 할 수 있습니다. 
-
-**값의 지연에 대한 상세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#deferring-a-value)를 참고하세요.**
-
-#### useDeferredValue Config {#usedeferredvalue-config}
-
-```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
-```
-
-`useDeferredValue`는 `timeoutMS`가 있는 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리초 내에 일어나는)는 지연된 값이 지연 될 수 있는 시간을 React에게 알립니다.
-
-React는 네트워크와 장치가 허용할 때 항상 더 짧은 지연시간을 사용하려고 합니다.
diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md
index 663af1b3b..2fdaeebaf 100644
--- a/content/docs/concurrent-mode-reference.md
+++ b/content/docs/concurrent-mode-reference.md
@@ -1,67 +1,56 @@
 ---
 id: concurrent-mode-reference
-title: Concurrent Mode API Reference (Experimental)
+title: Concurrent 모드 API Reference (실험적)
 permalink: docs/concurrent-mode-reference.html
 prev: concurrent-mode-adoption.html
 ---
 
-<style>
-.scary > blockquote {
-  background-color: rgba(237, 51, 21, 0.2);
-  border-left-color: #ed3315;
-}
-</style>
-
-<div class="scary">
-
->Caution:
+>주의:
 >
->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
+>이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 리액터의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
 >
->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.
+>이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다
 
-</div>
+이 페이지는 React[Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API Reference입니다 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인하세요
 
-This page is an API reference for the React [Concurrent Mode](/docs/concurrent-mode-intro.html). If you're looking for a guided introduction instead, check out [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html).
+**주의: 이는 커뮤니티 프리뷰이며 최종적으로 안정된 배포판이 아닙니다. 향후에 이 API는 변경될 수도 있습니다. 본인의 책임하에 사용하세요!**
 
-**Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!**
+- [Concurrent 모드 활성화](#concurrent-mode)
+    - [`루트만들기`](#createroot)
+    - [`Blocking루트만들기`](#createblockingroot)
+- [서스펜스](#suspense)
+    - [`서스펜스`](#suspensecomponent)
+    - ['서스펜스목록`](#suspenselist)
+    - [`전환사용`](#usetransition)
+    - [`지연된값사용`](#usedeferredvalue)
 
-- [Enabling Concurrent Mode](#concurrent-mode)
-    - [`createRoot`](#createroot)
-    - [`createBlockingRoot`](#createblockingroot)
-- [Suspense](#suspense)
-    - [`Suspense`](#suspensecomponent)
-    - [`SuspenseList`](#suspenselist)
-    - [`useTransition`](#usetransition)
-    - [`useDeferredValue`](#usedeferredvalue)
+## Concurrent 모드 활성화{#concurrent-mode}
 
-## Enabling Concurrent Mode {#concurrent-mode}
-
-### `createRoot` {#createroot}
+### `루트만들기` {#createroot}
 
 ```js
 ReactDOM.createRoot(rootNode).render(<App />);
 ```
 
-Replaces `ReactDOM.render(<App />, rootNode)` and enables Concurrent Mode.
+ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
 
-For more information on Concurrent Mode, check out the [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)
+Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)을 참고하세요
 
-### `createBlockingRoot` {#createblockingroot}
+### `Blocking루트만들기` {#createblockingroot}
 
 ```js
-ReactDOM.createBlockingRoot(rootNode).render(<App />)
+ReactDOM.createBlockingRoot(rootNode).render()
 ```
 
-Replaces `ReactDOM.render(<App />, rootNode)` and enables [Blocking Mode](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
+`ReactDOM.render( />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
 
-Opting into Concurrent Mode introduces semantic changes to how React works. This means that you can't use Concurrent Mode in just a few components. Because of this, some apps may not be able to migrate directly to Concurrent Mode. 
+Concurrent 모드를 선택하면 React 작동 방식의 의미가 변경됩니다, 즉 Concurrent 모드를 몇몇 컴포넌트 내에서는 Concurrent 모드를 사용할 수 없게 됩니다. 이 때문에, 몇몇 앱은 Concurrent 모드로 직접적인 마이그레이션을 할 수 없습니다.
 
-Blocking Mode only contains a small subset of Concurrent Mode features and is intended as an intermediary migration step for apps that are unable to migrate directly.
+Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.
 
-## Suspense API {#suspense}
+## 서스펜스 API {#suspense}
 
-### `Suspense` {#suspensecomponent}
+### `서스펜스` {#suspensecomponent}
 
 ```js
 <Suspense fallback={<h1>Loading...</h1>}>
@@ -70,15 +59,15 @@ Blocking Mode only contains a small subset of Concurrent Mode features and is in
 </Suspense>
 ```
 
-`Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting.
+‘서스펜스’는 렌더링 하기 전에 컴포넌트가 무언가를 “대기”하도록 만들고, 기다리는 동안에 폴백을 보여줍니다.
 
-In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `<Suspense>` has loaded, we will continue to show the fallback.
+위 예시에서는, ‘ProfileDetails’가 데이터를 가져오기 위해 비동기적 호출을 기다립니다 ‘ProfileDetails’와 ‘ProfilePhoto’를 기다리는 동안엔 ‘Loading…’ 폴백을 표시합니다 ‘<서스펜스>’ 내에 모든 아이가 로드되기 전까지는, 폴백을 계속 표시해야 한다는 점에 유의해야 합니다.
 
-`Suspense` takes two props:
-* **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering.
-* **unstable_avoidThisFallback** takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release.
+‘서스펜스’는 두 개의 props를 사용합니다:
+* **폴백**은 로드 표시기를 사용합니다 폴백은 ‘서스펜스’ 컴포넌트의 모든 아이가 렌더링을 마치기 전까지 표시됩니다.
+* **불안정한_폴백피하기**는 부울 방식을 사용합니다 이 도구는 초기 로드 중에 이 경계에 대한 “무시” 여부를 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
 
-### `<SuspenseList>` {#suspenselist}
+### `<서스펜스목록>` {#suspenselist}
 
 ```js
 <SuspenseList revealOrder="forwards">
@@ -95,19 +84,19 @@ In this example, `ProfileDetails` is waiting for an asynchronous API call to fet
 </SuspenseList>
 ```
 
-`SuspenseList` helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.
+‘서스펜스목록’은 사용자에게 출력되는 순서를 변경하여 일시 중단할 수도 있는 컴포넌트를 조정할 수 있습니다.
 
-When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a `SuspenseList`, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).
+여러 컴포넌트가 데이터를 가져올 때, 예상치 못한 순서로 가져올 수도 있지만, ‘서스펜스 목록’에 있는 이 도구들로 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
 
-`SuspenseList` takes two props:
-* **revealOrder (forwards, backwards, together)** defines the order in which the `SuspenseList` children should be revealed.
-  * `together` reveals *all* of them when they're ready instead of one by one.
-* **tail (collapsed, hidden)** dictates how unloaded items in a `SuspenseList` is shown. 
-    * By default, `SuspenseList` will show all fallbacks in the list.
-    * `collapsed` shows only the next fallback in the list.
-    * `hidden` doesn't show any unloaded items.
+‘서스펜스 목록’은 두 개의 props를 사용합니다:
+* **순서표시(앞,뒤, 동시에)**는 ‘서스펜스목록’ 아이들이 표시되는 순서를 정의합니다.
+ * ’동시에’는 하나씩 표시하는 것 대신에 준비된 *모두*를 표시합니다.
+* **테일(축소, 숨김)**은 ‘서스펜스목록’에서 언 로드된 항목을 표시하는 방법을 나타냅니다
+ * 기본적으로, ‘서스펜스목록’은 목록에 모든 폴백을 표시합니다
+ * ‘축소’는 목록에서 다음 폴백만 표시합니다
+ * ‘숨김’은 언 로드된 항목을 표시하지 않습니다.
 
-Note that `SuspenseList` only operates on the closest `Suspense` and `SuspenseList` components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple `SuspenseList` components in each other to build grids.
+‘서스펜스 목록’은 ‘서스펜스 목록’ 하에 있고 가장 인접한 ‘서스펜스’ 와 ‘서스펜스 목록’ 컴포넌트에만 동작한다는 점에 유의하세요 서스펜스 목록은 한 단계 더 깊은 경계는 검색하지 않지만, ‘서스펜스 목록’의 여러 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.
 
 ### `useTransition` {#usetransition}
 
@@ -117,16 +106,16 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
 ```
 
-`useTransition` allows components to avoid undesirable loading states by waiting for content to load before **transitioning to the next screen**. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.
+`useTransition`은 **다음 화면으로 전환**하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있습니다. 또한 컴포넌트가 후속 렌더링까지 더 느린 데이터 페치 업데이트를 지연시켜 보다 중요한 업데이트를 즉시 렌더링 할 수 있습니다.
 
-The `useTransition` hook returns two values in an array.
-* `startTransition` is a function that takes a callback. We can use it to tell React which state we want to defer.
-* `isPending` is a boolean. It's React's way of informing us whether we're waiting for the transition to finish.
+`useTransition` hook은 배열에서 두 개의 값을 반환합니다.
+* `startTransition`은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 전하기 위해 이 함수를 사용할 수 있습니다.
+*'isPending'은 부울입니다. 전환이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.
 
-**If some state update causes a component to suspend, that state update should be wrapped in a transition.**
+**일부 상태 업데이트로 컴포넌트가 중단되면 해당 상태 업데이트는 전환으로 래핑되어야 합니다.**
 
 ```js
-const SUSPENSE_CONFIG = { timeoutMs: 2000 };
+const SUSPENSE_CONFIG = {timeoutMs: 2000 };
 
 function App() {
   const [resource, setResource] = useState(initialResource);
@@ -153,11 +142,11 @@ function App() {
 }
 ```
 
-In this code, we've wrapped our data fetching with `startTransition`. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated `Spinner` for 2 seconds (the time shown in `timeoutMs`).
+위 코드에서는 데이터 페칭을 `startTransition`으로 래핑했습니다. 이를 통해 다음 프로필 페이지의 렌더링과 연관된 ‘스피너’를 2초동안(`timeoutMS`에 표시된 시간) 지연시키면서 프로필 데이터를 바로 가져올 수 있습니다.
 
-The `isPending` boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page.
+`isPending` 부울은 React에게 컴포넌트가 전환중임을 알리기 때문에, 이전 프로필 페이지에 로딩텍스트를 표시하여 사용자에게 알려줍니다.
 
-**For an in-depth look at transitions, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#transitions).**
+** 전환에 대한 자세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#transitions)를 참고하세요.**
 
 #### useTransition Config {#usetransition-config}
 
@@ -165,9 +154,9 @@ The `isPending` boolean lets React know that our component is transitioning, so
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 ```
 
-`useTransition` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example).
+`useTransition`은 `timeoutMS`가 포함 된 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 대기시간을 React에게 알려줍니다.
 
-**Note: We recommend that you share Suspense Config between different modules.**
+**참고: 여러 모듈간에 서스펜스 Config를 공유하는 것이 좋습니다.**
 
 
 ### `useDeferredValue` {#usedeferredvalue}
@@ -176,16 +165,16 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
 ```
 
-Returns a deferred version of the value that may "lag behind" it for at most `timeoutMs`.
+최대 `timeoutMS` 동안 "지연된" 값의 지연된 버전을 반환하세요.
 
-This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.
+이는 흔히 사용자 입력을 기반으로 즉시 렌더링되는 것과 데이터 패칭을 기다려야 할 때 인터페이스를 반응적으로 유지하는 데에 사용합니다.
 
-A good example of this is a text input.
+이에 대한 좋은 예는 텍스트 입력입니다.
 
 ```js
 function App() {
   const [text, setText] = useState("hello");
-  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 
+  const deferredText = useDeferredValue(text, {timeoutMs: 2000 });
 
   return (
     <div className="App">
@@ -199,9 +188,9 @@ function App() {
  }
 ```
 
-This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lags behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background.
+이를 통해 `입력`에 대한 새 텍스트를 즉시 표시 할 수 있으므로 웹페이지가 반응적으로 느껴지도록 합니다. 한편, `MySlowList`는 업데이트 전에 ‘timeoutMS’에 따라 최대 2초 동안 “지연”되어 백그라운드에서 현재 텍스트를 렌더링 할 수 있습니다.
 
-**For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).**
+**값의 지연에 대한 상세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#deferring-a-value)를 참고하세요.**
 
 #### useDeferredValue Config {#usedeferredvalue-config}
 
@@ -209,6 +198,6 @@ This allows us to start showing the new text for the `input` immediately, which
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 ```
 
-`useDeferredValue` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind.
+`useDeferredValue`는 `timeoutMS`가 있는 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리초 내에 일어나는)는 지연된 값이 지연 될 수 있는 시간을 React에게 알립니다.
 
-React will always try to use a shorter lag when network and device allows it.
+React는 네트워크와 장치가 허용할 때 항상 더 짧은 지연시간을 사용하려고 합니다.

From d277dc887f282b916da32a9319f22e9e8b96fa2f Mon Sep 17 00:00:00 2001
From: Taehwan Noh <taehwanno.dev@gmail.com>
Date: Sat, 15 Aug 2020 00:12:24 +0900
Subject: [PATCH 3/5] Apply suggestions from code review

---
 content/docs/concurrent-mode-reference.md | 110 +++++++++++-----------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md
index 2fdaeebaf..b8223f3e3 100644
--- a/content/docs/concurrent-mode-reference.md
+++ b/content/docs/concurrent-mode-reference.md
@@ -1,56 +1,56 @@
 ---
 id: concurrent-mode-reference
-title: Concurrent 모드 API Reference (실험적)
+title: Concurrent 모드 API 참고서 (실험 단계)
 permalink: docs/concurrent-mode-reference.html
 prev: concurrent-mode-adoption.html
 ---
 
 >주의:
 >
->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 리액터의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
+>이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
 >
->이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다
+>이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다.
 
-이 페이지는 React[Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API Reference입니다 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인하세요
+이 페이지는 React [Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API 참고서입니다. 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인해주세요.
 
 **주의: 이는 커뮤니티 프리뷰이며 최종적으로 안정된 배포판이 아닙니다. 향후에 이 API는 변경될 수도 있습니다. 본인의 책임하에 사용하세요!**
 
 - [Concurrent 모드 활성화](#concurrent-mode)
-    - [`루트만들기`](#createroot)
-    - [`Blocking루트만들기`](#createblockingroot)
-- [서스펜스](#suspense)
-    - [`서스펜스`](#suspensecomponent)
-    - ['서스펜스목록`](#suspenselist)
-    - [`전환사용`](#usetransition)
-    - [`지연된값사용`](#usedeferredvalue)
+    - [`createRoot`](#createroot)
+    - [`createBlockingRoot`](#createblockingroot)
+- [Suspense](#suspense)
+    - [`Suspense`](#suspensecomponent)
+    - [`SuspenseList`](#suspenselist)
+    - [`useTransition`](#usetransition)
+    - [`useDeferredValue`](#usedeferredvalue)
 
-## Concurrent 모드 활성화{#concurrent-mode}
+## Concurrent 모드 활성화 {#concurrent-mode}
 
-### `루트만들기` {#createroot}
+### `createRoot` {#createroot}
 
 ```js
 ReactDOM.createRoot(rootNode).render(<App />);
 ```
 
-ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
+`ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
 
-Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html)을 참고하세요
+Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode 문서](/docs/concurrent-mode-intro.html)를 참고해주세요.
 
-### `Blocking루트만들기` {#createblockingroot}
+### `createBlockingRoot` {#createblockingroot}
 
 ```js
-ReactDOM.createBlockingRoot(rootNode).render()
+ReactDOM.createBlockingRoot(rootNode).render(<App />)
 ```
 
 `ReactDOM.render( />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
 
-Concurrent 모드를 선택하면 React 작동 방식의 의미가 변경됩니다, 즉 Concurrent 모드를 몇몇 컴포넌트 내에서는 Concurrent 모드를 사용할 수 없게 됩니다. 이 때문에, 몇몇 앱은 Concurrent 모드로 직접적인 마이그레이션을 할 수 없습니다.
+Concurrent 모드를 선택하면 React 작동하는 방식에 의미적 변화가 생깁니다. 이는 몇몇 컴포넌트에서 Concurrent 모드를 사용할 수 없다는 걸 의미하며 몇몇 앱은 곧바로 Concurrent 모드로 마이그레이션을 할 수 없습니다.
 
-Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.
+Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.
 
-## 서스펜스 API {#suspense}
+## Suspense API {#suspense}
 
-### `서스펜스` {#suspensecomponent}
+### `Suspense` {#suspensecomponent}
 
 ```js
 <Suspense fallback={<h1>Loading...</h1>}>
@@ -59,15 +59,15 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그
 </Suspense>
 ```
 
-‘서스펜스’는 렌더링 하기 전에 컴포넌트가 무언가를 “대기”하도록 만들고, 기다리는 동안에 폴백을 보여줍니다.
+`Suspense`는 컴포넌트가 렌더링되기 전에 무언가를 "기다릴 수 있도록 하며", 기다리는 동안에 폴백을 보여줍니다.
 
-위 예시에서는, ‘ProfileDetails’가 데이터를 가져오기 위해 비동기적 호출을 기다립니다 ‘ProfileDetails’와 ‘ProfilePhoto’를 기다리는 동안엔 ‘Loading…’ 폴백을 표시합니다 ‘<서스펜스>’ 내에 모든 아이가 로드되기 전까지는, 폴백을 계속 표시해야 한다는 점에 유의해야 합니다.
+위 예시에서 `ProfileDetails`는 일부 데이터를 가져 오기 위해 비동기 API 호출을 기다리고 있습니다. `ProfileDetails`와 `ProfilePhoto`를 기다리는 동안에 `Loading...` 폴백을 대신 보여줍니다. `<Suspense>`의 모든 자식이 로드될 때까지 폴백을 계속 표시한다는 점에 주의해주세요.
 
-‘서스펜스’는 두 개의 props를 사용합니다:
-* **폴백**은 로드 표시기를 사용합니다 폴백은 ‘서스펜스’ 컴포넌트의 모든 아이가 렌더링을 마치기 전까지 표시됩니다.
-* **불안정한_폴백피하기**는 부울 방식을 사용합니다 이 도구는 초기 로드 중에 이 경계에 대한 “무시” 여부를 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
+`Suspense`는 두 개의 props를 사용합니다:
+* **fallback**은 로딩 표시기를 받아들입니다. 폴백은 `Suspense` 컴포넌트의 모든 자식이 렌더링을 마치기 전까지 표시됩니다.
+* **unstable_avoidThisFallback**는 boolean을 받아들입니다. 초기 로드할 때 이 경계를 보여주는 걸 건너뛸 지 말 지 React에게 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
 
-### `<서스펜스목록>` {#suspenselist}
+### `<SuspenseList>` {#suspenselist}
 
 ```js
 <SuspenseList revealOrder="forwards">
@@ -84,19 +84,19 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 직접 마이그
 </SuspenseList>
 ```
 
-‘서스펜스목록’은 사용자에게 출력되는 순서를 변경하여 일시 중단할 수도 있는 컴포넌트를 조정할 수 있습니다.
+`SuspenseList`는 컴포넌트가 사용자에게 표시되는 순서를 조정하여 일시 중단 할 수 있는 많은 컴포넌트를 조정하는 데 도움을 줍니다.
 
-여러 컴포넌트가 데이터를 가져올 때, 예상치 못한 순서로 가져올 수도 있지만, ‘서스펜스 목록’에 있는 이 도구들로 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
+여러 컴포넌트가 데이터를 가져올 때 예상하지 못한 순서로 데이터가 도착할 수 있습니다. `SuspenseList`로 이러한 항목을 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
 
-‘서스펜스 목록’은 두 개의 props를 사용합니다:
-* **순서표시(앞,뒤, 동시에)**는 ‘서스펜스목록’ 아이들이 표시되는 순서를 정의합니다.
- * ’동시에’는 하나씩 표시하는 것 대신에 준비된 *모두*를 표시합니다.
-* **테일(축소, 숨김)**은 ‘서스펜스목록’에서 언 로드된 항목을 표시하는 방법을 나타냅니다
- * 기본적으로, ‘서스펜스목록’은 목록에 모든 폴백을 표시합니다
- * ‘축소’는 목록에서 다음 폴백만 표시합니다
- * ‘숨김’은 언 로드된 항목을 표시하지 않습니다.
+`SuspenseList`은 두 개의 props를 사용합니다:
+* **revealOrder(forwards, backwards, together)**는 `SuspenseList` 자식이 표시되는 순서를 정의합니다.
+ * `together`는 하나씩 표시하지 않고 준비됐을 때 *모두 한번에* 표시합니다.
+* **tail (collapsed, hidden)**은 `SuspenseList`에서 로드되지 않은 항목을 표시하는 방법을 나타냅니다.
+ * 기본적으로, `SuspenseList`는 목록에 있는 모든 폴백을 표시합니다.
+ * `collapsed`는 목록에서 다음 폴백만 표시합니다.
+ * `hidden`은 로드되지 않은 항목을 표시하지 않습니다.
 
-‘서스펜스 목록’은 ‘서스펜스 목록’ 하에 있고 가장 인접한 ‘서스펜스’ 와 ‘서스펜스 목록’ 컴포넌트에만 동작한다는 점에 유의하세요 서스펜스 목록은 한 단계 더 깊은 경계는 검색하지 않지만, ‘서스펜스 목록’의 여러 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.
+`SuspenseList`는 `SuspenseList` 컴포넌트 아래에 있고 가장 인접한 `Suspense`와 `SuspenseList` 컴포넌트에만 동작한다는 점에 주의해주세요. 한 단계보다 깊은 경계는 검색하지 않지만 여러 `SuspenseList` 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.
 
 ### `useTransition` {#usetransition}
 
@@ -106,16 +106,16 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
 ```
 
-`useTransition`은 **다음 화면으로 전환**하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있습니다. 또한 컴포넌트가 후속 렌더링까지 더 느린 데이터 페치 업데이트를 지연시켜 보다 중요한 업데이트를 즉시 렌더링 할 수 있습니다.
+`useTransition`은 **다음 화면으로 transition**하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있게 해줍니다. 또한 컴포넌트가 더 중요한 업데이트를 즉시 렌더링 할 수 있도록 후속 렌더링까지 느린 데이터 가져오기를 지연시킬 수 있습니다.
 
 `useTransition` hook은 배열에서 두 개의 값을 반환합니다.
-* `startTransition`은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 전하기 위해 이 함수를 사용할 수 있습니다.
-*'isPending'은 부울입니다. 전환이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.
+* `startTransition`은 callback을 받는 함수입니다. React에게 지연하고자 하는 상태를 말해주기 위해 이 함수를 사용할 수 있습니다.
+* `isPending`은 boolean입니다. transition이 완료되기를 기다리고 있는지 알려주는 React의 방식입니다.
 
-**일부 상태 업데이트로 컴포넌트가 중단되면 해당 상태 업데이트는 전환으로 래핑되어야 합니다.**
+**일부 상태 업데이트로 컴포넌트가 중단되면 해당 상태 업데이트는 transition으로 감싸져야 합니다.**
 
 ```js
-const SUSPENSE_CONFIG = {timeoutMs: 2000 };
+const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 
 function App() {
   const [resource, setResource] = useState(initialResource);
@@ -142,11 +142,11 @@ function App() {
 }
 ```
 
-위 코드에서는 데이터 페칭을 `startTransition`으로 래핑했습니다. 이를 통해 다음 프로필 페이지의 렌더링과 연관된 ‘스피너’를 2초동안(`timeoutMS`에 표시된 시간) 지연시키면서 프로필 데이터를 바로 가져올 수 있습니다.
+위 코드에서 데이터 조회를 `startTransition`으로 감쌌습니다. 이를 통해 다음 프로필 페이지의 렌더링과 연관된 `Spinner`를 2초동안(`timeoutMS`에 표시된 시간) 지연시키면서 프로필 데이터를 바로 가져올 수 있습니다.
 
-`isPending` 부울은 React에게 컴포넌트가 전환중임을 알리기 때문에, 이전 프로필 페이지에 로딩텍스트를 표시하여 사용자에게 알려줍니다.
+`isPending` boolean은 React에게 컴포넌트가 transition 중이라는 걸 알리기 때문에, 이전 프로필 페이지에 로딩 텍스트를 표시하여 사용자에게 알려줍니다.
 
-** 전환에 대한 자세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#transitions)를 참고하세요.**
+**Transition에 대한 자세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#transitions)를 참고해주세요.**
 
 #### useTransition Config {#usetransition-config}
 
@@ -154,9 +154,9 @@ function App() {
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 ```
 
-`useTransition`은 `timeoutMS`가 포함 된 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 대기시간을 React에게 알려줍니다.
+`useTransition`은 `timeoutMS`가 포함된 **선택적인 Suspense Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 기다리는 시간을 React에게 알려줍니다.
 
-**참고: 여러 모듈간에 서스펜스 Config를 공유하는 것이 좋습니다.**
+**주의: 여러 모듈 간에 Suspense Config를 공유하는 것이 좋습니다.**
 
 
 ### `useDeferredValue` {#usedeferredvalue}
@@ -165,16 +165,16 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
 ```
 
-최대 `timeoutMS` 동안 "지연된" 값의 지연된 버전을 반환하세요.
+최대 `timeoutMS` 동안 "뒤처질 수 있는" 값의 지연된 버전을 반환하세요.
 
-이는 흔히 사용자 입력을 기반으로 즉시 렌더링되는 것과 데이터 패칭을 기다려야 할 때 인터페이스를 반응적으로 유지하는 데에 사용합니다.
+이는 흔히 사용자 입력을 기반으로 즉시 렌더링하거나 데이터 조회를 기다려야 할 때 인터페이스를 반응적으로 유지하는 데에 사용합니다.
 
-이에 대한 좋은 예는 텍스트 입력입니다.
+이에 대한 좋은 예시는 텍스트 입력입니다.
 
 ```js
 function App() {
   const [text, setText] = useState("hello");
-  const deferredText = useDeferredValue(text, {timeoutMs: 2000 });
+  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });
 
   return (
     <div className="App">
@@ -188,9 +188,9 @@ function App() {
  }
 ```
 
-이를 통해 `입력`에 대한 새 텍스트를 즉시 표시 할 수 있으므로 웹페이지가 반응적으로 느껴지도록 합니다. 한편, `MySlowList`는 업데이트 전에 ‘timeoutMS’에 따라 최대 2초 동안 “지연”되어 백그라운드에서 현재 텍스트를 렌더링 할 수 있습니다.
+이를 통해 `input`에 대한 새로운 텍스트를 즉시 표시 할 수 있으므로 웹페이지가 반응적으로 느껴지도록 합니다. 한편, `MySlowList`는 업데이트 전에 `timeoutMS`에 따라 최대 2초 동안 "뒤처져서" 백그라운드에서 현재 텍스트로 렌더링 할 수 있습니다.
 
-**값의 지연에 대한 상세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#deferring-a-value)를 참고하세요.**
+**값의 지연에 대한 상세한 내용은 [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html#deferring-a-value)을 참고해주세요.**
 
 #### useDeferredValue Config {#usedeferredvalue-config}
 
@@ -198,6 +198,6 @@ function App() {
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 ```
 
-`useDeferredValue`는 `timeoutMS`가 있는 **선택적인 서스펜스 Config**를 허용합니다. 이 시간초과(밀리초 내에 일어나는)는 지연된 값이 지연 될 수 있는 시간을 React에게 알립니다.
+`useDeferredValue`는 `timeoutMS`가 있는 **선택적인 Suspense Config**를 허용합니다. 이 시간초과(밀리초 내에 일어나는)는 뒤처진 값이 얼마나 지연될 수 있는지 React에게 알립니다.
 
-React는 네트워크와 장치가 허용할 때 항상 더 짧은 지연시간을 사용하려고 합니다.
+React는 네트워크와 장치가 허용할 때 항상 더 짧은 지연을 사용하려고 합니다.

From 40306af4a73dd0c64853de9d7caaf2ed4cd46469 Mon Sep 17 00:00:00 2001
From: Taehwan Noh <taehwanno.dev@gmail.com>
Date: Sat, 15 Aug 2020 00:19:29 +0900
Subject: [PATCH 4/5] Update concurrent mode reference

---
 content/docs/concurrent-mode-reference.md | 24 +++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md
index b8223f3e3..bfc5b08d6 100644
--- a/content/docs/concurrent-mode-reference.md
+++ b/content/docs/concurrent-mode-reference.md
@@ -5,12 +5,23 @@ permalink: docs/concurrent-mode-reference.html
 prev: concurrent-mode-adoption.html
 ---
 
->주의:
+<style>
+.scary > blockquote {
+  background-color: rgba(237, 51, 21, 0.2);
+  border-left-color: #ed3315;
+}
+</style>
+
+<div class="scary">
+
+>주의
 >
 >이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
 >
 >이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다.
 
+</div>
+
 이 페이지는 React [Concurrent 모드](/docs/concurrent-mode-intro.html)에 대한 API 참고서입니다. 도입부에 대한 가이드를 찾고 있다면, [Concurrent UI 패턴](/docs/concurrent-mode-patterns.html)을 확인해주세요.
 
 **주의: 이는 커뮤니티 프리뷰이며 최종적으로 안정된 배포판이 아닙니다. 향후에 이 API는 변경될 수도 있습니다. 본인의 책임하에 사용하세요!**
@@ -63,7 +74,7 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이
 
 위 예시에서 `ProfileDetails`는 일부 데이터를 가져 오기 위해 비동기 API 호출을 기다리고 있습니다. `ProfileDetails`와 `ProfilePhoto`를 기다리는 동안에 `Loading...` 폴백을 대신 보여줍니다. `<Suspense>`의 모든 자식이 로드될 때까지 폴백을 계속 표시한다는 점에 주의해주세요.
 
-`Suspense`는 두 개의 props를 사용합니다:
+`Suspense`는 두 개의 props를 사용합니다.
 * **fallback**은 로딩 표시기를 받아들입니다. 폴백은 `Suspense` 컴포넌트의 모든 자식이 렌더링을 마치기 전까지 표시됩니다.
 * **unstable_avoidThisFallback**는 boolean을 받아들입니다. 초기 로드할 때 이 경계를 보여주는 걸 건너뛸 지 말 지 React에게 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
 
@@ -88,7 +99,7 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이
 
 여러 컴포넌트가 데이터를 가져올 때 예상하지 못한 순서로 데이터가 도착할 수 있습니다. `SuspenseList`로 이러한 항목을 감싸면, React는 이전 항목을 표시하기 전까지 목록에 있는 항목을 출력하지 않습니다. (이 동작은 수정할 수 있습니다)
 
-`SuspenseList`은 두 개의 props를 사용합니다:
+`SuspenseList`은 두 개의 props를 사용합니다.
 * **revealOrder(forwards, backwards, together)**는 `SuspenseList` 자식이 표시되는 순서를 정의합니다.
  * `together`는 하나씩 표시하지 않고 준비됐을 때 *모두 한번에* 표시합니다.
 * **tail (collapsed, hidden)**은 `SuspenseList`에서 로드되지 않은 항목을 표시하는 방법을 나타냅니다.
@@ -154,7 +165,8 @@ function App() {
 const SUSPENSE_CONFIG = { timeoutMs: 2000 };
 ```
 
-`useTransition`은 `timeoutMS`가 포함된 **선택적인 Suspense Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예제에서 새로운 프로필 페이지)를 표시하기 전에 기다리는 시간을 React에게 알려줍니다.
+`useTransition`은 `timeoutMS`가 포함된 **선택적인 Suspense Config**를 허용합니다. 이 시간초과(밀리 초 내에 일어나는)는 다음 상태(위의 예시에서 새로운 프로필 페이지)를 표시하기 전에 기다리는 시간을 React에게 알려줍니다.
+
 
 **주의: 여러 모듈 간에 Suspense Config를 공유하는 것이 좋습니다.**
 
@@ -178,10 +190,10 @@ function App() {
 
   return (
     <div className="App">
-      {/* Keep passing the current text to the input */}
+      {/* input에 현재 텍스트를 계속 전달합니다. */}
       <input value={text} onChange={handleChange} />
       ...
-      {/* But the list is allowed to "lag behind" when necessary */}
+      {/* 하지만 이 목록은 필요한 경우 "뒤처질" 수 있습니다. */}
       <MySlowList text={deferredText} />
     </div>
   );

From 3cef0924d3dc6c92de39d5c8a263e121bfb2f3fc Mon Sep 17 00:00:00 2001
From: Taehwan Noh <taehwanno.dev@gmail.com>
Date: Sat, 15 Aug 2020 00:36:49 +0900
Subject: [PATCH 5/5] Apply suggestions from code review

---
 content/docs/concurrent-mode-reference.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md
index bfc5b08d6..3eaed65ff 100644
--- a/content/docs/concurrent-mode-reference.md
+++ b/content/docs/concurrent-mode-reference.md
@@ -16,9 +16,9 @@ prev: concurrent-mode-adoption.html
 
 >주의
 >
->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다. 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
+>이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다.** 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다.
 >
->이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다. 그 기능들을 바로 배울 필요는 없습니다.
+>이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. **React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다.** 그 기능들을 바로 배울 필요는 없습니다.
 
 </div>
 
@@ -43,7 +43,7 @@ prev: concurrent-mode-adoption.html
 ReactDOM.createRoot(rootNode).render(<App />);
 ```
 
-`ReactDOM.render( />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
+`ReactDOM.render(<App />, rootNode)`을 대체하고 Concurrent 모드를 활성화합니다.
 
 Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode 문서](/docs/concurrent-mode-intro.html)를 참고해주세요.
 
@@ -53,7 +53,7 @@ Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent
 ReactDOM.createBlockingRoot(rootNode).render(<App />)
 ```
 
-`ReactDOM.render( />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
+`ReactDOM.render(<App />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.
 
 Concurrent 모드를 선택하면 React 작동하는 방식에 의미적 변화가 생깁니다. 이는 몇몇 컴포넌트에서 Concurrent 모드를 사용할 수 없다는 걸 의미하며 몇몇 앱은 곧바로 Concurrent 모드로 마이그레이션을 할 수 없습니다.
 
@@ -76,7 +76,7 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이
 
 `Suspense`는 두 개의 props를 사용합니다.
 * **fallback**은 로딩 표시기를 받아들입니다. 폴백은 `Suspense` 컴포넌트의 모든 자식이 렌더링을 마치기 전까지 표시됩니다.
-* **unstable_avoidThisFallback**는 boolean을 받아들입니다. 초기 로드할 때 이 경계를 보여주는 걸 건너뛸 지 말 지 React에게 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
+* **unstable_avoidThisFallback**은 boolean을 받아들입니다. 초기 로드할 때 이 경계를 보여주는 걸 건너뛸 지 말 지 React에게 알려줍니다. 향후 배포판에서 이 API는 제거될 수 있습니다.
 
 ### `<SuspenseList>` {#suspenselist}
 
@@ -101,11 +101,11 @@ Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이
 
 `SuspenseList`은 두 개의 props를 사용합니다.
 * **revealOrder(forwards, backwards, together)**는 `SuspenseList` 자식이 표시되는 순서를 정의합니다.
- * `together`는 하나씩 표시하지 않고 준비됐을 때 *모두 한번에* 표시합니다.
+  * `together`는 하나씩 표시하지 않고 준비됐을 때 *모두 한번에* 표시합니다.
 * **tail (collapsed, hidden)**은 `SuspenseList`에서 로드되지 않은 항목을 표시하는 방법을 나타냅니다.
- * 기본적으로, `SuspenseList`는 목록에 있는 모든 폴백을 표시합니다.
- * `collapsed`는 목록에서 다음 폴백만 표시합니다.
- * `hidden`은 로드되지 않은 항목을 표시하지 않습니다.
+    * 기본적으로, `SuspenseList`는 목록에 있는 모든 폴백을 표시합니다.
+    * `collapsed`는 목록에서 다음 폴백만 표시합니다.
+    * `hidden`은 로드되지 않은 항목을 표시하지 않습니다.
 
 `SuspenseList`는 `SuspenseList` 컴포넌트 아래에 있고 가장 인접한 `Suspense`와 `SuspenseList` 컴포넌트에만 동작한다는 점에 주의해주세요. 한 단계보다 깊은 경계는 검색하지 않지만 여러 `SuspenseList` 컴포넌트를 중첩해 그리드를 형성할 수는 있습니다.