[React] map을 활용한 컴포넌트 생성

import React from "react";


const Main = () => {
  const arr = ['사과', '배', '오렌지', '복숭아']
  
  // map을 통한 컴포넌트 렌더링 함수
  // 매개변수로 전달된 배열의 요소를 하나씩 꺼내어 컴포넌트로 변환해 리턴한다.
  const PracticeMap = (arr) => {
    return (
      <>
        {articles.map((item, index) => {
		// map 내부에서 변수 선언, 함수 호출 가능 
          return (
          <>
            <div key={index}>
 				<h1>{index}번째 과일은 {item}입니다.</h1>
            </div>
            </>
          );
        })}
      </>
    );
  };


  return (
    <div>
      {PracticeMap(arr)}
    </div>
  );
};

export default Main;

 

 

 

 

https://goddaehee.tistory.com/303

[React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트