현재 html,css (레이아웃 잡혀있는 상태임) JSX문법임

2번째 줄의 메뉴탭이 무수히 많을때 반복문 써야 하는데 그걸 못하겠음

그리고, (클릭된 메뉴에 대하여 텍스트,아이콘 검정색 처리 하고싶음 클릭되었다는 표시) 



메뉴탭 배열로 정해놓고,

const menuarr = [

  { id: 1, className: 'item2-item1', imgSrc: '/asset/home-01.svg', label: '한옥' },

  { id: 2, className: 'item2-item2', imgSrc: '/asset/image.svg', label: '최고의 전망' },

  { id: 3, className: 'item2-item3', imgSrc: '/asset/home-05.svg', label: '한적한 시골' },

  { id: 4, className: 'item2-item4', imgSrc: '/asset/home-03.svg', label: '키즈' }

];



menuarr.map((el, index) => {


})


씨발 여기서 머리가 막혔음;; 구글링 해도 모르겠음 다른 애들 얘기

el 파라미터가 요소를 다 꺼낸다는 의미고, index가 현재 선택된? 뭐? 씨발..




제발 도와주라 형들 제발.... 제발 ㅠㅠㅠㅠ 코드는 아래에다 쓸게

ac5939a70001b942813e33669735c1bcc2a977c21c773585f0dabed5e42e074dc2d2542d4ea5fd2bc8a114c2d1971e9e78ba8e228fd80675111dd004d4bf4c910781c28fed667c014e9b37bfbf9c



const Menu = () => {
let state = useSelector((state) => { return state })
let dispatch = useDispatch()

return (
<div className="grid-item item2">
<div className="item2-container">
<div className="item2-item1">
<img src="/asset/home-01.svg"></img>
<div className="a1">한옥</div>
</div>
<div className="item2-item2">
<img src="/asset/image.svg"></img>
<div className="a2">최고의 전망</div>
</div>
<div className="item2-item3">
<img src="/asset/home-05.svg"></img>
<div className="a3">한적한 시골</div>
</div>
<div className="item2-item4">
<img src="/asset/home-03.svg"></img>
<div className="a4">키즈</div>
</div>
</div>
</div>
)
}