Merge branch 'master' into forwarding-refs

Author: hg-pyun

content/community/conferences.md

@@ -30,7 +30,7 @@ September 13-15, 2021. Atlanta, GA, USA
 ### React India 2021 {#react-india-2021}
 November 12-13, 2021 in Mumbai, India
 
-[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)	[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)
 
 ## Past Conferences {#past-conferences}
 
@@ -47,7 +47,7 @@ October 15-16, 2020, 7am PST / 10am EST / 4pm CEST - remote event
 ### React Native EU 2020 {#react-native-eu-2020}
 September 3-4, 2020 - remote event
 
-[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/
+[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/)
 
 ### ReactEurope 2020 {#reacteurope-2020}
 May 14-15, 2020 in Paris, France
@@ -436,9 +436,9 @@ October 26-28 in Bratislava, Slovakia
 [Website](https://reactiveconf.com/)
 
 ### ReactNL 2016 {#reactnl-2016}
-October 13 in Amsterdam, The Netherlands - [Schedule](http://reactnl.org/#program)
+October 13 in Amsterdam, The Netherlands
 
-[Website](http://reactnl.org/)
+[Website](http://reactnl.org/) - [Schedule](http://reactnl.org/#program)
 
 ### ReactNext 2016 {#reactnext-2016}
 September 15 in Tel Aviv, Israel
@@ -479,5 +479,3 @@ July 2 & 3 in Paris, France
 January 28 & 29 in Facebook HQ, CA
 
 [Website](http://conf2015.reactjs.org/) - [Schedule](http://conf2015.reactjs.org/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
-
-<iframe title="React.js Conf 2015 Keynote" width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>

content/community/courses.md

@@ -16,7 +16,7 @@ permalink: community/courses.html
 
 - [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
 
-- [React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself) - With React Armory, you can learn React without the buzzwords.
+- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords.
 
 - [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) - Free course for React newbies and those looking to get a better understanding of React fundamentals.
 

content/community/meetups.md

@@ -12,6 +12,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Tirana](https://www.meetup.com/React-User-Group-Albania/)
 
 ## Argentina {#argentina}
+* [Buenos Aires](https://www.meetup.com/es/React-en-Buenos-Aires)
 * [Rosario](https://www.meetup.com/es/reactrosario)
 
 ## Australia {#australia}

content/docs/forms.md

@@ -31,7 +31,7 @@ HTML에서 `<input>`, `<textarea>`, `<select>`와 같은 폼 엘리먼트는 일
 
 예를 들어, 이전 예시가 전송될 때 이름을 기록하길 원한다면 폼을 제어 컴포넌트 (controlled component)로 작성할 수 있습니다.
 
-```javascript{4,10-12,24}
+```javascript{4,10-12,21,24}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);

content/docs/higher-order-components.md

@@ -1,22 +1,22 @@
 ---
 id: higher-order-components
-title: Higher-Order Components
+title: 고차 컴포넌트
 permalink: docs/higher-order-components.html
 ---
 
-A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature.
+고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다.
 
-Concretely, **a higher-order component is a function that takes a component and returns a new component.**
+구체적으로, **고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.**
 
 ```js
 const EnhancedComponent = higherOrderComponent(WrappedComponent);
 ```
 
-Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
+컴포넌트는 props를 UI로 변환하는 반면에, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+고차 컴포넌트(HOC)는 Redux의 [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect)와 Relay의 [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html)와 같은 서드 파티 리액트 라이브러리에서 흔하게 볼 수 있습니다.
 
-In this document, we'll discuss why higher-order components are useful, and how to write your own.
+이 문서에서는 고차 컴포넌트가 유용한 이유를 보여주고, 직접 작성하는 방법에 대해 알아보겠습니다.
 
 ## Use HOCs For Cross-Cutting Concerns {#use-hocs-for-cross-cutting-concerns}
 

content/docs/how-to-contribute.md

@@ -70,7 +70,7 @@ Public API를 변경하거나 구현을 간단하게 변경하려 할 때 [이
 
 풀 리퀘스트를 처음 해보시나요? 무료 영상 시리즈를 통해 다음과 같이 기여하는 방법을 배울 수도 있습니다.
 
-**[GitHub에서 오픈 소스 프로젝트에 기여하는 방법](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)**
+**[GitHub에서 오픈 소스 프로젝트에 기여하는 방법](https://app.egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)**
 
 처음 발을 디딜 때 기여 과정에 익숙해질 수 있도록 비교적 영향력이 적은 버그를 포함하는 **[good first issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"good+first+issue")** 목록은 기여 입문에 최적입니다.
 
@@ -88,7 +88,7 @@ Public API를 변경하거나 구현을 간단하게 변경하려 할 때 [이
 2. 저장소 루트에서 `yarn` 명령을 실행합니다.
 3. 버그를 수정했거나 테스트가 필요한 코드를 추가했다면 테스트를 추가해 주세요.
 4. 테스트가 통과하는지 확인해 주세요(`yarn test`). Tip : `yarn test --watch TestName` 명령은 개발할 때 도움이 됩니다.
-5. `yarn test-prod` 명령을 실제 환경에서 테스트하기 위해 실행합니다. 이는 `yarn test`와 동일한 옵션을 지원합니다.
+5. `yarn test --prod` 명령을 실제 환경에서 테스트하기 위해 실행합니다.
 6. 디버거가 필요한 경우 `yarn debug-test --watch TestName` 을 실행하고 `chrome://inspect`을 열어 "Inspect"를 누르세요.
 7. [prettier](https://github.com/prettier/prettier)로 코드를 포맷하세요. (`yarn prettier`).
 8. 코드를 린트하세요 (`yarn lint`). Tip: `yarn linc` 는 변경된 파일만 확인할 수 있습니다.
@@ -117,7 +117,7 @@ React 저장소를 복사한 후 yarn 명령을 사용하면 다음과 같은 
 * `yarn test` 는 모든 테스트를 실행합니다.
 * `yarn test --watch` 대화형 테스트 watcher를 실행합니다.
 * `yarn test <pattern>` 은 일치하는 파일 이름으로 테스트를 실행합니다.
-* `yarn test-prod` 는 실제 환경에서 테스트를 실행합니다. `yarn test`와 같은 옵션을 지원합니다.
+* `yarn test --prod` 는 실제 환경에서 테스트를 실행합니다.
 * `yarn debug-test` 는 `yarn test`와 비슷하지만, 디버거를 활용합니다. `chrome://inspect`를 열고 "Inspect"를 누르세요.
 * `yarn flow` 는 [Flow](https://flowtype.org/) 타입검사를 실행합니다.
 * `yarn build` 는 모든 패키지와 함께 `build` 폴더를 만듭니다.
@@ -135,7 +135,7 @@ npm을 통해 React를 사용하고 있다면, 의존성에서 `react`와 `react
 
 ```sh
 cd ~/path_to_your_react_clone/
-yarn build react/index,react-dom/index,scheduler --type=NODE
+yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
 
 cd build/node_modules/react
 yarn link

content/docs/reconciliation.md

@@ -27,7 +27,7 @@ React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리
 
 두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축합니다. `<a>`에서 `<img>`로, `<Article>`에서 `<Comment>`로, 혹은 `<Button>`에서 `<div>`로 바뀌는 것 모두 트리 전체를 재구축하는 경우입니다.
 
-트리를 버릴 때 이전 DOM 노드들은 모두 파괴됩니다. 컴포넌트 인스턴스는 `componentWillUnmount()`가 실행됩니다. 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입됩니다. 그에 따라 컴포넌트 인스턴스는 `componentWillMount()`가 실행되고 `componentDidMount()`가 이어서 실행됩니다. 이전 트리와 연관된 모든 state는 사라집니다.
+트리를 버릴 때 이전 DOM 노드들은 모두 파괴됩니다. 컴포넌트 인스턴스는 `componentWillUnmount()`가 실행됩니다. 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입됩니다. 그에 따라 컴포넌트 인스턴스는 `UNSAFE_componentWillMount()`가 실행되고 `componentDidMount()`가 이어서 실행됩니다. 이전 트리와 연관된 모든 state는 사라집니다.
 
 루트 엘리먼트 아래의 모든 컴포넌트도 언마운트되고 그 state도 사라집니다. 예를 들어, 아래와 같은 비교가 일어나면,
 
@@ -43,6 +43,12 @@ React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리
 
 이전 `Counter`는 사라지고, 새로 다시 마운트가 될 것입니다.
 
+>주의
+>
+>아래 메서드들은 레거시이며 새로 작성하는 코드에서는 [피해야 합니다.](/blog/2018/03/27/update-on-async-rendering.html)
+>
+>- `UNSAFE_componentWillMount()`
+
 ### DOM 엘리먼트의 타입이 같은 경우 {#dom-elements-of-the-same-type}
 
 같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다. 예를 들어,
@@ -69,9 +75,16 @@ DOM 노드의 처리가 끝나면, React는 이어서 해당 노드의 자식들
 
 ### 같은 타입의 컴포넌트 엘리먼트 {#component-elements-of-the-same-type}
 
-컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지됩니다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신합니다. 이때 해당 인스턴스의 `componentWillReceiveProps()`와 `componentWillUpdate()`를 호출합니다.
+컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지됩니다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신합니다. 이때 해당 인스턴스의 `UNSAFE_componentWillReceiveProps()`, `UNSAFE_componentWillUpdate()`, `componentDidUpdate`를 호출합니다.
+
+다음으로 `render()` 메서드가 호출되고 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리합니다.
 
-다음으로 `render()` 메소드가 호출되고 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리합니다.
+>주의
+>
+>아래 메서드들은 레거시이며 새로 작성하는 코드에서는 [피해야 합니다.](/blog/2018/03/27/update-on-async-rendering.html)
+>
+>- `UNSAFE_componentWillUpdate()`
+>- `UNSAFE_componentWillReceiveProps()`
 
 ## 자식에 대한 재귀적 처리 {#recursing-on-children}
 

content/docs/reference-react-component.md

@@ -406,9 +406,15 @@ class ErrorBoundary extends React.Component {
 }
 ```
 
+ 리액트의 `componentDidCatch()`가 오류를 처리하는 방식은 프로덕션과 개발 빌드가 약간 다릅니다.
+
+개발 빌드에서, 오류는 `window`까지 전파됩니다. 이는 `window.onerror`나 `window.addEventListener('error', callback)`가 `componentDidCatch()`에서 잡은 오류를 인터셉트하는 것을 의미합니다.
+
+그러나 프로덕션 빌드에서 오류는 전파되지 않습니다. 즉 상위 오류 핸들러는 `componentDidCatch()`에 의해 명시적으로 잡히지 않은 오류만 받습니다.
+
 > 주의
 >
-> 오류 이벤트 내에서는 `setState()`의 호출을 통하여 `componentDidCatch()`로 구현된 대체 UI를 렌더링할 수 있습니다. 하지만 이런 방식은 나중 릴리즈에서는 사용할 수 없게 을 것입니다.
+> 오류 이벤트 내에서는 `setState()`의 호출을 통하여 `componentDidCatch()`로 구현된 대체 UI를 렌더링할 수 있습니다. 하지만 이런 방식은 이후의 릴리즈에서는 사용할 수 없게 될 것입니다.
 > 대체 UI 렌더링 제어를 하려면 `static getDerivedStateFromError()`를 대신 사용하세요.
 
 * * *

package.json

@@ -13,9 +13,9 @@
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-flowtype": "^2.39.1",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^2.3.1",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-relay": "^0.0.19",
     "flow-bin": "^0.56.0",
     "gatsby": "^2.24.63",

vercel.json

@@ -38,6 +38,7 @@
     { "source": "/link/test-utils-mock-component", "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9", "permanent": false },
     { "source": "/link/uselayouteffect-ssr", "destination": "https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85", "permanent": false },
     { "source": "/link/react-devtools-faq", "destination": "https://github.com/facebook/react/tree/master/packages/react-devtools#faq", "permanent": false },
-    { "source": "/link/setstate-in-render", "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", "permanent": false }
+    { "source": "/link/setstate-in-render", "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", "permanent": false },
+    { "source": "/version/15.6", "destination": "https://react-legacy.netlify.app", "permanent": false }
   ]
 }