[React] - 반복문 map()

react 하기전 ejs 사용할때에는 for으로 돌렸는데 jsx에서는 map()함수를 이용해야한다.

(굳이 for 반복문을 할 순 있는데 코드도 길고 이젠 map() 더 편함)

 

const Test = () => {

    let [title, setTitle] = useState(['바나나', '딸기', '사과'])

    return (
        <div>
            {
                title.map((item, index) => {
                    return <div key={index}>
                        <p>{item}</p>
                    </div>
                })
            }
        </div>
    );
}

title을 반복문으로 돌려보았다.

첫인자로는 val 값을 임의로 작명할 수 있고, 두번째는 값의 길이만큼 0부터 자동 증가한다.

그리고 map() 돌릴 때 항상 최상위 부모에 key 값을 넣으라하는데

여기에 index 값이나 item의 id 값이 있다면 넣어주면 된다.