[JSX] map()

function Cart() {
    const food = [과자, 음료, 디저트, 과일]
    return (
        <>
            {food.map(item, index) => {...}}
        </>
    )
}

JSX 문법에서는 명령형인 for, if 등을 사용할 수 없다

그래서 반복문을 구현할 때 map을 주로 사용한다

 

map은 2개의 파라미터를 가져올 수 있다

map(item, index)를 보면 알 수 있다

item = 배열의 값을 가져옴

index = 0,1,2... index 값을 가져옴

 

아래는 예시다

function Cart() {
    const food = [과자, 음료, 디저트, 과일]
    return (
        <>
            {food.map(item, index) => {
                <h3>{index}번째 음식은?</h3>
                <p>{item}이다!</p>
            }}
        </>
    );
};

// 1번재 음식은?
// 과자이다!

// 2번째 음식은?
// 음료이다!

// ...