MAP()

JavaScript에서의 map()

Array에서 map method는 array 요소만큼 반복하여 map method 영역에 기술된 callback 함수를 반복한다.

map method 예제

let arrTest = [1, 2, 3];
let newValue = 4;
// map은 arrTest 내용을 반복탐색하며 callback 함수를 호출한다.
// parameter는 2개를 첫 번째 parameter는 arrTest의 값, 두 번째 parameter는 현재 반복문 실행 Index를 나타낸다.
arrTest.map( (val, arrIdx) => {
	console.log(`value:${val}, Index:${arrIdx}`);
    // value:1, idx:0
	// value:2, idx:1
	// value:3, idx
})

// 새로운 array에 array의 map을 통해 값을 바꿔 return 하면 바뀐 값으로 array가 생성된다.
let arrTest2 = arrTest.map((val) => { val + 3});
console.log(arrTest2);
// [4, 5, 6]

---

React에서 map()을 활용해 반복되는 UI구성을 단순화 하기

<div className="list">
  <h4>{ articleTitle[0] } <span onClick={ () => { setCntLike(cntLike + 1) } }>👍</span> { cntLike } </h4>
  <p>2월 17일 발행</p>
</div>
<div className="list">
  <h4>{ articleTitle[1] }</h4>
  <p>2월 17일 발행</p>
</div>
<div className="list">
  <h4 onClick={() => { switchModal() }}>{ articleTitle[2] }</h4>
  <p>2월 17일 발행</p>
</div>

위와 같이 동일한 <div></div> 형태가 반복되는 경우 map method를 통해 축약해서 구현할 수 있다.

• articleTitle은 글의 제목을 나타내는 array state임.
• 👍에 정의된 onClick 이벤트는 다른 article에 적용되어도 됨.
• 제목을 클릭했을 때 호출되는 switchModal()도 호출되어도 됨.

아래와 같이 구현한다.

let [articleTitle, setArticleTitle] = useState(['제목1', '제목2', '제목3']); // 제목 array
let [cntLick, setCntLike] = useState(0, 0, 0); // 좋아요 개수

function updateCntLike(idx, value) {
  // cntLike의 특정 부분을 update
  let copy = [...cntLike];
  copy[idx] = value;
  setCntLike(copy);
}

{
  articleTitle.map(function(title, arrIdx) {
    return (
      <div className="list" key={arrIdx}>
        <h4 onClick={() => { switchModal() }}>{ title } <span onClick={() => { updateCntLike(arrIdx, cntLike[arrIdx] + 1) }}>👍</span> {cntLike[arrIdx]} </h4>
      </div>
    )
  })
}