[Warning] Each child in a list should have a unique "key" prop : map function 사용 시 key값 필요

React.js: List의 map 함수를 사용하여 렌더링할 때, key prop을 추가해야한다.

render(){
	let list = this.state.fileList ? 
		this.state.fileList.map(file => 
		<a>{file.dest}</a>) : ""
	return( <div> {list} </div> )
}

 

예를 들어 다음과 같이 fileList의 element를 이용하여 return값을 띄우려고 할 때, 

기존에 알고 있던 map 사용하듯이 Array.map(element => <div>{element.name}</div>) 이 아닌, 

element의 고유 식별 값이 list의 각 element에 key값으로 포함되어야함.

위 예시를 다음과 같이 바꾸어 쓴다. Array.map(element => <div key={element.id}>{element.name}</div>) 

 

즉, 코드에서도 key 값을 다음과 같이 포함할 수 있다!! :)

render(){
	let list = this.state.fileList ? 
		this.state.fileList.map(file => 
		<a key={file.id}>{file.dest}</a>) : ""
	return( <div> {list} </div> )
}