From 887fb7f036668fcb421bdae5e5d722665b29b5e5 Mon Sep 17 00:00:00 2001 From: jeonjihun 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 `
  • ` 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` 배열을 반복 실행 합니다. 각 항목에 대해 `
  • ` 엘리먼트를 반환하고, 엘리먼트 배열의 결과를 `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 `