React 반복문: map()함수 이용하기

React에서 array의 data들을 모두 보여주고 싶을 때

간단히 하면 <div>arr[0]</div> <div>arr[1]></div>…식으로 여러개 반복하며 쓸 수 있다.

하지만 array의 크기가 정해지지 않았을 때는 한계가 있다.

따라서 array나 반복되는 코드를 구현할 때는 map()함수를 이용하면 된다.

const people = [{name="jjagu", age=154}, {name="dalso", age=365}]

2개의 object를 갖는 array가 있을 경우,

const renderPeople = people.map(person => {
    return (
        <div className="people" key="{person.name}">
            <div className="peron">{person.name} {person.age}</div>
        </div>
    )
});

이렇게 array를 map을 이용해 render하는 변수를 만든 후, return 문에서 사용하면 된다! (return 할 때, key나 id값은 꼭 unique한 값으로 넣어주어야 한다! 안그럼 console창에서 뜨는 error를 만날 것이다ㅠ_ㅠ)

{renderPeople}