diff --git a/basic/11-render-array.md b/basic/11-render-array.md index 3fc98ca..7943ed2 100644 --- a/basic/11-render-array.md +++ b/basic/11-render-array.md @@ -71,7 +71,7 @@ function UserList() { export default UserList; ``` -그런데, 재사용되는 코드를 일일히 넣는게 별로 좋지 않으니, 컴포넌트를 재사용 할 수 있도록 새로 만들어주겠습니다. +그런데, 재사용되는 코드를 일일이 넣는게 별로 좋지 않으니, 컴포넌트를 재사용 할 수 있도록 새로 만들어주겠습니다. 참고로, 한 파일에 여러개의 컴포넌트를 선언해도 괜찮습니다. @@ -179,7 +179,7 @@ export default UserList; ![](https://i.imgur.com/xbYuPhH.png) -리액트에서 배열을 렌더링 할 때에는 `key` 라는 props 를 설정해야합니다. `key` 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 `id` 가 고유 값이지요. +리액트에서 배열을 렌더링 할 때에는 `key` 라는 props 를 설정해야합니다. `key` 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 `id` 가 고유값 이지요. #### UserList.js @@ -259,7 +259,7 @@ array.map(item =>
{item}
); 비효율적이지요? 하지만, `key` 가 있다면 이 작업은 개선됩니다. -객체에 다음과 같이 `key` 로 사용 할 수 있는 고유 값이 있고 +객체에 다음과 같이 `key` 로 사용 할 수 있는 고유값이 있고 ```javascript [ @@ -288,7 +288,7 @@ array.map(item =>
{item}
); array.map(item =>
{item.text}
); ``` -배열이 업데이트 될 떄 `key` 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제합니다. +배열이 업데이트 될 때 `key` 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제합니다. ![](https://i.imgur.com/yEUS6Bx.gif)