Merge pull request #270 from reactjs/sync-4fc709d0

Sync with reactjs.org @ 4fc709d

Author: taehwanno

Diff for: content/blog/2017-09-08-dom-attributes-in-react-16.md

@@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
 React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
 
 ```js
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 ```
 
 This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
 
 ```js
 // Yes, please
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 
 // Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
-<div tabindex="-1" />
+<div tabindex={-1} />
 ```
 
 In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@@ -120,7 +120,7 @@ Below is a detailed list of them.
 * **Known attributes with a different canonical React name:**  
 
     ```js
-    <div tabindex="-1" />
+    <div tabindex={-1} />
     <div class="hi" />
     ```
 

Diff for: content/blog/2020-09-22-introducing-the-new-jsx-transform.md

@@ -192,7 +192,7 @@ If you are using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugi
 
 ### TypeScript {#typescript}
 
-TypeScript supports the new JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
+TypeScript supports the new JSX transform in [v4.1](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories) and up.
 
 ### Flow {#flow}
 

Diff for: content/community/conferences.md

@@ -8,6 +8,9 @@ permalink: community/meetups.html
 
 Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical)
 
+## Albania {#albania}
+* [Tirana](https://www.meetup.com/React-User-Group-Albania/)
+
 ## Argentina {#argentina}
 * [Rosario](https://www.meetup.com/es/reactrosario)
 
@@ -40,9 +43,11 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Bolivia](https://www.meetup.com/ReactBolivia/)
 
 ## Canada {#canada}
+* [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## China {#china}
 * [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
@@ -99,6 +104,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Israel {#israel}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
 
+## Italy {#italy}
+* [Milan](https://www.meetup.com/React-JS-Milano/)
+
 ## Malaysia {#malaysia}
 * [Kuala Lumpur](https://www.kl-react.com/)
 * [Penang](https://www.facebook.com/groups/reactpenang/)

Diff for: content/community/meetups.md

@@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
 See these articles for an introduction to React performance tooling:
 
  - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
- - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) 
+ - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
+ - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667) 
 
 ### Development vs. Production Builds {#development-vs-production-builds}
 

Diff for: content/docs/addons-perf.md

@@ -22,7 +22,7 @@ React는 [유의적 버전 (semver)](https://semver.org/) 원칙을 따릅니다
 
 ### 호환성이 유지되지 않는 변경 {#breaking-changes}
 
-호환성이 유지되지 않는 변경은 모든 사람에게 불편할 수 있습니다. 그래서 주 버전 배포는 최소화하도록 노력합니다. 예를 들어, React 15는 2016년 4월에 배포되었고 React 16은 2017년 9월에 배포되었습니다. 그리고 React 17은 2020년에 가능할 수도 있습니다.
+호환성이 유지되지 않는 변경은 모든 사람에게 불편할 수 있습니다. 그래서 주 버전 배포는 최소화하도록 노력합니다. 예를 들어, React 15는 2016년 4월에 배포되었고 React 16은 2017년 9월에 배포되었습니다. 그리고 React 17은 2020년 10월에 배포되었습니다.
 
 대신 부 버전을 변경시킨 배포로 새 기능을 배포합니다. 부 버전 배포는 겸손한 이름에도 불구하고, 주 버전 배포보다 가끔 더 흥미롭고 주목할 만합니다.
 

Diff for: content/docs/faq-versioning.md

@@ -320,7 +320,7 @@ Higher-order components come with a few caveats that aren't immediately obvious
 
 ### Don't Use HOCs Inside the render Method {#dont-use-hocs-inside-the-render-method}
 
-React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
+React's diffing algorithm (called [Reconciliation](/docs/reconciliation.html)) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
 
 Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply a HOC to a component within the render method of a component:
 

Diff for: content/docs/higher-order-components.md

@@ -12,7 +12,7 @@ permalink: docs/legacy-event-pooling.html
 >
 >[Read more](/blog/2020/08/10/react-v17-rc.html#no-event-pooling) about this change in React 17.
 
-The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event event handler has been called. For example, this won't work:
+The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event handler has been called. For example, this won't work:
 
 ```javascript
 function handleChange(e) {

Diff for: content/docs/legacy-event-pooling.md

@@ -134,7 +134,7 @@ React 16부터는 모든 표준 [또는 사용자 정의](/blog/2017/09/08/dom-a
 React는 항상 JavaScript 중심 API를 DOM에 제공했습니다. React 컴포넌트는 사용자 지정 및 DOM 관련 props 둘 다 받아들이기 때문에, React는 DOM API처럼 camelCase를 사용합니다.
 
 ```js
-<div tabIndex="-1" />      // Just like node.tabIndex DOM API
+<div tabIndex={-1} />      // Just like node.tabIndex DOM API
 <div className="Button" /> // Just like node.className DOM API
 <input readOnly={true} />  // Just like node.readOnly DOM API
 ```

Diff for: content/docs/reference-dom-elements.md

@@ -6,7 +6,7 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-React 16 버전은 컬렉션 자료형인 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)과 [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)을 사용합니다. 이 기능을 자체적으로 지원하지 않거나(예. IE 11 미만) 지원은 하지만 잘 호환되지 않는(예. IE 11) 오래된 브라우저나 기기에서도 React를 사용해야 한다면 애플리케이션에 [core-js](https://github.com/zloirock/core-js)나 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 같은 전역 폴리필(polyfill)을 포함하는 것도 고려해보세요.
+React 16 버전은 컬렉션 자료형인 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)과 [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)을 사용합니다. 이 기능을 자체적으로 지원하지 않거나(예. IE 11 미만) 지원은 하지만 잘 호환되지 않는(예. IE 11) 오래된 브라우저나 기기에서도 React를 사용해야 한다면 애플리케이션에 [core-js](https://github.com/zloirock/core-js) 같은 전역 폴리필(polyfill)을 포함하는 것도 고려해보세요.
 
 다음은 오래된 브라우저 지원을 위해 core-js 폴리필을 적용한 환경에서 React 16 버전을 사용하는 예시입니다.
 

Diff for: content/docs/reference-javascript-environment-requirements.md

@@ -117,6 +117,10 @@ Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능합니
 
 컴포넌트의 constructor와 같은 메서드를 의도적으로 두 번 호출하면 strict mode가 이와 같은 패턴을 쉽게 찾을 수 있도록 합니다.
 
+> 주의
+>
+> React 17부터 React는 자동으로 `console.log()` 같은 콘솔 메서드를 수정해서 생명주기 함수의 두 번째 호출에서 로그를 찍지 않습니다. 그러나, [회피책을 사용할 수 있다면](https://github.com/facebook/react/issues/20090#issuecomment-715927125) 의도하지 않은 동작이 발생할 수 있습니다.
+
 ### 레거시 context API 검사 {#detecting-legacy-context-api}
 
 레거시 context API는 오류가 발생하기 쉬워 이후 릴리즈에서 삭제될 예정입니다. 모든 16.x 버전에서 여전히 돌아가지만, Strict 모드에서는 아래와 같은 경고 메시지를 노출합니다.

Diff for: content/docs/strict-mode.md

@@ -63,7 +63,7 @@ MyComponent.propTypes = {
   optionalElementType: PropTypes.elementType,
 
   // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
-  // 이 경우 JS's instanceof 연산자를 사용합니다.
+  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
   optionalMessage: PropTypes.instanceOf(Message),
 
   // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
@@ -98,7 +98,7 @@ MyComponent.propTypes = {
   // 경고가 보이도록 할 수 있습니다.
   requiredFunc: PropTypes.func.isRequired,
 
-  // 모든 데이터 타입이 가능한 값
+  // 모든 데이터 타입이 가능한 필수값
   requiredAny: PropTypes.any.isRequired,
 
   // 사용자 정의 유효성 검사기를 지정할 수도 있습니다.
@@ -195,3 +195,47 @@ class Greeting extends React.Component {
 ```
 
 `defaultProps`는 `this.props.name`의 값이 부모 컴포넌트에 의해 명시되지 않았을 때 값을 갖도록 할 것입니다. `propTypes`의 타입 확인은 `defaultProps`에도 적용되게 하기 위하여 `defaultProps`가 처리된 뒤에 일어날 것입니다.
+
+### Function Components
+
+함수 컴포넌트를 사용해서 개발한다면, PropTypes를 적절히 적용할 수 있도록 몇 가지 작은 변경사항을 만들어낼 수도 있습니다.
+
+아래와 같은 컴포넌트가 있다고 생각해봅시다.
+
+```javascript
+export default function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+```
+
+PropTypes를 추가하려면 아래처럼 컴포넌트를 외부에 노출시키기 전에 별도의 함수로 컴포넌트를 선언할 수 있습니다.
+
+```javascript
+function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+
+export default HelloWorldComponent
+```
+
+그러면, `HelloWorldComponent`에 직접 PropTypes를 추가할 수 있습니다.
+
+```javascript
+import PropTypes from 'prop-types'
+
+function HelloWorldComponent({ name }) {
+  return (
+    <div>Hello, {name}</div>
+  )
+}
+
+HelloWorldComponent.propTypes = {
+  name: PropTypes.string
+}
+
+export default HelloWorldComponent
+```

Diff for: content/docs/typechecking-with-proptypes.md

@@ -45,7 +45,7 @@ class NameForm extends React.Component {
 
 ### 기본 값 {#default-values}
 
-React 렌더링 생명주기에서 폼 엘리먼트의 `value` 어트리뷰트는 DOM의 value를 대체합니다. 비제어 컴포넌트를 사용하면 React 초깃값을 지정하지만, 그 이후의 업데이트는 제어하지 않는 것이 좋습니다. 이러한 경우에 `value` 어트리뷰트 대신 `defaultValue`를 지정할 수 있습니다.
+React 렌더링 생명주기에서 폼 엘리먼트의 `value` 어트리뷰트는 DOM의 value를 대체합니다. 비제어 컴포넌트를 사용하면 React 초깃값을 지정하지만, 그 이후의 업데이트는 제어하지 않는 것이 좋습니다. 이러한 경우에 `value` 어트리뷰트 대신 `defaultValue`를 지정할 수 있습니다. 컴포넌트가 마운트된 후에 `defaultValue` 어트리뷰트를 변경해도 DOM의 값이 업데이트되지 않습니다.
 
 ```javascript{7}
 render() {

Diff for: content/docs/uncontrolled-components.md

@@ -65,8 +65,8 @@ export default class HTML extends React.Component<Props> {
                     storageId: 'reactjs_banner_2020survey',
                     normalHeight: 50,
                     smallHeight: 75,
-                    campaignStartDate: '2020-10-05Z', // the Z is for UTC
-                    campaignEndDate: '2020-10-19Z', // the Z is for UTC
+                    campaignStartDate: '2020-10-05T00:00:00Z', // the Z is for UTC
+                    campaignEndDate: '2020-10-19T00:00:00Z', // the Z is for UTC
                     snoozeForDays: 7,
                   };