[리액트(React) Study Log] [Person App-019] LIsts & State
1. 개별 Person 을 클릭하면 해당 Person 이 삭제되는 기능 만들기
- App.js 의 switchNameHandler 삭제하고 그 자리에 deletePersonHandler 생성
- this.state.persons 를 const 에 저장하고, 그 객체를 splice method 를 사용해서 해당 index 의 person 을 삭제해서, this.setState 로 삭제된 상태의 persons 를 persons key 의 value 로 지정함. (아래 code가 작동은 하지만 함수, 객체 등은 reference 정보를 담고 있는 pointer 이므로, 아래와 같이 state 자체를 constant 에 담으면 원본 state가 mutate 되는 결과가 발생함. 따라서 아래 방법은 best case 가 아니며, immutable 하게 state 요소를 삭제하기 위한 방법은 04-55에서 설명할 예정임)
deletePersonHandler = (personIndex) => {
const persons = this.state.persons;
persons.splice(personIndex,1);
this.setState({persons: persons})
}
- persons varible 내용 수정
- rendering 된 개별 component 를 삭제하려면 어떤 index 를 가진 component 가 삭제될 지에 대한 정보가 delete 함수에 전달되어야 하므로 map 함수의 parameter 로 index 가 들어가고, click props 에 지정된 deletePersonHandler 함수의 argument 로 index 가 들어감.
let persons = null;
if (this.state.showPersons) {
persons = (
<div>
{this.state.persons.map((person, index) => {
return(
<Person
click={() => this.deletePersonHandler(index)}
name={person.name}
age={person.age} />
)
})}
</div>
)
}