6. Next.js html을 반복문으로 줄이고 싶으면 map

export default function List() {
    let menu = ['Tomatoes', 'Pasta', 'Coconut']
    let a = [10, 20, 30]

    return (
      <div>
        <h4 className="title">상품목록</h4>
        <div className="food">
          <h4>{menu[0]} $40</h4>
        </div>
        <div className="food">
          <h4>{menu[1]} $40</h4>
        </div>
        <div className="food">
          <h4>{menu[2]} $40</h4>
        </div>
      </div>
    )
  }

 

array 자료형 

 

변수를 사용하면 문자, 숫자 등을 잠깐 보관해둘 수 있다.

변수 하나에 여러개 문자나 숫자를 보관하고 싶은 경우에는 array 자료형을 사용하면 된다.

 

let a = [10, 20, 30];
let b = ['김', '이', '박'];

 

나중에 array 안에 있는 자료를 뽑아서 사용하고 싶으면 

 

let a = [10, 20, 30];
console.log(a[0])

예를 들어

a[0]이라고 쓰면 10이 그 자리에 나옵니다. 

a[1] 이라고 쓰면 20이 그 자리에 나옵니다. 

 

---

 

 

map()함수 사용법

 

    let a = [10, 20, 30]

    a.map((b, i)=>{
      console.log(b)
      console.log(i)
    })
    


출력
10
0
20
1
30
2

a 라는 이름의 array 10 20 30 을 순서대로 출력 하려면 map 함수를 사용할때 첫 파라미터를 활용하면 순서대로 출력이 가능하다.

두 번째 파라미터인 i는 반복될 때 마다 0부터 1씩 커지는 정수이다. 출력은 0 1 2 순으로 출력되겠다.

 

    let a = [10, 20, 30]

   let b = a.map((c)=>{
      return 10;
    })
    console.log(b)
    
    
    출력
     [ 10, 10, 10 ]

 

map 함수의 또 다른 기능에는 return을 사용하여 array로 담아 줄수 있다.

위 코드의 map은 3번 반복하며 return에는 10 이라는 숫자가 있으니 변수 b에는 10 10 10 이 담기게 된다.

 

 

실습

제일 위에 있는 코드를 map 함수를 사용해서 출력해보자.

export default function List() {
    let menu = ['Tomatoes', 'Pasta', 'Coconut']
    let a = [10, 20, 30]

    return (
      <div>
        <h4 className="title">상품목록</h4>
        {
          menu.map((c)=>{
            return (
              <div className="food">
                <h4>{c} $40</h4>
              </div>
            )
          })
        }
      </div>
    )
  }

이런식으로 코드를 작성하게 되면 다음과 같은 결과가 나온다.