본문 바로가기
IT/React

For루프 예제

by 골든크랩 2022. 9. 23.
728x90
반응형
import React, { useState } from 'react';

function Fort1(props) {

    const [fruitList] = useState(["딸기", "배", "사과", "포도", "수박", "망고", "오렌지"]);

    //모던스크리브가 배열에 forEach, map, reduce 함수를 추가하고
    //forEach 배열의 요소마다 출력과 관련된 함수를 매개변수로 전달
    //map은 매개변수로 콜백함수 - 반환값이 있는 콜백함수

    return (
        <div>
            <h1>과일목록</h1>
            <table>
                {
                    fruitList.map( (item, index) => {
                        return (
                            <tr key={index}>
                                <td>{index}</td><td>{item}</td>
                            </tr>
                        )
                    })
                }
            </table>
        </div>
    );
}
export default Fort1;
728x90
반응형

'IT > React' 카테고리의 다른 글

useEffect() 함수  (0) 2022.09.23
For 예제2 - 배열에 목록 추가하기  (0) 2022.09.23
props, useState, 계산기 예제  (0) 2022.09.23
useState 함수 사용예  (0) 2022.09.23
JSX 문법  (0) 2022.09.23

댓글