Next.js map 함수 (4)

Next.js에서 배열과 map 함수를 활용하여 HTML 생성하기

1. 배열 생성하기

Next.js에서 상품 리스트와 같은 여러 개의 데이터를 다루기 위해 배열을 사용할 수 있습니다.

//jsx
export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div> 
    (생략)

위의 코드에서는 '상품'이라는 변수에 여러 개의 상품 이름을 배열 형태로 저장했습니다.

2. 배열과 map 함수를 활용하여 HTML 생성하기

배열에 있는 각 데이터를 활용하여 HTML을 생성하려면 map 함수를 사용할 수 있습니다.

//jsx
export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div> 
      <h4 className="title">상품목록</h4>
      { 
        상품.map(()=>{
          return ( 
            <div className="food"> 
              <h4>{ 상품[0] } $40</h4>
            </div>
          )
      }) }
    </div>
  )
}

위의 코드에서는 map 함수를 사용하여 '상품' 배열의 각 요소를 순회하며 HTML을 생성했습니다. 이를 통해 동일한 형태의 HTML을 배열의 각 요소에 대해 반복하여 생성할 수 있습니다.

 

3. 배열의 각 요소를 활용하기

배열의 각 요소를 활용하려면 map 함수의 콜백 함수에서 파라미터를 활용하면 됩니다.

//jsx
export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div> 
      <h4 className="title">상품목록</h4>
      { 
        상품.map((상품명)=>{
          return ( 
            <div className="food"> 
              <h4>{ 상품명 } $40</h4>
            </div>
          )
      }) }
    </div>
  )
}

위의 코드에서는 map 함수의 콜백 함수의 파라미터로 '상품명'을 사용하여 배열의 각 요소를 활용했습니다.