Merge remote-tracking branch 'origin/components-and-props' into components-and-props

Author: SoHye Choi

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,3 +11,11 @@ https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
 If your PR references an existing issue, please add the issue number below
 
 -->
+
+## Progress
+
+- [ ] 번역 초안 작성(Draft translation)
+- [ ] [공통 스타일 가이드 확인 (Check the common style guide)](link)
+- [ ] [용어 확인 (Check the term)](link)
+- [ ] [맞춤법 검사 (Spelling check)](http://speller.cs.pusan.ac.kr/)
+- [ ] 리뷰 반영 (Resolve reviews)

README.md

@@ -57,9 +57,10 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please join the Crowdin.
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
 
-* [Crowdin - React](https://crowdin.com/project/react)
+
+If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
 
 ## Troubleshooting
 

content/blog/2018-06-07-you-probably-dont-need-derived-state.md

@@ -213,7 +213,7 @@ To recap, when designing a component, it is important to decide whether its data
 Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable.
 
 For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options:
-* **Recomendation: To reset _all internal state_, use the `key` attribute.**
+* **Recommendation: To reset _all internal state_, use the `key` attribute.**
 * Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`).
 * Alternative 2: You can also consider fall back to an imperative instance method using refs.
 

content/docs/codebase-overview.md

@@ -211,7 +211,7 @@ Its main goals are:
 * Ability to return multiple elements from `render()`.
 * Better support for error boundaries.
 
-You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
+You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.
 
 Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
 

content/docs/components-and-props.md

@@ -93,6 +93,7 @@ ReactDOM.render(
 >
 >이 규칙에 대한 자세한 내용은 [여기](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)에서 확인할 수 있습니다.
 
+
 ## 컴포넌트 구성 {#composing-components}
 
 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미합니다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현됩니다.

content/docs/higher-order-components.md

@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`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.
 
@@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';
 
 While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
 
-The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
+The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).

content/docs/hooks-faq.md

@@ -356,13 +356,13 @@ function Counter() {
   const calculation = count * 100;
   const prevCalculation = usePrevious(calculation);
   // ...
-  ```
+```
 
 It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
 
 See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
 
-### How do I implement `getDerivedStateFromProps`?
+### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
 While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
 
@@ -385,7 +385,7 @@ function ScrollView({row}) {
 
 This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
 
-### Is there something like forceUpdate?
+### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
 
 Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
 
@@ -401,22 +401,22 @@ Normally, you shouldn't mutate local state in React. However, as an escape hatch
 
 Try to avoid this pattern if possible.
 
-### Can I make a ref to a function component?
+### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
 
 While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
 
-### What does `const [thing, setThing] = useState()` mean?
+### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
 
 If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
 
 
-## Performance Optimizations
+## Performance Optimizations {#performance-optimizations}
 
-### Can I skip an effect on updates?
+### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
 
 Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
 
-### How do I implement `shouldComponentUpdate`?
+### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
 You can wrap a function component with `React.memo` to shallowly compare its props:
 
@@ -431,7 +431,7 @@ It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equiva
 `React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
 
-### How to memoize calculations?
+### How to memoize calculations? {#how-to-memoize-calculations}
 
 The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
 
@@ -464,7 +464,7 @@ function Parent({ a, b }) {
 
 Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
 
-### How to create expensive objects lazily?
+### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
 
 `useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes need to be sure an object is only created once.
 
@@ -525,7 +525,7 @@ function Image(props) {
 This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
 
 
-### Are Hooks slow because of creating functions in render?
+### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
 
 No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
 
@@ -550,7 +550,7 @@ Traditionally, performance concerns around inline functions in React have been r
 
 * Finally, the `useReducer` Hook reduces the need to pass callbacks deeply, as explained below.
 
-### How to avoid passing callbacks down?
+### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
 
 We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
 
@@ -592,7 +592,7 @@ This is both more convenient from the maintenance perspective (no need to keep f
 
 Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
 
-### How to read an often-changing value from `useCallback`?
+### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
 >Note
 >
@@ -662,15 +662,15 @@ function useEventCallback(fn, dependencies) {
 In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
 
 
-## Under the Hood
+## Under the Hood {#under-the-hood}
 
-### How does React associate Hook calls with components?
+### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
 
 React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
 
 There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
 
-### What is the prior art for Hooks?
+### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
 
 Hooks synthesize ideas from several different sources:
 

content/docs/hooks-overview.md

@@ -16,7 +16,7 @@ Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). Th
 
 **↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
 
-## 📌 State Hook {#-state-hook}
+## 📌 State Hook {#state-hook}
 
 This example renders a counter. When you click the button, it increments the value:
 
@@ -68,7 +68,7 @@ React provides a few built-in Hooks like `useState`. You can also create your ow
 >
 >You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
 
-## ⚡️ Effect Hook {#️-effect-hook}
+## ⚡️ Effect Hook {#effect-hook}
 
 You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering.
 
@@ -159,7 +159,7 @@ Hooks let you organize side effects in a component by what pieces are related (s
 >
 >You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
 
-## ✌️ Rules of Hooks {#️-rules-of-hooks}
+## ✌️ Rules of Hooks {#rules-of-hooks}
 
 Hooks are JavaScript functions, but they impose two additional rules:
 
@@ -172,7 +172,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h
 >
 >You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
 
-## 💡 Building Your Own Hooks {#-building-your-own-hooks}
+## 💡 Building Your Own Hooks {#building-your-own-hooks}
 
 Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
 
@@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
 >
 >You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
 
-## 🔌 Other Hooks {#-other-hooks}
+## 🔌 Other Hooks {#other-hooks}
 
 There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting:
 

content/docs/hooks-reference.md

@@ -199,7 +199,7 @@ function reducer(state, action) {
   }
 }
 
-function Counter({initialCount}) {
+function Counter({initialState}) {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <>
@@ -232,7 +232,7 @@ You can also create the initial state lazily. To do this, you can pass an `init`
 
 It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:
 
-```js{1-3,11-12,21,26}
+```js{1-3,11-12,19,24}
 function init(initialCount) {
   return {count: initialCount};
 }
@@ -246,9 +246,7 @@ function reducer(state, action) {
     case 'reset':
       return init(action.payload);
     default:
-      // A reducer must always return a valid state.
-      // Alternatively you can throw an error if an invalid action is dispatched.
-      return state;
+      throw new Error();
   }
 }
 

content/docs/lists-and-keys.md

@@ -50,7 +50,7 @@ This code displays a bullet list of numbers between 1 and 5.
 
 Usually you would render lists inside a [component](/docs/components-and-props.html).
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
+We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: 외부 플러그인을 사용하는 컴포넌트
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React는 유연하며 다른 라이브러리나 프레임워크를 함께 활용할 수 있습니다. 이 예제에서는 외부 마크다운 라이브러리인 **remarkable**을 사용해 `<textarea>`의 값을 실시간으로 변환합니다.

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: 간단한 컴포넌트
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+React 컴포넌트는 `render()`라는 메서드를 구현하는데, 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 합니다. 이 예제에서는 XML과 유사한 문법인 JSX를 사용합니다. 컴포넌트로 전달된 데이터는 `render()` 안에서 `this.props`를 통해 접근할 수 있습니다.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**React를 사용하기 위해서 JSX가 꼭 필요한 것은 아닙니다.** JSX를 컴파일한 JavaScript 코드를 확인하려면 [Babel REPL](babel://es5-syntax-example)을 이용해보세요.

content/home/examples/a-stateful-component.md

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: 상태를 가지는 컴포넌트
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+컴포넌트는 `this.props`를 이용해 입력 데이터를 다루는 것 외에도 내부적인 상태 데이터를 가질 수 있습니다. 이는 `this.state`로 접근할 수 있습니다. 컴포넌트의 상태 데이터가 바뀌면 `render()`가 다시 호출되어 마크업이 갱신됩니다.

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: 애플리케이션
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+`props`와 `state`를 사용해서 간단한 Todo 애플리케이션을 만들 수 있습니다. 이 예제에서는 `state`를 사용해 사용자가 입력한 텍스트와 할 일 목록을 관리합니다. 이벤트 핸들러들이 인라인으로 각각 존재하는 것처럼 보이지만, 실제로는 이벤트 위임을 통해 하나로 구현됩니다.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: 컴포넌트 기반
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.