[리액트(React) Study Log] [Person App-018] Outputting Lists
- 현재 hardcoding 되어 있는 persons data(List) redering 부분을 동적으로 rendering 해보자.
1. map 함수를 이용한 List date rendering
- this.state.persons date 부분이 array 이므로, 여기에 map 함수를 적용해서 react element 를 return 하는 새로운 array 를 만들어서 이를 persons constant 에 담아서 {persons} 로 rendering 한다. (기존에 작성한 persons varible code 를 수정)
- persons data 가 변화되어도 JSX code 의 rendering 부분이 변화된 data 를 읽어들여서 화면에 출력하도록. (실제 환경에서 서버로 부터 읽어온 data 를 state 에 담아서 rendering 되도록 할 수 있음.)
- 보통 JSX 에서 map 함수의 적용은 최상위 div 바로 아래서 시작하며, retrun 되는 최상위 component 에는 key 값을 지정해줘야 함.(key 값을 추후 부여할 예정)
- Person component 의 값은 this.state.persons[index].name 형식(index를 정해줘야 하므로 동적 방식이 아님, 실제 data 의 index 값을 argument로 넣어주면 이 형태로 사용도 가능함.)이 아니라 map 함수가 접근하는 객별 item 인 person을 이용해서 person.name 형식으로 사용함.
// src-App.js
...
render() {
...
let persons = null;
if (this.state.showPersons) {
persons = (
<div>
{this.state.persons.map(person => {
return(
<Person
name={person.name}
age={person.age} />
)
})}
</div>
)
}
...