자바스크립트 .map 의 기능 리마인드
[1, 2, 3].map(function(a){
return 'abcabc'
})
//1. array의 자료 갯수만큼 함수안의 코드 실행
//2. 함수의 파라미터는 array내부의 자료임.
//3. return에 뭘 적으면 array로 담아줌.이걸 이용해서 html을 반복해서 넣기
근데 react 중괄호 내부에서는 for 반복문이 안되서..
map함수를 이용해서
{
[1, 2, 3].map(function (a) {
return <div className='list'>
<h4 onClick={() => {
modal ? setModal(false) : setModal(true)
}}>{제목[2]}</h4>
<p>맵 반복 생성</p>
</div>
})
}
근데 이렇게도 가능
{
제목.map(function (a) {
return <div className='list'>
<h4>{a}</h4>
<p>맵 반복 생성</p>
</div>
})
}
파라미터 2개 넣으면 두번째는 반복문의 i와 같은 역할임
{
제목.map(function (a, i) {
return <div className='list'>
<h4>{a}</h4>
<p>맵 반복 생성 No.{i}</p>
</div>
})
}
아래처럼 각각 동작하는 좋아요 만들기.
let [좋아요, set좋아요] = useState([0, 0, 0]);
let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천'])
{
제목.map(function (a, i) {
return <div className='list' key={i}>
<h4>{a} <span onClick={() => {
let copy = [...좋아요];
copy[i] = copy[i] + 1;
set좋아요(copy);
}}>👍</span> {좋아요[i]} </h4>
<p>맵 반복 생성 No.{i}</p>
</div>
})
}
근데 이러면 게시글 수 만큼 하드코딩 해야하는데..
.
