티스토리 뷰

반응형

 ★ map( )의 3가지 기능 ★ 

1. array의 요소 개수만큼 코드 실행 

2. array의 요소 꺼내기 

3. array의 요소 갯수만큼 자료 담기

 

 

 

 

1.  array 요소 갯수 만큼 코드 실행
[1,2,3].map(function(){
  console.log(1);
})

배열의 요소가 3개 이므로console.log(1)이 3번 실행

 

 

 

2. 함수안에 파라미터 넣어서 array의 요소 꺼내기 
[1,2,3].map(function(a){
    console.log(a);
})

//화살표 함수
[1,2,3].map(a => console.log(a))

array의 요소인 1,2,3 이 출력

 

 

 

 

3. array에 요소 개수만큼 자료 담기

 

return 뒤에 작성한 코드는

array 안의 요소 개수만큼 반복 실행됨

[1,2,3].map(function(a){
  return '12312312'; 
})

 

 

 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>
   )
 })
}

 

 

 

* map반복문으로 생성한 html엔  key{i}  속성 추가해야 됨

추가해야 리액트가 <div>들을 각각 구분할 수 있음

 

 

Q. 글개수만큼 html 생성하려면?

1. state 초기 값 가져다 쓰면 됨

 

 

2. 글제목 state도 array이므로 arr 자리에 글제목state 넣기

 
 

 

Q. 근데 왜 같은 글만 4개 보임? 글제목 state 안에 자료들 다 가져오고 싶은데

map함수 파라미터 사용해서 array 안의 모든 자료 꺼내기 (자료 갯수 만큼 꺼내짐)

 

 

 

map함수 안에 파라미터 두 개 쓸 수 있음

* i : 0부터 1씩 증가하는 정수, 출력하면 0 1 2 3... 나옴

 

글제목[i] 하면

글제목 array의 요소들이 인덱싱되어 순서대로 꺼내짐

 

 

결론 : 비슷한 html 반복생성하려면 map() 쓰면 됨잼

 

반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함