리액트 정리
[UserList] 배열에 항목 제거하기. filter로 id가 __인 객체를 삭제. 본문
User 컴포넌트의 삭제 버튼이 클릭 될 때는
user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 합니다.
여기서 onRemove "id 가 __인 객체를 삭제해라" 라는 역할을 가지고 있습니다.
이 onRemove 함수는 UserList 에서도 전달 받을것이며, 이를 그대로 User 컴포넌트에게 전달해줄것입니다.
배열에 있는 항목을 제거할 때에는, 추가할떄와 마찬가지로 불변성을 지켜가면서 업데이트를 해주어야 합니다.
불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는것이 가장 편합니다. 이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다. (참고)
https://react.vlpt.us/basic/14-array-remove.html
14. 배열에 항목 제거하기 · GitBook
14. 배열에 항목 제거하기 이 섹션에서 사용된 코드는 다음 페이지에서 확인 할 수 있습니다. 이번에는 배열에 항목을 제거 할 때에는 어떻게 해야 하는지 알아보겠습니다. 우선, UserList 에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링해주겠습니다. UserList.js import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.
react.vlpt.us
'리액트' 카테고리의 다른 글
| [인프런] Nodebird 리뉴얼 (진행중) (0) | 2020.07.28 |
|---|---|
| [인프런] Nodebird 리뉴얼 이론 - Next (0) | 2020.07.28 |
| [UserList] 배열에 항목 추가하기. Spread연산자와 concat (0) | 2020.03.03 |
| [TodoList] styled-components, createGlobalStyle , Tagged template literal (0) | 2020.03.01 |
| [TodoList] 컴포넌트에서 다른 컴포넌트를 담기. 합성 (Composition). {props.children} (0) | 2020.02.29 |
'리액트' Related Articles
more
