라벨이 리액트 컴포넌트 반복인 게시물 표시

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>) )...