〰 map

〰 map

❗  map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

자바스크립트 map 함수 쓰는 법

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      { 변수명.map(function(){
        return (<div>안녕</div>)
      }) }
    </div>
  )
}

❗  반복된 HTML에 각각 다른 제목을 부여하고 싶다면

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      { 변수.map(function(a){
        return (
        <div>
          <h3>{ a }</h3>
          <p>날짜</p>
          <hr />
        </div>
      }) }
    </div>
  )
}

❗  a라는 파라미터는 map이 반복될 때마다 하나하나의 데이터들을 의미한다.

일반 for 반복문을 쓰고싶다면

1. 따로 일반 함수를 만들고
2. 함수안에 HTML을 담을 array 자료를 하나 생성합니다.
3. 함수안에서 for 반복문을 이용해 array내에 HTML을 추가해줍니다.
4. 완성된 array를 return 해줍니다.
5. 그리고 함수를 원하는 곳에 { 함수명() } 데이터바인딩 해주시면 됩니다.

function App (){
  function 반복된UI(){
    var 어레이 = [];
    for (var i = 0; i < 3; i++) {
      어레이.push(<div>안녕</div>)
    }
    return 어레이
  }
  return (
    <div>
      HTML 잔뜩있는 곳    
      { 반복된UI() }
    </div>
  )
}

❗  map을 쓰면 콘솔창에 에러가 뜨는 이유

key={} 라는 속성떄문에 리액트는 반복문 돌린 HTML 요소엔 꼭 key={}를 적으라고 권장합니다.
key={} 안에는 반복문이 돌 때마다 0,1,2,3... 이렇게 하나씩 증가하는 변수같은걸 넣어주시면 됩니다.

function App (){
  return (
    <div>
      ...
      { 변수.map(function(a, i){
        return (
        <div key={i}>
          내용
        </div>
      }) }
    </div>
  )
}