[Next.js] map 반복문 - html 반복 생성하기

page.js

 

list 페이지 상품 리스트 보여주기

 

강의 요약

map() 으로 반복 실행을 할 수 있다.

 

1. 여러 자료를 한곳에 보관하려면 --> array 자료형

let arr = [20,30,40]       //array 선언하기
arr[0] = 10                    //arr 첫번째 요소 값 바꾸기

 

2. JSX에서 if,for을 쓸수 없다. --> map() 함수로 반복실행

 

3. map() 쓰면 HTML 반복생성 가능. 함수안의 코드 반복 실행함.

 

일반 ver.

array.map(function(){
 ...반복실행할 코드....
} )

 

간단 ver.

array.map( ()=> {
 ...반복실행할 코드....
} )

 

 

4. map() 에 파라미터 2개를 넣을 수 있다.

• 첫번째 파라미터 (a) - array안의 자료를 하나씩 추출
• 두번째 파라미터 (i) - 반복될때마다 0부터 1씩 커지는 정수

array.map( (a,i) => {
  return(
      <div>
             <h4>{a} $100<\h4>
     <\div>
  )
})

 

5. return 안에 적은걸 array 로 담아준다.

 

5. map 반복문 사용시 속성에 key={유니크한값} 넣는게 좋다

<div className="food" key={i}>

 

 

 

출처- 코딩애플