[React] JSX 안에서 반복문 : map()

map 함수를 이용한 JSX 내 반복문

JSX 내에서는 for문을 사용할 수 없다. map()함수를 이용하여 반복문을 사용할 수 있다.

map() 안에 콜백함수에는 파라미터를 2개까지 사용할 수 있는데,
첫번째 파라미터는 해당 array 의 자료,
두번째 파라미터는 해당 array의 index번호다.

import './App.css';
import { useState } from 'react';

function App() {

  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']);
  let [like, setLike] = useState([0,0,0]);

  return (
    <div className="App">
      <div className="black-nav">
        <h1>Blog</h1>
      </div>
      {
        title.map((item, idx)=>{ return(
          <div className="list" key={i}>
            <h4>
              { title[idx] }
              <span onClick={ ()=>{ 
                let copy = [...like];
                copy[idx]++;
                setLike(copy)
              } }>좋아요 { like[idx] }</span>
            </h4>
            <p>2월 17일 발행</p>
          </div>
        ) })
      }
    </div>
  )
}

export default App;