리액트에서는 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()은 사용가능하다.
공식
{
반복할데이터.map(() => {return<HTML>})
}
예제
파라미터에 넣은 '글'은 array 안에 있던 하나하나의 데이터기 때문에
html에 {글}을 넣어주면 array가 반복되면서 출력된다.
{
글제목.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 어레이본문에서 {반복된 UI()} 로 출력할 수 있다.
반응형
'Frontend > React' 카테고리의 다른 글
| [React] 제목을 누를 때 각각 다른 UI가 나오도록 하기. (0) | 2021.07.22 |
|---|---|
| [React] props : 부모가 가진 state를 자식에서 사용하고 싶을 때 (0) | 2021.07.22 |
| [React] IF문 삼항연사자/ 클릭하면 동작하는 UI 창 만들기 (0) | 2021.07.22 |
| [React] ReactDom.render (0) | 2021.07.22 |
| [REACT] Component (0) | 2021.07.21 |
