map()으로 배열 렌더링하기

✅ map으로 배열 렌더링하기

🔎 map() 메서드
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드
- 매 반복마다 return되는 결과에 따라 새로운 배열을 만들어 냄
⭐ map 메서드는 파라미터로 콜백함수를 받고, 콜백 함수의 파라미터는 요소, index, array이다.

function ReviewList({items}) { // items라는 배열을 prop으로 받음 -> items에 있는 각 요소를 리액트로 렌더링할 것임!
  return <ul>{items.map((item)=>{
        return <li>{item.title}</li>
    })}
    </ul>;
}

export default ReviewList;

- map 메소드 안에서 JSX를 return하면 마치 JSX를 여러 개 추가한 것처럼 동작함

 

 

📚 map의 콜백 함수에서 JSX로 작성한 값 리턴해주기