[리액트(React) Study Log] [Person App-022] Flexible Lists

[리액트(React) Study Log] [Person App-022] Flexible Lists

 

1. dynamic list rendering 을 구현하면서 앞에서 만들었던 changed props 가 자식 component 에 전달되지 않고 있음.

<input type="text" onChange={props.changed} value={props.name} />

 - 전체 List 모두에서 nameChange 가 작동하도록 수정해보자.

 - 자식 component changed props 전달시 event 와 person.id 를 argument 로 넣음.

(map 함수가 person parameter 를 받기 때문에, changed 함수의 argument 에는 person.id 는 안 들어가도 됨.)

// src-App.js

 

...

{this.state.persons.map((person, index) => {

return(

              <Person

                ...

                changed={(event) => this.nameChangedHandler(event, person.id)} />

 - nameChangeHandler 에서 event 와 id 를 argument 로 받아서 findIndex 함수를 이용해서 id 에 해당하는 item 의 index 값을 personIndex 에 담는다.

(findIndex 함수는 map 함수와 비슷하게 array를 순회하면서 argument 로 받은 함수의 return 값이 true 인 item 의 index를 return 함.)

 - index 이용 --> person 복사(immutable) --> person.name 수정 --> persons 복사(immutable) --> 변경된 person 으로 persons data 를 수정 --> setState 를 이용해서 최종 update 된 persons 를 persons key의 value 로 넣어줌.

nameChangedHandler = (event, id) => {

    const personIndex = this.state.persons.findIndex(p => {

      return p.id == id;

    })

 

    const person =  {

      ...this.state.persons[personIndex]

    }

   

    // const person = Object.assign({}, this.state.person[personIndex]);

 

    person.name = event.target.value;

 

    const persons =  [...this.state.persons];

    persons[personIndex] = person;

 

    this.setState( {persons: persons} )

  }