01.8 리액트 컴포넌트 반복
React.js 01.8. 컴포넌트 반복 01.8.1. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 파라미터 설명 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다. - currentValue : 처리할 현재 요소. - index (Optional) : 처리할 현재 요소의 인덱스. - array (Optional) : map()을 호출한 배열. thisArg (Optional) : callback을 실행할 때 this로 사용되는 값. map 함수는 기존 배열로 새로운 배열을 만드는 역할을 한다. ES6 문법의 map const nums = [ 1 , 2 , 3 , 4 , 5 ]; const result = nums.map(num => num * num); console.log(result); // [1, 4, 9, 16, 25] 01.8.2. 데이터 배열을 컴포넌트 배열로 map import React , { Component } from 'react' ; class NewComponent extends Component { render() { const arr = [ 1 , 2 , 3 , 4 , 5 ]; const arrList = arr.map( (arr) => ( < li > {arr} < /li>) ); return ( <