React - map()

map() 함수란?

- 자바스크립트 배열의 내장 함수이다.

- 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성한다.

 

어떨 때 쓰는가?

- 반복되는 컴포넌트를 렌더링할 때 사용하면 👍

- for문, 반복문 대체해서 사용하면 👍

 

문법

arr.map(callbackFunction, [thisArg])
arr.map(callbackFunction(currenValue, index, array),thisArg)

• callbackFunction : 새로운 배열의 요소를 생성하는 함수, 아래 세가지 인수를 가진다.
  • currenValue : 현재 처리하고 있는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array : 현재 처리하고 있는 원본 배열
• thisArg : callback 함수 내부에서 사용할 this 레퍼런스 설정

 

기본 사용방법

const count = [1,2,3,4,5];
const result = count.map((cou) => cou*2);
console.log(result);
// 2,4,6,8,10

  

Component 배열에 응용

 

Price.js

import React from 'react';

const Price = (props) => {
     return (
    	<div>
           <h3>이 제품의 가격은 {props.price} 입니다.</h3>
        </div>
      ); 
};

export default Price;

 

App.js

import React from 'react';
import Price from './Price';

const App = () => {
   const prices = ["3000", "4000", "5000"]
      const priceList = prices.map((price) => (<Price price={price}/>))
        return (
           <div>
              {priceList}
           </div>
        );
};

export default App;

// 이 제품의 가격은 3000원 입니다.
// 이 제품의 가격은 4000원 입니다.
// 이 제품의 가격은 5000원 입니다.