Resolve merge conflict

simsim0709 · simsim0709 · commit 8d6a947c2a94 · 2020-07-28T16:03:37.000+09:00
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
@@ -40,12 +40,7 @@ console.log(add(16, 26)); // 42
 >
 > 실제 번들은 위 예시와는 많이 다르게 보일 겁니다.
 
-<<<<<<< HEAD
-[Create React App](https://github.com/facebookincubator/create-react-app)이나 [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
-=======
-If you're using [Create React App](https://create-react-app.dev/), [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your
-app.
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
+[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/) 문서와
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
@@ -35,41 +35,11 @@ React 앱을 개발하는데 있어서 아래 관례들의 사용을 반드시 
 
 ### 경고와 불변식 {#warnings-and-invariants}
 
-<<<<<<< HEAD
-React 코드베이스는 경고를 표시하기 위해 다음과 같이 `warning` 모듈을 사용합니다.
-
-```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;
-=======
-The React codebase uses `console.error` to display warnings:
+React 코드베이스에서는 `console.error`를 사용해 경고를 표시합니다.
 
 ```js
 if (__DEV__) {
   console.error('Something is wrong.');
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 }
 ```
 
@@ -122,44 +92,7 @@ ReactRef.detachRefs = function(
 가능하면 새로 작성하는 코드에 Flow 검사 형식을 포함해 주길 바랍니다.
 `yarn flow` 명령어를 통해 Flow에 대한 형식 검사를 직접 수행해 볼 수 있습니다.
 
-<<<<<<< HEAD
-### 동적 주입 {#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}
-=======
-### Multiple Packages {#multiple-packages}
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 
 React는 [monorepo](https://danluu.com/monorepo/)입니다. 해당 저장소는 여러 분리된 패키지를 포함하고 있으며, 각 변경점들은 함께 반영되고 모든 이슈는 한 곳에서 관리됩니다.
 
@@ -195,7 +128,7 @@ React는 원래 DOM을 대상으로 하여 개발됐지만, 이후 [React 네이
 
 ### 재조정자 {#reconcilers}
 
-React DOM과 React 네이티브 같은 매우 다른 경우를 포함하여, 렌더러들은 상당 부분 동작 방식을 서로 공유해야 합니다. 특히 [재조정](/docs/reconciliation.html) 알고리즘의 경우는 더욱 그렇습니다. 이를 통해 렌더링, 사용자 정의 컴포넌트, 상태, 생명주기 메소드, 레퍼런스가 플랫폼에 상관없이 일관적으로 작동해야 합니다.
+React DOM과 React 네이티브 같은 매우 다른 경우를 포함하여, 렌더러들은 상당 부분 동작 방식을 서로 공유해야 합니다. 특히 [재조정](/docs/reconciliation.html) 알고리즘의 경우는 더욱 그렇습니다. 이를 통해 렌더링, 사용자 정의 컴포넌트, 상태, 생명주기 메서드, 레퍼런스가 플랫폼에 상관없이 일관적으로 작동해야 합니다.
 
 이를 해결하기 위해 서로 다른 렌더러들은 몇 가지의 코드를 공유하며, 해당 부분을 '재조정자'라고 부릅니다. `setState()`와 같은 함수가 수정되어야 할 때, 재조정자는 트리에 있는 컴포넌트의 `render()` 함수를 호출한 후 마운트나 업데이트, 혹은 마운트해제를 실시합니다.
 
@@ -223,13 +156,9 @@ React 파이버 구조에 대해 [여기](https://github.com/acdlite/react-fiber
 
 ### 이벤트 시스템 {#event-system}
 
-<<<<<<< HEAD
-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분)을 참고하세요.
-=======
-React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events).
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 
 ### 다음 내용은? {#what-next}
 
diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
@@ -122,11 +122,7 @@ ReactDOM.render(
 
 ### 논리 && 연산자로 If를 인라인으로 표현하기{#inline-if-with-logical--operator}
 
-<<<<<<< HEAD
 JSX 안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 `&&`를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다.
-=======
-You may [embed expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 
 ```js{6-10}
 function Mailbox(props) {
diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
@@ -228,11 +228,7 @@ function FriendListItem(props) {
 }
 ```
 
-<<<<<<< HEAD
 각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *상태 관련 로직*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
-=======
-The state of each component is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component.
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 
 Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
 
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
@@ -564,11 +564,7 @@ var newPlayer = Object.assign({}, player, {score: 2});
 
 #### React에서 다시 렌더링하는 시기를 결정함 {#determining-when-to-re-render-in-react}
 
-<<<<<<< HEAD
 불변성의 가장 큰 장점은 React에서 _순수 컴포넌트_를 만드는 데 도움을 준다는 것입니다. 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있으며 이를 바탕으로 컴포넌트가 다시 렌더링할지를 결정할 수 있습니다.
-=======
-The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made, which helps to determine when a component requires re-rendering.
->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1
 
 `shouldComponentUpdate()`와 *순수 컴포넌트*를 작성하는 법에 대해 더 알아보고 싶다면 [성능 최적화하기](/docs/optimizing-performance.html#examples)를 보세요.
 

Original file line number	Diff line number	Diff line change
`@@ -228,11 +228,7 @@ function FriendListItem(props) {`
`228`	`228`	`}`
`229`	`229`	```
`230`	`230`
`231`		`-<<<<<<< HEAD`
`232`	`231`	`각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법입니다. 실제로 각각의 Hook 호출은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.`
`233`		`-=======`
`234`		`-The state of each component is completely independent. Hooks are a way to reuse stateful logic, not state itself. In fact, each call to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component.`
`235`		`->>>>>>> 63332462bb5afa18ac7a716975b679f4c23cc8a1`
`236`	`232`
`237`	`233`	Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
`238`	`234`