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;