JSX 안에는 for문을 넣을 순 없다.
JSX의 {}안에는 변수, 함수만 가능
map이라는 배열 내장함수 이용가능
cf) map함수는 원본 자료형을 변형시키지 않아서
보통 새로운 변수에 담아서 사용
반복문 쓰는법
{반복할데이터.map( ()=>{return<HTML>})}
var array = [2, 3, 4];
var newArray = 어레이.map(function(a){// map 안에 콜백함수를 넣고, a에는 배열의 데이터 하나하나를 의미함. array의 갯수만큼 실행됨
return a * 2
});
console.log(newArray);
/// array [2,3,4]
/// newArray [ 4, 6, 8]이렇게 출력하게 하려면?
{ 글제목[0] }
{ 글제목[1] }
{ 글제목[2] }
function App() { let [글제목, 글제목변경] = useState(['논산', '강남', '동대문']); return ( { 글제목.map( (a) => { /* a는 글제목 안에 있던 하나하나의 데이터 */ return ( <div className="list"> <h3> {a} </h3> //글제목에 담긴 데이터 하나하나 출력됨 (총3번) <hr/> </div>) ) } )
map함수는 원본 자료형을 변형시키지 않아서
보통 새로운 변수에 담아서 사용한다
일반 for 반복문을 쓰고싶다면?
따로 함수를 만들어서 써야함
1. 따로 일반 함수를 만들고
2. 함수안에 HTML을 담을 array 자료를 하나 생성합니다.
3. 함수안에서 for 반복문을 이용해 array내에 HTML을 추가해줍니다.
4. 완성된 array를 return 해줍니다.
5. 그리고 함수를 원하는 곳에 { 함수명() } 데이터바인딩 해주시면 됩니다.
function App (){
function 반복된UI(){
var 어레이 = [];
for (var i = 0; i < 3; i++) {
어레이.push(<div>안녕</div>)
}
return 어레이
}
return (
<div>
HTML 잔뜩있는 곳
{ 반복된UI() }
</div>
)
}TIP) 함수만들기 귀찮으니 코딩꼰대가 아니라면 그냥 map을 쓰도록 한다
Front-Dev