map()

자바스크립트에 map이라는 함수가 있다.
모든 array 자료에 map() 함수를 붙일 수 있다.

1. array에 들어있는 자료 갯수만큼 그 안에 있는 코드를 반복 실행해준다.

let arr = [1,2,3];
arr.map(function () {
	console.log(1)
})

consoloe.log(1)이 3번 실행 되는 걸 볼 수 있다.

2. 콜백함수에 파라미터를 넣으면 그 파라미터는 해당 array 안에 있는 모든 자료를 하나씩 출력해준다.

let arr = [1,2,3];
arr.map(function (a) {
	console.log(a)
})

3. return 오른쪽에 뭐 적으면 array로 담아줍니다.

그리고 map() 쓴 자리에 남겨줍니다.

그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 한다.

newArray는 [10, 20, 30] 이 출력된다

let arrMap = [1,2,3];
let newArrMap = arrMap.map(function (a) {
    return a * 10;
});
console.log(newArrMap);

map() 활용하기

기존에 나는 div를 3개를 만들어놓았다.

let [title, changeTitle] = useState(['bitcoin is good', '으아아아', 'mina coin go up!']);

let [likeCountFirst, changeCountFirst] = useState(0);
let [likeCountSecond, changeCountSecond] = useState(0);
let [likeCountThird, changeCountThird] = useState(0);

<div className="list">
          <span> 글 번호 {arrayNum[0]}</span>
          <h3 style={titleStyle} onClick={() => {setModal(modal == true ? false:true)}}>{title[0]} <span onClick={ () => {changeCountFirst(likeCountFirst + 1)} }>👍</span> {likeCountFirst} </h3>
          <p>10월 31일</p>
          <hr/>
      </div>

      <div className="list">
          <span> 글 번호 {arrayNum[1]}</span>
          <h3 style={titleStyle} onClick={() => {setModal(!modal)}}>{title[1]} <span onClick={ () => {changeCountSecond(likeCountSecond + 1)} }>👍</span> {likeCountSecond}</h3>
          <p>10월 31일</p>
          <hr/>
      </div>

      <div className="list">
          <span> 글 번호 {arrayNum[2]}</span>
          <h3 style={titleStyle} onClick={() => {setModal(modal == true ? false:true)}}>{title[2]} <span onClick={ () => {changeCountThird(likeCountThird + 1)} }>👍</span> {likeCountThird}</h3>
          <p>10월 31일</p>
          <hr/>
      </div>

이렇게 되면 html 코드가 길어지면서 보기가 너무 힘들어진다.

우선 map() 함수를 활용해서 간단히 작성해보자

{
          title.map(function(a, i) {
          return <div className="list" key={i}>
            <span onClick={() => {setModal(modal == true ? false:true)}}> 글 번호 {i}</span>
            <h3 style={titleStyle} > 
              {a}
              <span>👍</span>
            </h3>
            <p>10월 31일</p>
            <hr/>
          </div>
        })
      }

파라미터로 배열의 데이터를 받아서, 해당 데이터(제목)를 출력해주면서 state에 보관되어있는 자료들을 다 꺼내주었다.

여기서 한가지 또 문제점
이 코드 위에있는 코드를 보면 내가 likeCount를 게시글의 갯수만큼 상태를 만들어서 보관하고있었다.
이렇게 되면 만약 게시물이 100개 200개가 되면 한계가 존재할 것이고, 배열로 만들어서 똑같이 각각의 게시물의 likeCount에 적용이 될 수 있도록 만들어보자.

function increaseLikeCount(index){
    let copyCount = [...likeCount];
    copyCount[index] += 1;
    changeCount(copyCount);
}


{
          title.map(function(a, i) {
          return <div className="list" key={i}>
            <span onClick={() => {setModal(modal == true ? false:true)}}> 글 번호 {i}</span>
            <h3 style={titleStyle} > 
              {a}
              <span onClick={ () => {increaseLikeCount(i)} }>👍</span> {likeCount[i]}
            </h3>
            <p>10월 31일</p>
            <hr/>
          </div>
        })
      }

increaseLikeCount라는 함수를 따로 만들어 적용 시켰다.
react에서 array, object의 상태는 원본을 보존하는 것이 좋은데, 우선 deep copy로 원본을 copy한 다음, copy한 복사본에다가 버튼을 클릭할 때 마다 count가 1씩 증가하게 두었다.