반복 실행(map, for)

map

['a','b','c'].map(function(a, i){
    console.log(a); // a b c 출력(array 값)
    console.log(i); // 0 1 2 출력(index)
});

[1,2,3].map(function(){
    return <div>a</div> // [<div>a</div>, <div>a</div>, <div>a</div>] 출력
});

• JS 기본 문법인 map 함수를 사용하면 array의 요소들을 하나씩 반복하여 꺼내 사용/변경할 수 있다
• return 사용 시 return 값으로 각 array 요소를 변경, 반환해준다

function App() {
    let [title, setTitle] = ['title1', 'title2', 'title3'];

    return (
        {
            title.map(function(a, i) {
                return (
                    <div className="list" key={i}>
                        <h4>{ title[i] }</h4>
                        <h4>{ a }</h4>
                    </div>
                )
            })
        }
    )
}

• map 함수의 특성을 활용하여 html 태그를 title 요소만큼 반복 생성 해줄 수 있으며, title 값을 데이터 바인딩할 수 있다
• 반복 생성되는 html tag는 고유의 key 값을 갖도록 권장하는데(없을 경우 console warning이 뜸), index i 값을 활용할 수 있다

for문

function App() {
    var arr = [];
    let [title, setTitle] = useState(['title1', 'title2', 'title3']);

    for (var i=0; i < title.length; i++) {
        arr.push(
            <div className="list">
                <h4>{title[i]}</h4>
            </div>
        )
    }

    return (
        { arr }
    )
}

• for문을 사용해 html을 반복 생성하고 싶다면 위와 같이 return() 바깥에서 빈 어레이에 html 구문을 저장한 뒤 어레이를 반환해주면 된다