티스토리 뷰
★ map( )의 3가지 기능 ★
1. array의 요소 개수만큼 코드 실행
2. array의 요소 꺼내기
3. array의 요소 갯수만큼 자료 담기
1. array 요소 갯수 만큼 코드 실행
[1,2,3].map(function(){
console.log(1);
})
![](https://blog.kakaocdn.net/dn/33U4D/btrXhQzxeKk/BKlfl0q5rXkFGKkK4OmjAK/img.png)
배열의 요소가 3개 이므로console.log(1)이 3번 실행
2. 함수안에 파라미터 넣어서 array의 요소 꺼내기
[1,2,3].map(function(a){
console.log(a);
})
//화살표 함수
[1,2,3].map(a => console.log(a))
![](https://blog.kakaocdn.net/dn/nUC5A/btrXhoiUJXE/pK68Zgqv7cz0qZJgmigbtk/img.png)
array의 요소인 1,2,3 이 출력
3. array에 요소 개수만큼 자료 담기
return 뒤에 작성한 코드는
array 안의 요소 개수만큼 반복 실행됨
[1,2,3].map(function(a){
return '12312312';
})
![](https://blog.kakaocdn.net/dn/mJ7vU/btr3lDtXMam/OKs9WMczJx2VUsWNiTdPAk/img.png)
map( )으로 html 반복 생성하는 법
중괄호 안에서 map 함수 자유롭게 쓸 수 있음
{
[1,2,3].map(function(){
return <div>안뇽</div>
})
}
array의 요소가 3개 이므로
<div>안뇽</div>가 3번 반복 실행
{
[<div>안뇽</div>,<div>안뇽</div>,<div>안뇽</div>]
}
* return 뒤에 코드 길어지면 괄호 ( ) 안에 넣기
{
[1,2,3].map(function () {
return (
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}
![](https://blog.kakaocdn.net/dn/ANiBJ/btrXim0lpZs/Ekg0pvMzjPsmX3Qa4yYkW1/img.png)
* map반복문으로 생성한 html엔 key{i} 속성 추가해야 됨
추가해야 리액트가 <div>들을 각각 구분할 수 있음
![](https://blog.kakaocdn.net/dn/b8xgGG/btsahArikqg/Tu6utdrcDPadFDjsbPE5fk/img.png)
Q. 글개수만큼 html 생성하려면?
1. state 초기 값 가져다 쓰면 됨
![](https://blog.kakaocdn.net/dn/QEFE6/btrXkYqZFQ6/Vk5QrNEczSfcBQk31Jx3OK/img.png)
2. 글제목 state도 array이므로 arr 자리에 글제목state 넣기
![](https://blog.kakaocdn.net/dn/bgwESf/btrXmItUjSX/jr1Xh9Xj9NzLCfY6wksmCk/img.png)
![](https://blog.kakaocdn.net/dn/ZWaeh/btrXj1Ig4cA/6qBZIEWkaAKusyJ0gKnKM1/img.png)
Q. 근데 왜 같은 글만 4개 보임? 글제목 state 안에 자료들 다 가져오고 싶은데
map함수 파라미터 사용해서 array 안의 모든 자료 꺼내기 (자료 갯수 만큼 꺼내짐)
![](https://blog.kakaocdn.net/dn/beY0go/btrXiPVGrni/CgfIK0d0txhbwdobFcBtIK/img.png)
map함수 안에 파라미터 두 개 쓸 수 있음
![](https://blog.kakaocdn.net/dn/beMokX/btrXlhjNB8b/BTRJCEkKjjIb6grqplJ3x0/img.png)
* i : 0부터 1씩 증가하는 정수, 출력하면 0 1 2 3... 나옴
글제목[i] 하면
글제목 array의 요소들이 인덱싱되어 순서대로 꺼내짐
결론 : 비슷한 html 반복생성하려면 map() 쓰면 됨잼
'Coding > react' 카테고리의 다른 글
[React] <input> 태그 타입 종류, 이벤트 핸들러 (0) | 2023.01.29 |
---|---|
[React] props - 자식이 부모 state 쓰고 싶을 때 (0) | 2023.01.27 |
[React] 동적인 UI 만들기 - 모달창 + 삼항연산자 (0) | 2023.01.25 |
[React] Component : 많은 div들을 한 단어로 줄이기 (0) | 2023.01.21 |
[React] 데이터가 array, object 인 경우 복제, 일부 수정하기(state 변경함수) (0) | 2023.01.18 |