주의 : 배열에 키값을 주지않고 수정할때 성능저하문제

[chemica1]

import React, { Component } from 'react';

class PhoneInfoList extends Component { static defaultProps ={ //디폴트프롭값을 넣을땐 static으로 선언함 data : [] }

render() {

    const{data} = this.props;
    const list = data.map(
        info => (<PhoneInfo info={info} key={info.id} />) //key값은 나중에 업뎃할때 편하려구 넣음
    );
    return (
        <div>
          {list}   
        </div>
    );
}

}

export default PhoneInfoList;

div>a</div div>b</div div>c</div div>d</div

['a','b','c','d']

키값이 없을 때 : 이런 배열에 중간에 z값을 넣는다고 가정하면 (이는 삭제에도 똑같이 적용됨)

div>a</div div>b</div div>z</div 1.c가 z로 바뀐다 div>c</div 2.d가 c로 바뀐다 div>d</div 3. 없던 곳에 d가 생긴다

['a','b','z','c','d']

키값이 있을때: 키는 고유하게 설정햇으므로 고유한 키값을 가진 z가 다른 배열값들의 키를 건드릴수없으니 변화없이 그냥 들어간다.

[chemica1]

그렇기때문에 배열에 고유한 키값을 넣는게 좋다