4. 쇼핑몰 웹사이트 만들기 (5)

여기서 잠깐!

이미지 복사를 한 후 src에 ""로 붙여넣기를 한 후 그대로 실행하면 오류가 난다.

오류

alt=" " 를 src링크 뒤에 추가해주니까 정상적으로 동작한다.

결과 화면

가로가 100px(픽셀)로 고정이 된다.!

 

 

사이즈가 조금 줄어들었다!!

 

 

<결과>

윗부분 일부

 

이렇게 일일이 만들수 있으나 너무 복잡하고 귀찮다....

대신 아래처럼 메뉴를 담은 배열,즉 리스트를 만들어 준다!!!

이렇게 배열을 정의했다.

이제 배열에 아이템을 프린트해주자!

 

 

map은 배열을 하나씩 돌면서(for문 역할),
배열 안의 값(menu)을 <li> 태그에 넣어서 화면에 출력한다

 

( !!!여기서 잠깐!!! )

1️⃣ map이란?

map은 배열을 하나씩 꺼내서 새로운 배열을 만들어주는 함수이다.
React에서는 이걸 for문처럼 써서 화면에 반복 출력할 때 많이 사용한다.

 

const menuList = ['여성','Divided','남성', ...]

이 배열에 map을 쓰면,

 

menuList.map(...)

👉 배열 안의 값들을 하나씩 꺼내서 처리함

 

<결과>