Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Adopting Concurrent Mode" 번역 #182

Merged
merged 9 commits into from
Dec 3, 2019
Merged

"Adopting Concurrent Mode" 번역 #182

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
62ee753
"Adopting Concurrent Mode" 한글로 번역
Nov 7, 2019
f0754f7
Merge branch 'master' into master
junsikshim Nov 7, 2019
97552c9
Merge branch 'master' into master
hg-pyun Nov 14, 2019
0fc4cff
- 리뷰 반영
Nov 14, 2019
d63d7d4
Merge branch 'master' into master
junsikshim Nov 14, 2019
c0c0a2a
Merge branch 'master' into master
junsikshim Nov 21, 2019
02e4031
Merge remote-tracking branch 'upstream/master'
taehwanno Nov 30, 2019
0f0298f
Update concurrent mode adoption
taehwanno Nov 30, 2019
6e83dd0
Merge branch 'master' into master
hg-pyun Dec 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 53 additions & 53 deletions content/docs/concurrent-mode-adoption.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: concurrent-mode-adoption
title: Adopting Concurrent Mode (Experimental)
title: Concurrent 모드 도입하기 (실험 단계)
permalink: docs/concurrent-mode-adoption.html
prev: concurrent-mode-patterns.html
next: concurrent-mode-reference.html
Expand All @@ -15,98 +15,98 @@ next: concurrent-mode-reference.html

<div class="scary">

>Caution:
>주의
>
>This page describes **experimental features that are not yet available 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.
>이 페이지는 **안정된 배포판에서 아직 제공되지 않는 실험적인 기능들**에 대해 설명합니다. 프로덕션용 앱에선 React 실험 배포판을 사용하지 마세요. 이러한 기능들은 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>

- [Installation](#installation)
- [Who Is This Experimental Release For?](#who-is-this-experimental-release-for)
- [Enabling Concurrent Mode](#enabling-concurrent-mode)
- [What to Expect](#what-to-expect)
- [Migration Step: Blocking Mode](#migration-step-blocking-mode)
- [Why So Many Modes?](#why-so-many-modes)
- [Feature Comparison](#feature-comparison)
- [설치하기](#installation)
- [실험 배포판은 누구를 위한 걸까요?](#who-is-this-experimental-release-for)
- [Concurrent 모드 활성화하기](#enabling-concurrent-mode)
- [무엇을 기대해야 할까요?](#what-to-expect)
- [마이그레이션 단계: Blocking 모드](#migration-step-blocking-mode)
- [왜 여러 모드가 필요할까요?](#why-so-many-modes)
- [기능 비교](#feature-comparison)

## Installation {#installation}
## 설치하기 {#installation}

Concurrent Mode is only available in the [experimental builds](/blog/2019/10/22/react-release-channels.html#experimental-channel) of React. To install them, run:
Concurrent 모드는 React [실험 배포판](/blog/2019/10/22/react-release-channels.html#experimental-channel)에서만 사용 가능합니다. 설치하려면 다음을 실행하세요.

```
npm install react@experimental react-dom@experimental
```

**There are no semantic versioning guarantees for the experimental builds.**
APIs may be added, changed, or removed with any `@experimental` release.
**실험 배포판에는 시맨틱 버저닝이 보장되지 않습니다.**
`@experimental` 배포판에는 언제든지 API가 추가, 변경, 삭제될 수 있습니다.

**Experimental releases will have frequent breaking changes.**
**실험 배포판에는 호환되지 않는 변경사항이 종종 발생합니다.**

You can try these builds on personal projects or in a branch, but we don't recommend running them in production. At Facebook, we *do* run them in production, but that's because we're also there to fix bugs when something breaks. You've been warned!
이런 배포판을 개인 프로젝트나 브랜치에서 사용하는 것은 상관없지만, 프로덕션 환경에서 실행하는 것은 권장하지 않습니다. Facebook에서는 프로덕션 환경에서 사용하고 있긴 하지만, 문제가 발생했을 때 버그를 잡을 수 있도록 대기하고 있기 때문에 가능한 일입니다. 경고를 명심하세요!

### Who Is This Experimental Release For? {#who-is-this-experimental-release-for}
### 실험 배포판은 누구를 위한 걸까요? {#who-is-this-experimental-release-for}

This release is primarily aimed at early adopters, library authors, and curious people.
이 배포판은 얼리 어댑터, 라이브러리 제작자, 궁금해하는 사람들을 주요 대상으로 합니다.

We're using this code in production (and it works for us) but there are still some bugs, missing features, and gaps in the documentation. We'd like to hear more about what breaks in Concurrent Mode so we can better prepare it for an official stable release in the future.
저희는 프로덕션 환경에서 이 코드를 잘 사용 중이지만, 아직 버그가 남아있고, 기능이 부족하며, 문서도 빈약합니다. Concurrent 모드가 제대로 동작하지 않는 경우에 대해 좀 더 귀 기울여서 추후에 있을 공식 배포를 더욱 잘 준비하고자 합니다.

### Enabling Concurrent Mode {#enabling-concurrent-mode}
### Concurrent 모드 활성화하기 {#enabling-concurrent-mode}

Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use in new code without making any changes to the existing code.
보통, React에 기능이 추가될 땐 즉시 사용 가능합니다. Fragments, Context, Hooks 등이 그러한 예죠. 기존 코드를 전혀 수정하지 않고도 새 코드에서 사용할 수 있습니다.

Concurrent Mode is different. It introduces semantic changes to how React works. Otherwise, the [new features](/docs/concurrent-mode-patterns.html) enabled by it *wouldn't be possible*. This is why they're grouped into a new "mode" rather than released one by one in isolation.
Concurrent 모드는 다릅니다. React가 동작하는 방식에 시맨틱 한 차이가 생겼죠. 이런 차이 없이는, [신기능들](/docs/concurrent-mode-patterns.html)은 가능하지 않았을 겁니다. 따라서, 개별적으로 독립 배포되지 않고 하나의 새로운 "모드"로 그룹화 되었습니다.

You can't opt into Concurrent Mode on a per-subtree basis. Instead, to opt in, you have to do it in the place where today you call `ReactDOM.render()`.
하위 트리 단위로 Concurrent 모드를 선택할 수는 없습니다. 대신에 `ReactDOM.render()`를 호출하는 부분에서 선택해야 합니다.

**This will enable Concurrent Mode for the whole `<App />` tree:**
**이 코드는 전체 `<App />` 트리에 대해 Concurrent 모드를 활성화합니다.**

```js
import ReactDOM from 'react-dom';

// If you previously had:
// 기존 코드가 다음과 같았다면,
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// You can opt into Concurrent Mode by writing:
// 다음과 같이 작성하여 Concurrent 모드를 선택할 수 있습니다.

ReactDOM.createRoot(
document.getElementById('root')
).render(<App />);
```

>Note:
>주의
>
>Concurrent Mode APIs such as `createRoot` only exist in the experimental builds of React.
>`createRoot`와 같은 Concurrent 모드 API는 React의 실험 배포판에만 존재합니다.

In Concurrent Mode, the lifecycle methods [previously marked](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) as "unsafe" actually *are* unsafe, and lead to bugs even more than in today's React. We don't recommend trying Concurrent Mode until your app is [Strict Mode](https://reactjs.org/docs/strict-mode.html)-compatible.
Concurrent 모드에서는 "unsafe"라고 [기존에 표시된](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) 생명주기 메서드가 현재 React 버전에서보다도 더 많은 버그를 야기할 수 있습니다. 앱이 [Strict 모드](https://reactjs.org/docs/strict-mode.html)와 호환되기 전까지 Concurrent 모드를 시도하는 걸 권장하지 않습니다.

## What to Expect {#what-to-expect}
## 무엇을 기대해야 할까요? {#what-to-expect}

If you have a large existing app, or if your app depends on a lot of third-party packages, please don't expect that you can use the Concurrent Mode immediately. **For example, at Facebook we are using Concurrent Mode for the new website, but we're not planning to enable it on the old website.** This is because our old website still uses unsafe lifecycle methods in the product code, incompatible third-party libraries, and patterns that don't work well with the Concurrent Mode.
큰 규모의 앱이거나 많은 수의 서드 파티 패키지에 의존하고 있는 앱이라면 Concurrent 모드를 바로 사용할 수 있을 거라 섣불리 판단하기는 어렵습니다. **예로, Facebook에선 신규 웹사이트에 Concurrent 모드를 사용 중이지만, 기존 웹사이트에는 적용할 계획이 없습니다.** 기존 웹사이트는 안전하지 않은 생명주기 메서드와, 호환되지 않는 서드 파티 라이브러리, 그리고 Concurrent 모드와 잘 동작하지 않는 패턴들을 사용하고 있기 때문이죠.

In our experience, code that uses idiomatic React patterns and doesn't rely on external state management solutions is the easiest to get running in the Concurrent Mode. We will describe common problems we've seen and the solutions to them separately in the coming weeks.
저희 경험에 의하면, 자주 사용되는 React 패턴들을 사용하면서 외부 상태 관리 솔루션에 기대지 않는 코드가 가장 쉽게 Concurrent 모드로 실행됩니다. 수 주 이내로 흔히 발생하는 문제점과 해결방안을 별도로 설명할 계획입니다.

### Migration Step: Blocking Mode {#migration-step-blocking-mode}
### 마이그레이션 단계: Blocking 모드 {#migration-step-blocking-mode}

For older codebases, Concurrent Mode might be a step too far. This is why we also provide a new "Blocking Mode" in the experimental React builds. You can try it by substituting `createRoot` with `createBlockingRoot`. It only offers a *small subset* of the Concurrent Mode features, but it is closer to how React works today and can serve as a migration step.
오래된 코드베이스의 경우, Concurrent 모드는 너무 앞서나간 것일 수 있습니다. 그래서 React 실험 배포판에선 새로운 "Blocking 모드"를 제공하고 있죠. `createRoot`을 `createBlockingRoot`로 바꿔주는 것으로 실행해 볼 수 있습니다. 비록 Concurrent 모드의 기능 중 *작은 일부*만을 제공하지만, 현재 React 동작 구조에 가깝기 때문에 마이그레이션 단계로서 역할을 다 할 수 있습니다.

To recap:
정리하면,

* **Legacy Mode:** `ReactDOM.render(<App />, rootNode)`. This is what React apps use today. There are no plans to remove the legacy mode in the observable future — but it won't be able to support these new features.
* **Blocking Mode:** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. It is currently experimental. It is intended as a first migration step for apps that want to get a subset of Concurrent Mode features.
* **Concurrent Mode:** `ReactDOM.createRoot(rootNode).render(<App />)`. It is currently experimental. In the future, after it stabilizes, we intend to make it the default React mode. This mode enables *all* the new features.
* **Legacy 모드** `ReactDOM.render(<App />, rootNode)`. 현재 React 앱들이 사용하고 있는 모드입니다. 아직 가까운 미래에 Legacy 모드를 없앨 계획은 없지만, 신규 기능들을 사용할 수는 없을 겁니다.
* **Blocking 모드** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. 현재 실험 중인 상태입니다. Concurrent 모드의 일부 기능을 제공할 수 있는 첫 번째 마이그레이션 단계입니다.
* **Concurrent 모드** `ReactDOM.createRoot(rootNode).render(<App />)`. 현재 실험 중인 상태입니다. 안정된 후엔 React 기본 모드로 만들 예정입니다. 이 모드에선 *모든* 신규 기능을 사용할 수 있습니다.

### Why So Many Modes? {#why-so-many-modes}
### 왜 여러 모드가 필요할까요? {#why-so-many-modes}

We think it is better to offer a [gradual migration strategy](/docs/faq-versioning.html#commitment-to-stability) than to make huge breaking changes — or to let React stagnate into irrelevance.
저희는 호환되지 않는 큰 변화를 가져오거나 React가 침체하도록 나두는 것보다 [점진적인 마이그레이션 전략](/docs/faq-versioning.html#commitment-to-stability)을 제공하는 게 낫다고 생각합니다.

In practice, we expect that most apps using Legacy Mode today should be able to migrate at least to the Blocking Mode (if not Concurrent Mode). This fragmentation can be annoying for libraries that aim to support all Modes in the short term. However, gradually moving the ecosystem away from the Legacy Mode will also *solve* problems that affect major libraries in the React ecosystem, such as [confusing Suspense behavior when reading layout](https://github.com/facebook/react/issues/14536) and [lack of consistent batching guarantees](https://github.com/facebook/react/issues/15080). There's a number of bugs that can't be fixed in Legacy Mode without changing semantics, but don't exist in Blocking and Concurrent Modes.
현재 Legacy 모드를 사용하는 대부분의 앱이 Concurrent 모드까지는 아니더라도 적어도 Blocking 모드로는 마이그레이션이 가능할 것이라 생각합니다. 단기적으로 이러한 파편화는 모든 모드를 지원하고자 하는 라이브러리엔 귀찮을 수 있습니다. 하지만 점진적으로 Legacy 모드에서 벗어나는 것이 [레이아웃을 읽을 때의 혼란스러운 Suspense 동작](https://github.com/facebook/react/issues/14536)과 [일관된 배칭 보장의 부족](https://github.com/facebook/react/issues/15080)과 같이, 현재 React 생태계의 주요 라이브러리들이 겪고 있는 문제들을 해결해 줄 수 있습니다. 시맨틱 변화 없이 Legacy 모드에서 수정될 수 없는 버그이지만 Blocking이나 Concurrent 모드에선 존재하지 않는 경우가 여럿 있습니다.

You can think of the Blocking Mode as a "gracefully degraded" version of the Concurrent Mode. **As a result, in longer term we should be able to converge and stop thinking about different Modes altogether.** But for now, Modes are an important migration strategy. They let everyone decide when a migration is worth it, and upgrade at their own pace.
Blocking 모드를 Concurrent 모드의 "우아한 성능 저하" 버전이라고 생각할 수 있습니다. **장기적으로는 모두 수렴되어서 여러 모드에 대해 생각할 필요가 없어질 겁니다.** 하지만 지금의 여러 모드는 마이그레이션을 위한 중요한 전략입니다. 사람들이 스스로 마이그레이션 할 가치가 있는지 판단할 수 있고, 각자의 상황에 맞춰 업그레이드 할 수 있습니다.

### Feature Comparison {#feature-comparison}
### 기능 비교 {#feature-comparison}

<style>
#feature-table table { border-collapse: collapse; }
Expand All @@ -116,26 +116,26 @@ You can think of the Blocking Mode as a "gracefully degraded" version of the Con

<div id="feature-table">

| |Legacy Mode |Blocking Mode |Concurrent Mode |
| |Legacy 모드 |Blocking 모드 |Concurrent 모드 |
|--- |--- |--- |--- |
|[String Refs](/docs/refs-and-the-dom.html#legacy-api-string-refs) |✅ |🚫** |🚫** |
|[Legacy Context](/docs/legacy-context.html) |✅ |🚫** |🚫** |
|[문자열 Refs](/docs/refs-and-the-dom.html#legacy-api-string-refs) |✅ |🚫** |🚫** |
|[레거시 Context](/docs/legacy-context.html) |✅ |🚫** |🚫** |
|[findDOMNode](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) |✅ |🚫** |🚫** |
|[Suspense](/docs/concurrent-mode-suspense.html#what-is-suspense-exactly) |✅ |✅ |✅ |
|[SuspenseList](/docs/concurrent-mode-patterns.html#suspenselist) |🚫 |✅ |✅ |
|Suspense SSR + Hydration |🚫 |✅ |✅ |
|Progressive Hydration |🚫 |✅ |✅ |
|Selective Hydration |🚫 |🚫 |✅ |
|Cooperative Multitasking |🚫 |🚫 |✅ |
|Automatic batching of multiple setStates    |🚫* |✅ |✅ |
|[Priority-based Rendering](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫 |🚫 |✅ |
|[Interruptible Prerendering](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫 |🚫 |✅ |
|Cooperative 멀티태스킹 |🚫 |🚫 |✅ |
|다수의 setState의 자동 배칭    |🚫* |✅ |✅ |
|[우선순위 기반 렌더링](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫 |🚫 |✅ |
|[중단 가능한 Pre-렌더링](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫 |🚫 |✅ |
|[useTransition](/docs/concurrent-mode-patterns.html#transitions) |🚫 |🚫 |✅ |
|[useDeferredValue](/docs/concurrent-mode-patterns.html#deferring-a-value) |🚫 |🚫 |✅ |
|[Suspense Reveal "Train"](/docs/concurrent-mode-patterns.html#suspense-reveal-train) |🚫 |🚫 |✅ |

</div>

\*: Legacy mode has automatic batching in React-managed events but it's limited to one browser task. Non-React events must opt-in using `unstable_batchedUpdates`. In Blocking Mode and Concurrent Mode, all `setState`s are batched by default.
\*: Legacy 모드도 React가 관리하는 이벤트의 자동 배칭 기능을 가지고 있지만, 하나의 브라우저 태스크에 국한됩니다. 비 React 이벤트는 `unstable_batchedUpdates`를 사용해야만 합니다. Blocking 모드와 Concurrent 모드에서는 모든 `setState`가 디폴트로 배치됩니다.

\*\*: Warns in development.
\*\*: 개발 환경에서 경고가 표시됩니다.