From ca7927604a91886ac1885d2899026b531ac24d10 Mon Sep 17 00:00:00 2001
From: baekjuwon <66767wndnjs@naver.com>
Date: Sun, 26 May 2019 15:42:14 +0900
Subject: [PATCH 1/6] pul request
---
content/docs/implementation-notes.md | 238 ++++++++++++++-------------
1 file changed, 121 insertions(+), 117 deletions(-)
diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md
index a035a5edf..2e618edc7 100644
--- a/content/docs/implementation-notes.md
+++ b/content/docs/implementation-notes.md
@@ -9,50 +9,51 @@ redirect_from:
- "contributing/implementation-notes.html"
---
-This section is a collection of implementation notes for the [stack reconciler](/docs/codebase-overview.html#stack-reconciler).
+이 부분은 [stack reconciler](/docs/codebase-overview.html#stack-reconciler)에 대한 구현 노트들의 모음입니다.
-It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read [the codebase overview](/docs/codebase-overview.html) first.
+이는 매우 기술적이고 리액트 퍼블릭 API 뿐만아니라 어떻게 코어, 랜더러, 리콘사일러로 나누어지는지에 대해 깊은 이해가 수반됩니다. 아직 리액트 코드베이스에 친숙하지 않다면,
+먼저 [the codebase overview](/docs/codebase-overview.html)를 읽기를 바랍니다.
-It also assumes an understanding of the [differences between React components, their instances, and elements](/blog/2015/12/18/react-components-elements-and-instances.html).
+이는 [differences between React components, their instances, and elements](/blog/2015/12/18/react-components-elements-and-instances.html)을 이해하는 것을 수반합니다.
-The stack reconciler was used in React 15 and earlier. It is located at [src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler).
+스택 리콘사일러는 리액트 15보다 일찍 사용되었습니다. 이는[src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler)에 위치해 있습니다.
-### Video: Building React from Scratch {#video-building-react-from-scratch}
+### 비디오 : 스크래치로부터 리액트를 설계 {#video-building-react-from-scratch}
-[Paul O'Shannessy](https://twitter.com/zpao) gave a talk about [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) that largely inspired this document.
+[Paul O'Shannessy](https://twitter.com/zpao)는 이 문서에 크게 영감을 주었던 [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg)에 대해 이야기 하였습니다.
+이 문서와 그의 말은 모두 현실 코드베이스의 단순화했기 때문에 여러분은
+두 가지 모두 친숙해 짐으로써 더 깊은 이해를 가질 것입니다.
-Both this document and his talk are simplifications of the real codebase so you might get a better understanding by getting familiar with both of them.
+### 개요 {#overview}
-### Overview {#overview}
+ reconciler는 공공 API를 가지지 않습니다. 리액트 DOM과 리액트 네이티브와 같은 [Renderers](/docs/codebase-overview.html#stack-renderers)는 사용자가 쓴, 리액트 컴포넌트에 따른 사용자 인터페이스를 효율적으로 업데이트를 하기 위해서 사용합니다.
-The reconciler itself doesn't have a public API. [Renderers](/docs/codebase-overview.html#stack-renderers) like React DOM and React Native use it to efficiently update the user interface according to the React components written by the user.
+### 재귀적인 과정으로써의 마운트 {#mounting-as-a-recursive-process}
-### Mounting as a Recursive Process {#mounting-as-a-recursive-process}
-
-Let's consider the first time you mount a component:
+여러분들이 컴포넌트를 처음 마운트할 때를 고려해 봅시다.
```js
ReactDOM.render(, rootEl);
```
-React DOM will pass `` along to the reconciler. Remember that `` is a React element, that is, a description of *what* to render. You can think about it as a plain object:
+리액트 DOM은 컨사일러를 통해 ``를 통과하게 할 것입니다. ``은 리액트 엘리먼트이며, 랜더링 할 것을 설명해 놓은 것임을 기억합시다. 이것을 평범한 개체로 생각해도 좋습니다.
```js
console.log();
// { type: App, props: {} }
```
-The reconciler will check if `App` is a class or a function.
+컨사일러가 `App`이 클래스인지 함수인지를 확인할 것입니다.
-If `App` is a function, the reconciler will call `App(props)` to get the rendered element.
+`App`이 함수이면, 컨사일러는 랜더링 요소들을 가져오기 위해 `App(props)`를 부를것 입니다.
-If `App` is a class, the reconciler will instantiate an `App` with `new App(props)`, call the `componentWillMount()` lifecycle method, and then will call the `render()` method to get the rendered element.
+`App`이 클래스면, 컨사일러는 `App`을 `new App(props)`로 인스턴스화 하고, `componentWillMount()` 라이프사이클 메서드를 호출한 후, `render()` 메서드를 호출하여 랜더링 엘리먼트를 가져오게 할 것입니다.
-Either way, the reconciler will learn the element `App` "rendered to".
+어느 경우든, 컨사일러는 "render to"라는 `App`의 엘리먼트를 알게 될 것입니다.
-This process is recursive. `App` may render to a ``, `Greeting` may render to a ``, and so on. The reconciler will "drill down" through user-defined components recursively as it learns what each component renders to.
+이러한 과정은 재귀적입니다. `App`은 ``으로 랜더링 될 것이고, `Greeting`은 Button 등으로 랜더링 될 것입니다. 컨사일러는 각 컴포넌트들이 어떻게 랜더링 되는지에 대해 알 때, 사용자 정의 컴포넌트를 통해 재귀적으로 "drill down"할 것입니다.
-You can imagine this process as a pseudocode:
+여러분들은 슈도코드로 작성된 이 과정을 생각해봅시다.
```js
function isClass(type) {
@@ -105,40 +106,41 @@ rootEl.appendChild(node);
>**Note:**
>
->This really *is* a pseudo-code. It isn't similar to the real implementation. It will also cause a stack overflow because we haven't discussed when to stop the recursion.
+>이는 슈도코드입니다. 이는 실제 구현에서와는 비슷하지 않습니다. 우리가 이 과정을
+언제 멈출 지 결정을 한 적이 없기 때문에 스택 오버플로우 또한 야기할 수 있습니다.
-Let's recap a few key ideas in the example above:
+위의 예에서 몇가지 핵심 아이디어를 요약해 봅시다.
-* React elements are plain objects representing the component type (e.g. `App`) and the props.
-* User-defined components (e.g. `App`) can be classes or functions but they all "render to" elements.
-* "Mounting" is a recursive process that creates a DOM or Native tree given the top-level React element (e.g. ``).
+* 리액트 엘리먼트는 구성 엘리먼트의 타입(예: `App`)과 props를 나타내는 일반 객체입니다.
+* 사용자 정의된 컴포넌트(예: `App`)은 클래스이거나 함수일 수 있지만 모두 랜더링되는 엘리먼트입니다.
+* "마운팅"은 최상위 리액트 엘리먼트로부터 주어진 DOM과 네이티브 트리를 만드는 재귀적인 과정이다.(예: ``)
-### Mounting Host Elements {#mounting-host-elements}
+### 호스트 엘리먼트 마운팅 {#mounting-host-elements}
-This process would be useless if we didn't render something to the screen as a result.
+이 과정은 우리가 스크린에 무언가를 랜더링하지 않는다면 무의미해집니다.
-In addition to user-defined ("composite") components, React elements may also represent platform-specific ("host") components. For example, `Button` might return a `` from its render method.
+사용자 정의된("composite") 컴포넌트 외에도, 리액트 엘리먼트는 플랫폼 특유의("host") 컴포넌트를 나타낼 수 있습니다.예를 들어, `Button`은 랜더링된 메서드에서 ``를 리턴할 수 있습니다.
-If element's `type` property is a string, we are dealing with a host element:
+엘리먼트의 `type`이 문자열인 경우, 우리는 호스트 엘리먼트로 처리합니다.
```js
console.log();
// { type: 'div', props: {} }
```
-There is no user-defined code associated with host elements.
+이 곳에는 호스트 엘리먼트와 관련된 사용자 정의된 코드가 없습니다.
-When the reconciler encounters a host element, it lets the renderer take care of mounting it. For example, React DOM would create a DOM node.
+컨사일러가 호스트 엘리먼트를 만나게 되면, 랜더러가 호스트 엘리먼트를 마운트할 수 있도록 관리합니다. 예를 들어,리액트 DOM은 DOM 노드를 생성할 것입니다.
-If the host element has children, the reconciler recursively mounts them following the same algorithm as above. It doesn't matter whether children are host (like `
`), composite (like ``), or both.
+호스트 엘리먼트가 자식을 가지고 있으면, reconciler가 위와 같은 알고리즘에따라 재귀적으로 그들을 설치합니다. 이는 자식이 호스트(like `
`)인지 컴포싯(like ``)인지 아니면 둘 다인지는 상관이 없습니다.
-The DOM nodes produced by the child components will be appended to the parent DOM node, and recursively, the complete DOM structure will be assembled.
+자식에 의해 제공되는 DOM 노드는 상위 DOM 노드로 추가될 것이고, 완성된 DOM 구조는 모아질 것입니다.
>**Note:**
>
->The reconciler itself is not tied to the DOM. The exact result of mounting (sometimes called "mount image" in the source code) depends on the renderer, and can be a DOM node (React DOM), a string (React DOM Server), or a number representing a native view (React Native).
+컨사일러는 본질적으로 DOM에 얽매이지 않습니다. 마운트된 것에 대한 정확한 결과(소스코드에 있는 "mount image"로 불리는 것과 같은)는 랜더러에 의존하고, DOM 노드(리액트 DOM), 문자열(리액트 DOM 서버) 또는 네이티브 뷰어(리액트 네이티브)를 나타내는 숫자가 될 수도 있습니다.
-If we were to extend the code to handle host elements, it would look like this:
+호스트 엘리먼트를 다루기 위해 코드를 확장하는 경우, 다음과 같이 보일 수 있습니다.
```js
function isClass(type) {
@@ -229,11 +231,12 @@ var node = mount();
rootEl.appendChild(node);
```
-This is working but still far from how the reconciler is really implemented. The key missing ingredient is support for updates.
+이는 효과가 있지만 컨사일러가 실제로 구현되는 방식과는 아직 거리가 멉니다.
+누락된 핵심 요소는 업데이트를 지원하는 것입니다.
-### Introducing Internal Instances {#introducing-internal-instances}
+### 인터벌 인스턴스의 소개 {#introducing-internal-instances}
-The key feature of React is that you can re-render everything, and it won't recreate the DOM or reset the state:
+리액트의 가장 큰 특징은 모든 것을 재랜더링을 할 수 있고, DOM을 재생성하거나 상태를 초기화시키지 않아도 됩니다.
```js
ReactDOM.render(, rootEl);
@@ -241,13 +244,13 @@ ReactDOM.render(, rootEl);
ReactDOM.render(, rootEl);
```
-However, our implementation above only knows how to mount the initial tree. It can't perform updates on it because it doesn't store all the necessary information, such as all the `publicInstance`s, or which DOM `node`s correspond to which components.
+그러나, 위의 구현은 처음 트리를 어떻게 마운트 하는지만 알고 있습니다. 모든 `publicInstance`와 어떤 DOM `node`가 각 컴포넌트에 상응하는지와 같은 필수 정보를 담고 있지 않기 때문에 업데이트를 수행할 수 없습니다.
-The stack reconciler codebase solves this by making the `mount()` function a method and putting it on a class. There are drawbacks to this approach, and we are going in the opposite direction in the [ongoing rewrite of the reconciler](/docs/codebase-overview.html#fiber-reconciler). Nevertheless this is how it works now.
+스택 reconciler의 코드베이스가 `mount()` 기능을 하나의 방법으로 만들고 클래스에 배치하여 위와 같은 문제를 해결합니다. 이러한 접근에는 단점도 있는데, 현재 우리는 [ongoing rewrite of the reconciler](/docs/codebase-overview.html#fiber-reconciler) 한 것에 대해 반대 방향으로 진행하고 있습니다. 그렇지만, 이것이 현재 작동하는 방식 중 하나입니다.
-Instead of separate `mountHost` and `mountComposite` functions, we will create two classes: `DOMComponent` and `CompositeComponent`.
+`mountHost`와 `mountComposite` 함수를 분리하는 것 대신에, 우리는 `DOMComponent`와 `CompositeComponent` 의 두 가지 클래스를 생성합니다.
-Both classes have a constructor accepting the `element`, as well as a `mount()` method returning the mounted node. We will replace a top-level `mount()` function with a factory that instantiates the correct class:
+두 클래스 모두 `element`에 접근할 수 있는 생성자 뿐만 아니라 설치된 노드를 반환해주는`mount()` 메서드를 가지고 있습니다. 우리는 Top-level `mount()` 메서드를 올바른 클래스로 인스턴스화 하는 팩토리로 교체합니다.
```js
function instantiateComponent(element) {
@@ -262,7 +265,7 @@ function instantiateComponent(element) {
}
```
-First, let's consider the implementation of `CompositeComponent`:
+먼저, `CompositeComponent`을 구현한 것을 봅시다.
```js
class CompositeComponent {
@@ -315,15 +318,15 @@ class CompositeComponent {
}
```
-This is not much different from our previous `mountComposite()` implementation, but now we can save some information, such as `this.currentElement`, `this.renderedComponent`, and `this.publicInstance`, for use during updates.
+이는 이전 `mountComposite()` 구현과 크게 다르지 않지만,`this.currentElement`, `this.renderedComponent`, `this.publicInstance` 와 같이 업데이트에 사용할 수 있도록 정보를 저장할 수 있습니다.
-Note that an instance of `CompositeComponent` is not the same thing as an instance of the user-supplied `element.type`. `CompositeComponent` is an implementation detail of our reconciler, and is never exposed to the user. The user-defined class is the one we read from `element.type`, and `CompositeComponent` creates an instance of it.
+`CompositeComponent`의 인스턴스가 사용자공급 정의되는 `element.type`의 인스턴스와 다르다는 것을 알아차려야 합니다. `CompositeComponent`는 우리의 reconciler 의 세부 구현 내용이고, 사용자에게는 노출되지 않습니다. 사용자 정의된 클래스는 우리가 `element.type`로부터 읽어들이는 것 중 하나이고, `CompositeComponent`가 이에 대한 인스턴스를 생성합니다.
-To avoid the confusion, we will call instances of `CompositeComponent` and `DOMComponent` "internal instances". They exist so we can associate some long-lived data with them. Only the renderer and the reconciler are aware that they exist.
+혼동을 막기 위해, 우리는 `CompositeComponent`와 `DOMComponent`의 인스턴스를 "인터벌 인스턴스" 로 부릅니다. 그들이 존재하기 때문에 우리가 몇 가지 오래 지속되는 데이터를 그들과 연관시킬 수 있습니다. 오직 랜더러와 reconciler 가 그들의 존재성을 알고 있습니다.
-In contrast, we call an instance of the user-defined class a "public instance". The public instance is what you see as `this` in the `render()` and other methods of your custom components.
+반면, 우리는 사용자 정의된 클래스의 인스턴스를 "퍼블릭 인스턴스"라고 부릅니다. 퍼블릭 인스턴스는 `render()`안에 있는 `this`로 보이는 것과 여러분의 컴포넌트의 다른 메서드이기도 합니다.
-The `mountHost()` function, refactored to be a `mount()` method on `DOMComponent` class, also looks familiar:
+`DOMComponent` 클래스의 `mount()` 메서드로 리팩터링된 `mountHost()` 메서드 또한 비슷하게 보입니다.
```js
class DOMComponent {
@@ -374,9 +377,10 @@ class DOMComponent {
}
```
-The main difference after refactoring from `mountHost()` is that we now keep `this.node` and `this.renderedChildren` associated with the internal DOM component instance. We will also use them for applying non-destructive updates in the future.
+`mountHost()`로 리팩터링한 후의 주요 차이점은 `this.node`와 내부 DOM 컴포넌트 인스턴스와 연결된 `this.renderedChildren`을 유지한다는 것입니다. 향후 non-destructive 업데이트 적용에도 활용할 예정입니다.
+
-As a result, each internal instance, composite or host, now points to its child internal instances. To help visualize this, if a function `` component renders a `