리액트 컴퍼넌트 사용. 배열반환

• 컴포넌트 사용

function Food() {
  return (
    "김밥"
  );
}//컴포넌트

function App() {
  return (
    <div className="App">
  	    <h1>메뉴</h1>
        <food /> //컴포넌트 사용
    </div>
  );
}

• 배열 랜더링

MDN문서에는

"map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다"

라고 되어 있는, 자바스크립트 메소드이다.

import React from 'react';

const food=[{
  id:1,
  menu:"그냥김밥",
  price:"2,500원"
},
{
  id:2,
  menu:"참치김밥",
  price:"3,500원"
},  
{
   id:3,
   menu:"소고기김밥",
  price:"4,500원"
},
{
  id:4,
   menu:"불백김밥",
  price:"4,500원"
},
  {
    id:5,
    menu:"치즈김밥",
  price:"3,500원"
},
{
  id:6,
  menu:"돈까스김밥",
  price:"4,000원"
},
]

function Food({name,price}) {
  return (
    <dl>
    <dt>{name}</dt><dd>{price}</dd>
    </dl>  
  );
}

function App() {
  return (
    <div className="App">
      <h1>메뉴</h1>
     
      {food.map(item=>( <Food key={item.id} name={item.menu} price={item.price}/>))}
     </div>
  );
}

.map을 사용해서 컴포넌트에 배열을 받아 반환할 수 있다.

다른 형식 사용 예제

function renderMenu(item){
  return <Food name={item.menu} price={item.price}/>
}

function App() {
  return (
    <div className="App">
      <h1>메뉴</h1>
     
      {food.map(renderMenu)}
     </div>
  );
}

출력은 같다.