Merge pull request #237 from reactjs/sync-63332462

Sync with reactjs.org @ 6333246

Author: simsim0709

content/blog/2019-08-15-new-react-devtools.md

@@ -23,8 +23,8 @@ It also offers full support for React Hooks, including inspecting nested objects
 * `16.x`: Supported
 
 **`react-native`**
-* `0`-`0.61`: Not supported
-* `0.62`: Will be supported (when 0.62 is released)
+* `0`-`0.61.x`: Not supported
+* `0.62`: Supported
 
 ## How do I get the new DevTools? {#how-do-i-get-the-new-devtools}
 

content/docs/code-splitting.md

@@ -40,7 +40,7 @@ console.log(add(16, 26)); // 42
 >
 > 실제 번들은 위 예시와는 많이 다르게 보일 겁니다.
 
-[Create React App](https://github.com/facebookincubator/create-react-app)이나 [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
+[Create React App](https://create-react-app.dev/)이나 [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
 
 이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 이 경우 Webpack의 
 [설치하기](https://webpack.js.org/guides/installation/) 문서와

content/docs/codebase-overview.md

@@ -35,33 +35,11 @@ React 앱을 개발하는데 있어서 아래 관례들의 사용을 반드시 
 
 ### 경고와 불변식 {#warnings-and-invariants}
 
-React 코드베이스는 경고를 표시하기 위해 다음과 같이 `warning` 모듈을 사용합니다.
+React 코드베이스에서는 `console.error`를 사용해 경고를 표시합니다.
 
 ```js
-var warning = require('warning');
-
-warning(
-  2 + 2 === 4,
-  'Math is not working today.'
-);
-```
-
-**경고는 `warning`의 대상 조건식이 `false`일 때 표시됩니다.**
-
-해당 옵션은 예외적인 경우보다 일반적인 상황을 반영해야 합니다.
-
-다음과 같은 코드를 통해 중복되는 경고로 콘솔이 불필요하게 복잡해지는 상황을 피할 수 있습니다.
-
-```js
-var warning = require('warning');
-
-var didWarnAboutMath = false;
-if (!didWarnAboutMath) {
-  warning(
-    2 + 2 === 4,
-    'Math is not working today.'
-  );
-  didWarnAboutMath = true;
+if (__DEV__) {
+  console.error('Something is wrong.');
 }
 ```
 
@@ -114,39 +92,6 @@ ReactRef.detachRefs = function(
 가능하면 새로 작성하는 코드에 Flow 검사 형식을 포함해 주길 바랍니다.
 `yarn flow` 명령어를 통해 Flow에 대한 형식 검사를 직접 수행해 볼 수 있습니다.
 
-### 동적 주입 {#dynamic-injection}
-
-React의 몇 가지 모듈은 동적 주입을 사용합니다. 동적 주입은 항상 명시적이지만 코드에 대한 이해를 방해하기도 합니다. 동적 주입을 사용하는 주된 이유는 React가 DOM을 대상으로만 지원했기 때문입니다. React 네이티브는 React 프로젝트에서 시작되었기 때문에 몇 가지 동작을 구현하기 위해 동적 주입을 필요로 했습니다.
-
-다음과 같은 동적 의존성을 가진 모듈을 확인할 수 있습니다.
-
-```js
-// Dynamically injected
-var textComponentClass = null;
-
-// Relies on dynamically injected value
-function createInstanceForText(text) {
-  return new textComponentClass(text);
-}
-
-var ReactHostComponent = {
-  createInstanceForText,
-
-  // Provides an opportunity for dynamic injection
-  injection: {
-    injectTextComponentClass: function(componentClass) {
-      textComponentClass = componentClass;
-    },
-  },
-};
-
-module.exports = ReactHostComponent;
-```
-
-`injection` 필드는 특별하게 관리되지 않습니다. 다만 관례적으로 해당 필드는 런타임 시에 (플랫폼 관련 요소와 같은) 몇 가지 종속성을 주입하고자 할 때 사용됩니다.
-
-React 코드베이스에는 다수의 동적 주입 부분이 존재합니다. React는 향후 동적 주입에 관련된 매커니즘을 제거하고, 빌드 시에 정적으로 병합하는 방식을 사용할 것입니다.
-
 ### 다양한 패키지 {#multiple-packages}
 
 React는 [monorepo](https://danluu.com/monorepo/)입니다. 해당 저장소는 여러 분리된 패키지를 포함하고 있으며, 각 변경점들은 함께 반영되고 모든 이슈는 한 곳에서 관리됩니다.
@@ -183,7 +128,7 @@ React는 원래 DOM을 대상으로 하여 개발됐지만, 이후 [React 네이
 
 ### 재조정자 {#reconcilers}
 
-React DOM과 React 네이티브 같은 매우 다른 경우를 포함하여, 렌더러들은 상당 부분 동작 방식을 서로 공유해야 합니다. 특히 [재조정](/docs/reconciliation.html) 알고리즘의 경우는 더욱 그렇습니다. 이를 통해 렌더링, 사용자 정의 컴포넌트, 상태, 생명주기 메소드, 레퍼런스가 플랫폼에 상관없이 일관적으로 작동해야 합니다.
+React DOM과 React 네이티브 같은 매우 다른 경우를 포함하여, 렌더러들은 상당 부분 동작 방식을 서로 공유해야 합니다. 특히 [재조정](/docs/reconciliation.html) 알고리즘의 경우는 더욱 그렇습니다. 이를 통해 렌더링, 사용자 정의 컴포넌트, 상태, 생명주기 메서드, 레퍼런스가 플랫폼에 상관없이 일관적으로 작동해야 합니다.
 
 이를 해결하기 위해 서로 다른 렌더러들은 몇 가지의 코드를 공유하며, 해당 부분을 '재조정자'라고 부릅니다. `setState()`와 같은 함수가 수정되어야 할 때, 재조정자는 트리에 있는 컴포넌트의 `render()` 함수를 호출한 후 마운트나 업데이트, 혹은 마운트해제를 실시합니다.
 
@@ -211,7 +156,7 @@ React 파이버 구조에 대해 [여기](https://github.com/acdlite/react-fiber
 
 ### 이벤트 시스템 {#event-system}
 
-React는 렌더러와 무관하며 React DOM 및 React Native와 함께 작동하는 합성 이벤트 시스템을 구현합니다. 해당 코드는 [`packages/legacy-events`](https://github.com/facebook/react/tree/master/packages/legacy-events)에서 확인할 수 있습니다.
+React는 네이티브 이벤트 위에 레이어를 구현하여 크로스 브라우저 차이를 제거했습니다. 해당 코드는 [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events)에서 확인할 수 있습니다.
 
 해당 코드에 대한 상세한 설명은 다음의 [영상](https://www.youtube.com/watch?v=dRo_egw7tBc) (66분)을 참고하세요.
 

content/docs/release-channels.md

@@ -88,7 +88,7 @@ You may find it valuable to run integration tests against Experimental. This is
 
 #### How Can I Learn More About Experimental Features? {#how-can-i-learn-more-about-experimental-features}
 
-Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Stable.
+Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Latest.
 
 If a feature is not documented, they may be accompanied by an [RFC](https://github.com/reactjs/rfcs).
 

src/components/LayoutHeader/DocSearch.js

@@ -44,7 +44,6 @@ class DocSearch extends Component<{}, State> {
           alignItems: 'center',
           paddingLeft: '0.25rem',
           paddingRight: '0.25rem',
-
           [media.lessThan('expandedSearch')]: {
             justifyContent: 'flex-end',
             marginRight: 10,
@@ -56,6 +55,7 @@ class DocSearch extends Component<{}, State> {
           // },
           [media.greaterThan('expandedSearch')]: {
             minWidth: 100,
+            width: 'calc(100% / 5)',
           },
         }}>
         <input