[리액트(React) Study Log] [Person App-021] Lists & Keys

[리액트(React) Study Log] [Person App-021] Lists & Keys

 

1. List data redering 에서 key 의 필요성

 - List data 를 map 함수를 사용해서 rendering 할 때, JSX object 의 component attrubute 에 key 를 정의해주어야 함. (key 없이도 rendering 은 되지만, List 내용물을 이용한 각종 작업시 정확히 어떤 key 를 가지는 component 가 대상인지 react 가 바로 인식할 수 없기 때문에 작동 효율성이 매우 떨어지게 됨.)

 

2. key 정의

 - 보통 서버 또는 DB에서 key를 가지고 오거나, 자동으로 key가 부여되기도 하지만 여기서는 key 값을 강제로 지정하였다. (key는 unique 한 값을 사용해야 하는데, index 도 내용물이 삭제되는 등 삭제되는 등 변경되면 index 값도 변경될 수 있기 때문에 unique 하지 않다.)

state = {

    persons: [

      { id: 'asfa1', name: 'David', age: 28 },

      { id: 'vasdf1', name: 'Lina', age: 29 },

      { id: 'asdf1', name: 'Nick', age: 26 }

    ],

 - key props 전달.

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}

                key={person.id} />