[Next.js] 리액트와 동일한 map () / 컴포넌트 / props

map 함수 사용법
- 리액트와 동일
- 모든 Array 자료형에다가 사용

let 어레이 = [1,2,3];
어레이.map(()=>{
  console.log('안녕')
});

사용방법:

1) array.map() 이렇게 옆에 붙여줌.

let array = [1,2,3]

array 는 Array 자료형

2) map() 소괄호 안에다가 콜백함수 넣어주기.

array.map(function(){})

array.map(()=>{})

3) {} 안에 있는 내용을 array 자료 안에있는 데이터 개수 만큼 반복실행 해줌. 

array.map(function(){

console.log('안녕')})

= 안녕 3번 출력됨

= 데이터 개수 3개라서

= 1, 2, 3 이렇게 3개

4) 소괄호 안에 파라미터 2개 추가 가능

array.map((a,i)=>{})

 

a = array 안에 있던 자료들

1, 2, 3 을 의미

 

i = 인덱스

3개니까 0, 1, 2

5) return 도 넣어서 사용 가능

array.map(function(a){

return 10 })

= 10이 3번 출력됨. 

6) map 함수 html 있는 곳에 갖다 쓰려면 {} 로 열어준 다음 사용가능

{

array.map(function(a){

return 10 })

}

7) map 함수로 반복문 생성시 key 속성 꼭 쓰기 

상품.map((a, i)=>{
    return (
      <div className="food" key={i}>
        <h4>{a} $40</h4>
      </div>
    )
})

---

컴포넌트 사용법
- 리액트랑 동일.

1) function 작명(){} 

작명은 영어 대문자로 시작.

다른 function 바깥 쪽에 생성

2) return ( 축약할 HTML )

 function Abc(){

return ( 축약할 HTML ) } 

하나의 div 태그로 감싸서 return 소괄호 안에 넣어줌.

3) 원하는 곳에 갖다 쓰면 끝.

<Abc/>

---

 props 사용 방법
- 부모에서 자식에게

export default function Cart() {
  let 장바구니 = ['Tomatoes', 'Pasta']
  return (
    <div>
      <h4>Cart</h4>
      <CartItem 상품={장바구니[0]}/>
      <CartItem 상품={장바구니[1]}/>
    </div>
  )
}

function CartItem(props){
  return(
    <div className="cart-item">
      <p>{props.상품}</p>
      <p>$40</p>
      <p>1개</p>
    </div>
  )

1) 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={전해줄데이터} /> 

작명={데이터(변수이름)}

2) 자식컴포넌트 정의부분으로 가서 props라는 파라미터 등록 후 props.작명 사용

파라미터(props) 등록할 때

props 써 주는 대신 {작명한 이름} 넣어주면

props. 붙이지 않고 사용 가능.

function CartItem({ 상품 }) {
  return (
    <div className="cart-item">
      <p>{상품}</p>
      <p>$40</p>
      <p>1개</p>
    </div>
  );
}