From 887fb7f036668fcb421bdae5e5d722665b29b5e5 Mon Sep 17 00:00:00 2001
From: jeonjihun <nin1212@hufs.ac.kr>
Date: Sun, 31 Mar 2019 20:04:23 +0900
Subject: [PATCH 1/4] Add list and keys

---
 content/docs/lists-and-keys.md | 54 ++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index f34e9e5d6..e615bebb7 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,15 +1,16 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: 리스트와 Key
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
 First, let's review how you transform lists in JavaScript.
+먼저, 자바스크립트에서 리스트를 어떻게 변환하는지 살펴봅시다.
 
 Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
-
+아래 코드에서 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)함수를 이용하여 `numbers` 배열의 값을 두배로 만든 후 `map()`에서 반환하는 새 배열을 `doubled` 변수에 할당하고 로그를 확인 합니다.
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
 const doubled = numbers.map((number) => number * 2);
@@ -17,14 +18,18 @@ console.log(doubled);
 ```
 
 This code logs `[2, 4, 6, 8, 10]` to the console.
-
+이 코드는 콘솔에 `[2, 4, 6, 8, 10]`을 표시합니다.
 In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+React에서 배열을 [엘리먼트](/docs/rendering-elements.html) 리스트로 만드는 방식은 이와 거의 동일 합니다.
 
 ### Rendering Multiple Components {#rendering-multiple-components}
-
+### 여러개의 컴포넌트 렌더링 하기 {#rendering-multiple-components}
 You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+엘리먼트 모음을 만들고 중괄호 `{}`를 이용하여 [JSX에 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx)시킬 수 있습니다.
+
 
 Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+아래에서 Javascript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행 합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고, 엘리먼트 배열의 결과를 `listItems`에 지정 합니다.
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -34,6 +39,7 @@ const listItems = numbers.map((number) =>
 ```
 
 We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+전체 `listItems` 배열을 `<ul>`엘리먼트 안에 포함시키고 [DOM에 렌더링합니다.](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
 
 ```javascript{2}
 ReactDOM.render(
@@ -43,14 +49,18 @@ ReactDOM.render(
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
 This code displays a bullet list of numbers between 1 and 5.
-
+이 코드는 1부터 5까지의 숫자로 이루어진 리스트를 보여줍니다.
 ### Basic List Component {#basic-list-component}
+### 기본 리스트 컴포넌트 {#basic-list-component}
 
 Usually you would render lists inside a [component](/docs/components-and-props.html).
+일반적으로 [컴포넌트](/docs/components-and-props.html) 안에서 리스트를 렌더링합니다.
 
 We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
+이전 예제를 `numbers` 배열을 받아서 순서 없는 엘리먼트 리스트로 출력하는 컴포넌트로 리팩토링할 수 있습니다.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -71,8 +81,9 @@ ReactDOM.render(
 ```
 
 When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
-
+이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. "key"는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성입니다. 다음 섹션에서 key의 중요성에 대해서 더 설명하겠습니다.
 Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+`numbers.map()` 안에서 리스트의 각 항목에 `key`를 할당하여 키 누락 문제를 해결하겠습니다.
 
 ```javascript{4}
 function NumberList(props) {
@@ -95,10 +106,13 @@ ReactDOM.render(
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
 ## Keys {#keys}
+## Key {#keys}
 
 Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+Key는 React가 어떤 항목의 변경, 추가 또는 제거할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -110,6 +124,7 @@ const listItems = numbers.map((number) =>
 ```
 
 The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용 하는 것 입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -120,6 +135,7 @@ const todoItems = todos.map((todo) =>
 ```
 
 When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+렌더링 된 항목에 대한 안정적인 ID가 없다면, 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
@@ -131,22 +147,29 @@ const todoItems = todos.map((todo, index) =>
 ```
 
 We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장되지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny's가 작성한 아티클인 [인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)을 참고 하시길 바랍니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
 
 Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+더 자세히 알고 싶다면 [왜 키가 필요한가에 대한 더 깊은 설명](/docs/reconciliation.html#recursing-on-children)을 읽어보세요.
 
 ### Extracting Components with Keys {#extracting-components-with-keys}
+### Key로 컴포넌트 추출하기 {#extracting-components-with-keys}
 
 Keys only make sense in the context of the surrounding array.
+키는 주변 배열의 context에서만 의미가 있습니다.
 
 For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
+예를 들어 , `ListItem` 컴포넌트를 [추출](/docs/components-and-props.html#extracting-components) 한 경우, `ListItem` 안에있는 `<li>` 엘리먼트가 아니라 배열의 `<ListItem />` 엘리먼트가 key를 가져야 합니다.
 
 **Example: Incorrect Key Usage**
+**예시: 잘못된 Key 사용법**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
     // Wrong! There is no need to specify the key here:
+    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
     <li key={value.toString()}>
       {value}
     </li>
@@ -157,6 +180,7 @@ function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
     // Wrong! The key should have been specified here:
+    // 틀렸습니다! 여기에 key를 지정해야 합니다.
     <ListItem value={number} />
   );
   return (
@@ -174,10 +198,12 @@ ReactDOM.render(
 ```
 
 **Example: Correct Key Usage**
+**예시: 
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
   // Correct! There is no need to specify the key here:
+  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
   return <li>{props.value}</li>;
 }
 
@@ -185,6 +211,7 @@ function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
     // Correct! Key should be specified inside the array.
+    // 맞습니다! 배열 안에 key를 지정해야 합니다.
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -203,12 +230,18 @@ ReactDOM.render(
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+
 
 A good rule of thumb is that elements inside the `map()` call need keys.
+경험상 `map()` 함수 내부에 있는 엘리먼트에 key를 넣어 주는게 좋습니다.
+
 
 ### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Key는 주변 항목들 중에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings}
 
 Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Key는 배열안에서 주변 항목에 대해 고유해야 하고, 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -247,8 +280,10 @@ ReactDOM.render(
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
 Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+React에서 key는 힌트를 제공하지만 컴포넌트로 전달되지는 않습니다. 컴포넌트에서 동일한 값을 필요로하면 다른 이름의 prop를 명시적으로 전달 합니다.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -260,10 +295,13 @@ const content = posts.map((post) =>
 ```
 
 With the example above, the `Post` component can read `props.id`, but not `props.key`.
+위 예제에서 `Post`컴포넌트는 `props.id`는 읽을 수 있지만 `props.key`는 읽을 수 없습니다.
 
 ### Embedding map() in JSX {#embedding-map-in-jsx}
+### JSX에 map() 포함시키기 {#embedding-map-in-jsx}
 
 In the examples above we declared a separate `listItems` variable and included it in JSX:
+위 예제에서는 별도의 `listItems` 변수를 선언하고 이를 JSX에 포함시켰습니다.
 
 ```js{3-6}
 function NumberList(props) {
@@ -281,6 +319,7 @@ function NumberList(props) {
 ```
 
 JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX를 사용하면 중괄호 안에 [모든 표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx)시킬 수 있으므로 `map()` 결과를 인라인으로 처리할 수 있습니다.
 
 ```js{5-8}
 function NumberList(props) {
@@ -297,5 +336,8 @@ function NumberList(props) {
 ```
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
 Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+
+이 방식을 사용하면 코드가 더 깔끔할수 있지만, 이 방식을 남용하는 것은 좋지 않습니다. Javascript와 마찬가지로, 가독성을 위해 변수로 추출해야할지 아니면 인라인으로 넣을지는 개발자가 직접 판단 해야 합니다. `map()` 함수가 너무 중첩되어있다면, [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.

From fde44936f5bf8b518bd0a65607867518183e91a3 Mon Sep 17 00:00:00 2001
From: jeonjihun <nin1212@hufs.ac.kr>
Date: Sun, 31 Mar 2019 20:04:23 +0900
Subject: [PATCH 2/4] Add list and keys

---
 content/docs/lists-and-keys.md | 89 +++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index f34e9e5d6..7777d362f 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,14 +1,14 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: 리스트와 Key
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-First, let's review how you transform lists in JavaScript.
+먼저, Javascript에서 리스트를 어떻게 변환하는지 살펴봅시다.
 
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
+아래 코드에서 [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)함수를 이용하여 `numbers` 배열의 값을 두배로 만든 후 `map()`에서 반환하는 새 배열을 `doubled` 변수에 할당하고 로그를 확인 합니다.
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -16,15 +16,15 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-This code logs `[2, 4, 6, 8, 10]` to the console.
+이 코드는 콘솔에 `[2, 4, 6, 8, 10]`을 표시합니다.
 
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+React에서 배열을 [엘리먼트](/docs/rendering-elements.html) 리스트로 만드는 방식은 이와 거의 동일 합니다.
 
-### Rendering Multiple Components {#rendering-multiple-components}
+### 여러개의 컴포넌트 렌더링 하기 {#rendering-multiple-components}
 
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+엘리먼트 모음을 만들고 중괄호 `{}`를 이용하여 [JSX에 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx)시킬 수 있습니다.
 
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+아래에서 Javascript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행 합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고, 엘리먼트 배열의 결과를 `listItems`에 저장 합니다.
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+`listItems` 배열을 `<ul>`엘리먼트 안에 포함시키고 [DOM에 렌더링합니다.](/content/docs/rendering-elements.html#rendering-an-element-into-the-dom)
 
 ```javascript{2}
 ReactDOM.render(
@@ -42,15 +42,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-This code displays a bullet list of numbers between 1 and 5.
+이 코드는 1부터 5까지의 숫자로 이루어진 리스트를 보여줍니다.
 
-### Basic List Component {#basic-list-component}
+### 기본 리스트 컴포넌트 {#basic-list-component}
 
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+일반적으로 [컴포넌트](/docs/components-and-props.html) 안에서 리스트를 렌더링합니다.
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
+이전 예제를 `numbers` 배열을 받아서 순서 없는 엘리먼트 리스트를 출력하는 컴포넌트로 리팩토링할 수 있습니다.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -70,9 +70,8 @@ ReactDOM.render(
 );
 ```
 
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
-
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. "key"는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다. 다음 섹션에서 key의 중요성에 대해서 더 설명하겠습니다.
+이제 `numbers.map()` 안에서 리스트의 각 항목에 `key`를 할당하여 키 누락 문제를 해결하겠습니다.
 
 ```javascript{4}
 function NumberList(props) {
@@ -94,11 +93,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
-## Keys {#keys}
+## Key {#keys}
 
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +108,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용 하는 것 입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -119,7 +118,7 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+렌더링 된 항목에 대한 안정적인 ID가 없다면, 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
@@ -130,23 +129,23 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny's가 작성한 아티클인 [인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)을 참고 하시길 바랍니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
 
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+더 자세히 알고 싶다면 [왜 key가 필요한가에 대한 더 깊은 설명](/docs/reconciliation.html#recursing-on-children)을 읽어보세요.
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Key로 컴포넌트 추출하기 {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+키는 주변 배열의 context에서만 의미가 있습니다.
 
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
+예를 들어 , `ListItem` 컴포넌트를 [추출](/docs/components-and-props.html#extracting-components) 한 경우, `ListItem` 안에있는 `<li>` 엘리먼트가 아니라 배열의 `<ListItem />` 엘리먼트가 key를 가져야 합니다.
 
-**Example: Incorrect Key Usage**
+**예시: 잘못된 Key 사용법**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
     <li key={value.toString()}>
       {value}
     </li>
@@ -156,7 +155,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // 틀렸습니다! 여기에 key를 지정해야 합니다.
     <ListItem value={number} />
   );
   return (
@@ -173,18 +172,18 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**예시: 올바른 Key 사용법**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
   return <li>{props.value}</li>;
 }
 
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Correct! Key should be specified inside the array.
+    // 맞습니다! 배열 안에 key를 지정해야 합니다.
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -202,13 +201,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+경험상 `map()` 함수 내부에 있는 엘리먼트에 key를 넣어 주는게 좋습니다.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Key는 주변 항목들 중에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Key는 배열안에서 주변 항목에 대해 고유해야 하고, 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -246,9 +245,9 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+React에서 key는 힌트를 제공하지만 컴포넌트로 전달하지는 않습니다. 컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop로 명시적으로 전달 합니다.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -259,11 +258,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+위 예제에서 `Post`컴포넌트는 `props.id`를 읽을 수 있지만 `props.key`는 읽을 수 없습니다.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### JSX에 map() 포함시키기 {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+위 예제에서 별도의 `listItems` 변수를 선언하고 이를 JSX에 포함시켰습니다.
 
 ```js{3-6}
 function NumberList(props) {
@@ -280,7 +279,7 @@ function NumberList(props) {
 }
 ```
 
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX를 사용하면 중괄호 안에 [모든 표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx)시킬 수 있으므로 `map()`함수의 결과를 인라인으로 처리할 수 있습니다.
 
 ```js{5-8}
 function NumberList(props) {
@@ -296,6 +295,6 @@ function NumberList(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. Javascript와 마찬가지로, 가독성을 위해 변수로 추출해야할지 아니면 인라인으로 넣을지는 개발자가 직접 판단 해야 합니다. `map()` 함수가 너무 중첩되어있다면, [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.

From bcae4d575e3f979733866f130b30b57480d4a4db Mon Sep 17 00:00:00 2001
From: jeonjihun <nin1212@hufs.ac.kr>
Date: Mon, 1 Apr 2019 22:48:34 +0900
Subject: [PATCH 3/4] Fix best practices

---
 content/docs/lists-and-keys.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index e14563a44..16fe342e4 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -6,7 +6,7 @@ prev: conditional-rendering.html
 next: forms.html
 ---
 
-먼저, Javascript에서 리스트를 어떻게 변환하는지 살펴봅시다.
+먼저 Javascript에서 리스트를 어떻게 변환하는지 살펴봅시다.
 
 아래 코드에서 [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)함수를 이용하여 `numbers` 배열의 값을 두배로 만든 후 `map()`에서 반환하는 새 배열을 `doubled` 변수에 할당하고 로그를 확인합니다.
 
@@ -24,7 +24,7 @@ React에서 배열을 [엘리먼트](/docs/rendering-elements.html) 리스트로
 
 엘리먼트 모음을 만들고 중괄호 `{}`를 이용하여 [JSX에 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 시킬 수 있습니다.
 
-아래에서 Javascript [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고, 엘리먼트 배열의 결과를 `listItems`에 저장합니다.
+아래에서 Javascript [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고 엘리먼트 배열의 결과를 `listItems`에 저장합니다.
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -118,7 +118,7 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-렌더링 된 항목에 대한 안정적인 ID가 없다면, 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
+렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
@@ -137,7 +137,7 @@ const todoItems = todos.map((todo, index) =>
 
 키는 주변 배열의 context에서만 의미가 있습니다.
 
-예를 들어, `ListItem` 컴포넌트를 [추출](/docs/components-and-props.html#extracting-components) 한 경우, `ListItem` 안에 있는 `<li>` 엘리먼트가 아니라 배열의 `<ListItem />` 엘리먼트가 key를 가져야 합니다.
+예를 들어 `ListItem` 컴포넌트를 [추출](/docs/components-and-props.html#extracting-components) 한 경우 `ListItem` 안에 있는 `<li>` 엘리먼트가 아니라 배열의 `<ListItem />` 엘리먼트가 key를 가져야 합니다.
 
 **예시: 잘못된 Key 사용법**
 
@@ -207,7 +207,7 @@ ReactDOM.render(
 
 ### Key는 주변 항목 중에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings}
 
-Key는 배열 안에서 주변 항목에 대해 고유해야 하고, 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
+Key는 배열 안에서 주변 항목에 대해 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -247,7 +247,7 @@ ReactDOM.render(
 
 [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-React에서 key는 힌트를 제공하지만, 컴포넌트로 전달하지는 않습니다. 컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달합니다.
+React에서 key는 힌트를 제공하지만 컴포넌트로 전달하지는 않습니다. 컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달합니다.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -297,4 +297,4 @@ function NumberList(props) {
 
 [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. Javascript와 마찬가지로, 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 합니다. `map()` 함수가 너무 중첩되어있다면, [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.
+이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. Javascript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 합니다. `map()` 함수가 너무 중첩된다면 [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.

From 1f8d60b18726a3ccb3cb52046bcd65adb3185710 Mon Sep 17 00:00:00 2001
From: Jravvit <gaver1213@gmail.com>
Date: Mon, 22 Apr 2019 22:54:36 +0900
Subject: [PATCH 4/4] Fix typo

---
 content/docs/lists-and-keys.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 16fe342e4..74780427e 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -6,9 +6,9 @@ prev: conditional-rendering.html
 next: forms.html
 ---
 
-먼저 Javascript에서 리스트를 어떻게 변환하는지 살펴봅시다.
+먼저 JavaScript에서 리스트를 어떻게 변환하는지 살펴봅시다.
 
-아래 코드에서 [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)함수를 이용하여 `numbers` 배열의 값을 두배로 만든 후 `map()`에서 반환하는 새 배열을 `doubled` 변수에 할당하고 로그를 확인합니다.
+아래는 [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)함수를 이용하여 `numbers` 배열의 값을 두배로 만든 후 `map()`에서 반환하는 새 배열을 `doubled` 변수에 할당하고 로그를 확인하는 코드입니다.
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -16,7 +16,7 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-이 코드는 콘솔에 `[2, 4, 6, 8, 10]`을 표시합니다.
+이 코드는 콘솔에 `[2, 4, 6, 8, 10]`을 출력합니다.
 
 React에서 배열을 [엘리먼트](/docs/rendering-elements.html) 리스트로 만드는 방식은 이와 거의 동일 합니다.
 
@@ -24,7 +24,7 @@ React에서 배열을 [엘리먼트](/docs/rendering-elements.html) 리스트로
 
 엘리먼트 모음을 만들고 중괄호 `{}`를 이용하여 [JSX에 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 시킬 수 있습니다.
 
-아래에서 Javascript [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고 엘리먼트 배열의 결과를 `listItems`에 저장합니다.
+아래의 JavaScript [`map()`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 함수를 사용하여 `numbers` 배열을 반복 실행합니다. 각 항목에 대해 `<li>` 엘리먼트를 반환하고 엘리먼트 배열의 결과를 `listItems`에 저장합니다.
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -129,9 +129,9 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny's가 작성한 아티클인 [인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)을 참고하시길 바랍니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
+항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny's가 작성한 글인 [인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)을 참고하시길 바랍니다. 만약 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
 
-더 자세히 알고 싶다면 [왜 key가 필요한가에 대한 더 깊은 설명](/docs/reconciliation.html#recursing-on-children)을 읽어보세요.
+더 자세히 알고 싶다면 [왜 key가 필요한가에 대한 더 자세한 설명](/docs/reconciliation.html#recursing-on-children)을 읽어보세요.
 
 ### Key로 컴포넌트 추출하기 {#extracting-components-with-keys}
 
@@ -205,9 +205,9 @@ ReactDOM.render(
 
 경험상 `map()` 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋습니다.
 
-### Key는 주변 항목 중에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings}
+### Key는 형제 사이에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings}
 
-Key는 배열 안에서 주변 항목에 대해 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
+Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -297,4 +297,4 @@ function NumberList(props) {
 
 [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. Javascript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 합니다. `map()` 함수가 너무 중첩된다면 [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.
+이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. JavaScript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 합니다. `map()` 함수가 너무 중첩된다면 [컴포넌트로 추출](/docs/components-and-props.html#extracting-components) 하는 것이 좋습니다.