map 함수 : 많은 div들을 반복문으로 줄이고 싶을 때

모든 array 자료 오른쪽에는 map()을 붙일 수 있습니다

 

 

 

map 함수 쓰는법

 

기능1.

var 어레이 = [2,3,4];
어레이.map(function(){
 // 이 안의 코드를 어레이원소 갯수만큼 실행해주세요~
 console.log(1)
});

어레이에 들어있는 원소 갯수만큼 {}의 코드를 반복실행해준다

저러면 진짜로 console.log(1) 3번 실행됨 

 

 

기능2.

var 어레이 = [2,3,4];
어레이.map(function(a){
 // 어레이 안에 있는 원소들을 하나씩 출력해주세요~
 console.log(a)
});

콜백함수 안에 파라미터(a)를 작명하면, 그 파라미터는 어레이의 원소들을 하나씩 출력해줍니다

저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 

 

 

 

기능3.

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
 // return 오른쪽 값들을 []로 담아주세요
 return a * 10
});

console.log(newArray)

return 뒤에 오는 애들은 []어레이로 담아준다

newArray는 [20, 30, 40] 이 출력됨

 

 

 

 

 

 

 

 

리액트 중괄호 안에서 html을 반복생성하고 싶으면 map을 이용함

function App(){
  return(
    <div>
    {
      [1,2,3].map(function(){
      return (<div>안녕</div>)
      })
    }
</div>
  )
}

//[<div>안녕</div>,<div>안녕</div>,<div>안녕</div>] 그럼 이게 남습니다.

근데 이걸 html로 미리보기 띄워볼 땐 

<div>안녕</div>
<div>안녕</div>
<div>안녕</div>

이렇게 보입니다. 

그래서 map을 써도 html 반복생성이 가능한 것임 

 

 

 

 

그러면 이전에 만든 글제목 html을 반복생성 해보겠음

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(){
          return (
          <div className="list">
            <h4>{ 글제목[0] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

이렇게 하면 글제목 3개가 생성되긴 하는데 모두 제목이 같음 ㅠ

제목을 다르게 설정해보자

 

{
      글제목.map(function(a){
      return(
      <div className='list'>
      <h4>{a}</h4> 
      <p>2월 17일 발행</p>
      </div>
      )
      })
    }

map의 콜백함수에 파라미터 a를 넣고, h4태그에도 {a}를 넣어줌

그러면 글제목의 array에 있는 원소가 하나씩 출력됨

이렇게 하면 각각 다른 글제목이 3개 생성됩니다. 성공 

 

 

array.map(function(a, i)

map의 콜백함수에 인자를 2개 넣어도 되어요

이렇게 파라미터를 2개까지 작명 가능한데 

첫번째 파라미터(a)는 array에 있는 원소 하나씩을,

두번째 파라미터는(i)는 0부터 1씩 증가하는 정수를 가리킵니다

 

{
      글제목.map(function(a,i){
      return(
      <div className='list'>
      <h4>{글제목[i]}</h4> 
      <p>2월 17일 발행</p>
      </div>
      )
      })
    }

 

{
      글제목.map(function(a,i){
      return(
      <div className='list'>
      <h4>{글제목[i]}<span onClick={()=>{따봉변경(따봉+1)}}>👍🏻</span> {따봉}</h4> 
      <p>2월 17일 발행</p>
      </div>
      )
      })
    }

전에 만들었던 따봉기능도 추가해보았는데  문제가 하나 있습니다

따봉 한개를 클릭했는데 모든 따봉들이 +1 이 되는군요..

 

 

 

let [따봉,따봉변경] = useState([0,0,0]);

{
      글제목.map(function(a,i){
      return(
      <div className='list' key={i}>
      <h4>{글제목[i]}
      <span onClick={()=>{
        /* 변경하려는 state자료가 array니까 한번 복사를 해주고 그 복사본을 써줘야댐 */
        let copy =[...따봉]; //[0,0,0]
        copy[i] = copy[i]+1; //각 자리 값에다가 +1을 해줌
        따봉변경(copy)
        }}>👍🏻</span> {따봉[i]}
      </h4> 
      <p>2월 17일 발행</p>
      </div>
      )
      })
    }

변경하려는 state자료가 array니까 한번 복사를 해주고 그 복사본을 써줘야 댐. 왜냐구요? 

array를 그냥 쓰면  겉보기에는 내용물이 변해서 바뀐 것처럼 보여도 같은 주소를 쓰고 있기 때문입니다.

그래서 기존 state로 인식해서 새로운 state로 바꿔주지 않는 거예요.

결론은 state 변경할땐 array나 object면 복사본 쓰자~!

여기서 copy는 따봉이랑 주소는 다르지만, 겉보기에 뱉어내는 값은 같아요

 

 

 

 

 

 

+

 

(참고) map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해야합니다. 

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

그래야 리액트가 <div>들을 각각 구분할 수 있어서 그렇습니다. 없으면 워닝띄워줌