React map : div를 반복문으로 축약

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

기능 1

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
}); // 1이 3번 나옴
//array에 들어있는 자료갯수만큼 코드 반복실행해줌

기능 2

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
}); // 2 3 4 나옴
//파라미터 작성하면 어레이 안에있던 자료 하나씩 출력해줌

기능 3

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray) // [20,30,40]
//return 오른쪽에 뭐 적으면 array로 담아주고 map() 쓴 자리에 남겨줌

---

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

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

이렇게 쓰면 div 안녕 div 가 3 개나 생성됨

어레이 안의 자료 갯수 만큼 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>
  )
}

근데 이렇게 하면 똑같은 글제목 3 개 반복되는데요?

---

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

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

여기선 안보이는데 글제목 state에 array로 여러가지 글제목 들어있음

map함수에 a 파라미터 부여하고 여기서 a는 array안의 값을 하나씩 뽑아주니까 h4태그에 a 넣어준거임

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

이 방법도 있음 파라미터를 a,i 두 개 쓰는건데 i는 0부터 1씩 증가하는 정수를 뜻하는데

그렇다면 글제목 어레이의 [i] 번째 를 뜻하니 똑같이 뽑히는건 당연.

---

전에 만들었던 따봉기능도 추가해보면

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

근데 이렇게 하면 아무 글제목 눌렀을때 다른 글제목 따봉갯수도 증가하는데요..

---

개별적으로 따봉 증가하게 하려면

let [따봉,따봉변경] = useState([0,0,0]) // state를 각각 만들어주고
{ 
   글제목.map(function(a, i){
      return (
        <div className="list">
          <h4>{ 글제목[i] } 
            <span onClick={()=>{
   			let copy = [...따봉]; // 독립적인 array 만들어주고
     		copy[i] = copy[i]+1;
     		따봉변경(copy)
   			}}>👍</span> {따봉[i]} 
          </h4>
          <p>2월 18일 발행</p>
        </div> )
  }) 
}

state가 하나로 이루어졌기 때문에 다같이 증가했던거고 state를 여러개로 쪼개 각각 부여한다면

개별적으로 증가하게 되네요 그리고 어레이 수정하는거니까 copy 해줘야겠죠