React - map함수

똑같은 html이 반복적으로 나오면 반복문을 이용해서 쉽게 똑같은 html 을 만들 수 있다
하지만 JSX중괄호 안에서는 for 반복문을 사용할 수 없어서 map()을 사용한다

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

모든 array 자료 우측엔 map()함수를 붙일 수 있다

기능1. array에 들어있는 갯수만큼 코드를 반복실행해준다

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});

-> "1" 3번 출력

기능2. 콜백함수에 파라미터를 아무렇게 작성하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력한다

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

-> 2 3 4 출력

기능3. return 오른쪽에 적으면 array로 담아준다 그리고 map() 쓴 자리에 남겨준다

-> newArray [20, 30, 40] 출력

JSX 안에서 html을 반복생성하고싶으면

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

-> return 자리에 [ <div>안녕</div>, <div>안녕</div>, <div>안녕</div> ] 이 남는다

글제목 3개도 반복문으로 축약 가능하다

지금 프로젝트에 <div className = "list"> 이 부분이 3번 반복되고 있다
이 부분을 map반복문으로 축약하면 될 것 같다!

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

-> 글제목[0]인 여자 코트 추천이 3개 반복된다
(글제목이라는 state도 array자료이기 때문에 map을 붙일 수 있다)

반복되는 HTML에 각각 다른 제목 부여하기

 <h4>{ 글제목[0] }</h4>

지금은 이 코드만 3번 반복되고있는데 우리는 반복문이 돌 때마다

<h4>{ 글제목[0] }</h4>

<h4>{ 글제목[1] }</h4>

<h4>{ 글제목[2] }</h4>

이런 데이터가 나오게 해야한다

아까 배웠던 기능을 이용하여 바꿔보기

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

이렇게 하면 a 자리에 글제목array 내용들이 들어가서 각각 다른 제목을 만들 수 있다

혹은

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

이렇게 만들어도 작동이 된다

map함수는 map(function(a, i){ 이렇게 파라미터 2개까지 작명이 가능하다
첫째 파라미터 a는 array 안에 있던 자료
둘째 파라미터 i 는 0부터 1씩 증가하는 정수
가 되기 때문이다

따봉기능 추가하기

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

(참고) map 반복문으로 반복생성한 html엔 key={i} 이런 속성을 추가해줘야 리액트가 <div>들을 각각 구분할 수 있다

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

(참고) 일반 for 반복문 사용하기
1. html들을 담아 둘 array 자료 만들기
2. 일반 for반복문을 이용해서 반복문 돌리기
3. 반복될때마다 array자료에 <div>하나씩 추가하기
4. 원하는 곳에서 {array자료} 사용하기

function App (){
  
  var 어레이 = [];
  for (var i = 0; i < 3; i++) {
    어레이.push(<div>안녕</div>)
  }
  return (
    <div>
      { 어레이 }
    </div>
  )
}

-> 어레이 함수 <div>안녕</div> <div>안녕</div> <div>안녕</div>
3개 출현

for문법은 JSX안에서 사용할 수 없어서 바깥에서 쓰면 된다!

---

오늘의 숙제

: 좋아요버튼을 개별적으로 각각 증가하게 만들기

(힌트) state가 하나밖에 없고 모든 글제목이 가져다 쓰고있어서 똑같이 따봉이 증가하는 것이다

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

먼저 array를 사용하여 한 변수에 자료 3개를 저장한다 (각각의 state를 주기 위해)

{ 
   글제목.map(function(a, i){
      return (
        <div className="list">
          <h4>{ a } 
            <span onClick={()=>{ ??? }}>👍</span> {따봉[i]} 
          </h4>
          <p>2월 18일 발행</p>
        </div> )
  }) 
}

이렇게 하면 따봉변수에 있던 0 은 각각 보여준다
눌렀을 때가 문제인데...

물음표 안에는
0번째 좋아요 버튼을 클릭시엔 따봉[0] + 1
1번째 좋아요 버튼을 클릭시엔 따봉[1] + 1
2번째 좋아요 버튼을 클릭시엔 따봉[2] + 1
을 해야한다

근데 따봉은 state니까 state변경함수를 써야하고
array 자료이기 때문에 array 자료변경할 때 주의점을 신경쓰면 된다

array자료 수정할 때 주의점 글

<h4> 
  { 글제목[i] } 
   <span onClick={()=>{ 
      let copy = [...따봉];
      copy[i] = copy[i] + 1;
      따봉변경(copy)  
   }}>👍</span> {따봉[i]} 
</h4> 

state가 array 자료형일 경우 원본 보존을 위해 복사를 하고
그것을 수정해서 쓰면 된다고 배웠다

copy[i] = copy[i] + 1;

-> 파란글씨 부분이 배열의 순서이기 때문에 반복문이 돌때 0부터 1씩 증가하도록 i를 넣어주면 된다