Skip to content

Update 11-render-array.md #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update 11-render-array.md #77

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0618d6e
Update 11-render-array.md
scl2589 Sep 2, 2021
0de17b0
Update 11-render-array.md
scl2589 Sep 2, 2021
e51f023
Merge pull request #1 from scl2589/patch-3
scl2589 Sep 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions basic/11-render-array.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function UserList() {
export default UserList;
```

그런데, 재사용되는 코드를 일일히 넣는게 별로 좋지 않으니, 컴포넌트를 재사용 할 수 있도록 새로 만들어주겠습니다.
그런데, 재사용되는 코드를 일일이 넣는게 별로 좋지 않으니, 컴포넌트를 재사용 할 수 있도록 새로 만들어주겠습니다.

참고로, 한 파일에 여러개의 컴포넌트를 선언해도 괜찮습니다.

Expand Down Expand Up @@ -179,7 +179,7 @@ export default UserList;

![](https://i.imgur.com/xbYuPhH.png)

리액트에서 배열을 렌더링 할 때에는 `key` 라는 props 를 설정해야합니다. `key` 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 `id` 가 고유 값이지요.
리액트에서 배열을 렌더링 할 때에는 `key` 라는 props 를 설정해야합니다. `key` 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 `id` 가 고유값 이지요.

#### UserList.js

Expand Down Expand Up @@ -259,7 +259,7 @@ array.map(item => <div>{item}</div>);

비효율적이지요? 하지만, `key` 가 있다면 이 작업은 개선됩니다.

객체에 다음과 같이 `key` 로 사용 할 수 있는 고유 값이 있고
객체에 다음과 같이 `key` 로 사용 할 수 있는 고유값이 있고

```javascript
[
Expand Down Expand Up @@ -288,7 +288,7 @@ array.map(item => <div>{item}</div>);
array.map(item => <div key={item.id}>{item.text}</div>);
```

배열이 업데이트 될 떄 `key` 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제합니다.
배열이 업데이트 될 때 `key` 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제합니다.

![](https://i.imgur.com/yEUS6Bx.gif)

Expand Down