[React] map()

map() 함수

• 반복되는 컴포넌트를 렌더링하기 위해 사용
• for문, 반복문 대체
• 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 작성한 코드대로 변환한 후, 새로운 배열을 생성

 

// 1. array 자료 개수만큼 함수 안의 코드 실행
  [1, 2, 3].map(function(){
    console.log('aaa'); // aaa; aaa; aaa;
  })
// 2. 함수의 파라미터는 array 안에 있던 자료
  [1, 2, 3].map(function(e){
    console.log(e); // 1; 2; 3;
  })
// 3. return에 적은 값을 array에 담아줌
  [1, 2, 3].map(function(){
    return 'aaa' // (3) ['aaa', 'aaa', 'aaa']
  })

 

1. map 사용 예시

let [title] = useState(['파스타가 맛있는 가게', '노브랜드 신상 버거: 맥앤치즈버거', '뫄뫄 타코야끼 후기']);

{
  title.map(function(data, i){
    return (
      <div className='list'>
        <h4>{ title[i] }</h4> {/* data = title[i] */}
      </div>
    )
  })
}

 

 

* map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가

<div className="list" key={i}>

- 추가 안해주면 <div>들을 각각 구분하지 못해서 에러가 워닝이 뜸