Open chemica1 opened 5 years ago
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가 다른 배열값들의 키를 건드릴수없으니 변화없이 그냥 들어간다.
그렇기때문에 배열에 고유한 키값을 넣는게 좋다
import React, { Component } from 'react';
class PhoneInfoList extends Component { static defaultProps ={ //디폴트프롭값을 넣을땐 static으로 선언함 data : [] }
}
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가 다른 배열값들의 키를 건드릴수없으니 변화없이 그냥 들어간다.