[React] jsx 반복문 / for 반복문

리액트에서는 html을 반복문으로 반복시킬 수 있다.

 

map() 함수 개념

array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용.

 

//자바스크립트 표현
var arr = [2, 3, 4];
arr.map(function(a){
	return a * 2
});
//(3) [4, 6, 8]

arr 내에 있는 데이터들을 파라미터 a에 넣어서 모두 2씩 곱해줄 수 있다.

map은 유사 반복문이다.

 

React에서 반복문 쓰는 법 : .map() 

우선 JSX 중괄호 내에서 for을 사용할 수 없다. map()은 사용가능하다.

 

예제 1

  return (
    <ul>
      {users.map(user => (
        <div id={user.id}>
          {user.username} ({user.name})
        </div>
      ))}
    </ul>
  );

 

예제 2

{
글제목.map(function(글){
	return(
    	<div className="list">
        <h3> {글}<span onClick={()=>{따봉변경(따봉 + 1)}}>👍</span> {따봉}  </h3>
        <p> 2월 19일 발행</p>
        <hr/>
        </div>
    )
    })
}

 

 

 

React에서 for반복문 사용하기

for 반복문을 사용하고 싶을 땐 JSX 중괄호가 아닌 함수 안에서 사용한다.

array에 html을 추가하는 방식.

array를 return으로 뱉어내고

 

function 반복된 UI(){
	var 어레이= [];
    for(var i=0; i<3; i++){
    어레이.push(<div>안녕</div>);
}

return 어레이