-
map : html반복문React 2022. 3. 7. 12:58
map 함수는 원래 array내의 데이터에 똑같은 처리를 할 때 사용한다. 예를 들면,
var array = [2,3,4] var newArray = array.map(function(a) { return a * 2 } //보통 새 변수에 담아서 사용
이렇게 사용해 a에 모두 2씩 곱해 array란 배열을 4,6,8로 만든다.
이런 원리로, map으로 반복문을 쓰는 원리는
반복할데이터.map( () => { return <HTML> } ) } 또는 반복할데이터.map(function () {return <HTML>})로 쓰면 된다.
let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']); { 글제목.map(function(a) { return ( <div className="list"> //맥에선 파라미터에 i를 쓰고 여기에 key={i}를 쓰면 warning안남 <h3> { a } </h3> <p>2월 19일 발행</p> <hr /> </div> ) }) }
이렇게 사용하며, 글제목이란 state어레이의 데이터 수 3번만큼 반복되며, state의 어레이 대신 [1,2,3]으로 사용해 3번 반복하게 해주세요라고 쓸 수 있다. function(a)의 a는 글제목안의 데이터를 뜻한다. 그래서 {a}로 쓰면 위의 데이터가 나온다. 그리고 두번째 파라미턴 반복문이 돌 때의 수 즉, 0, 1, 2 ~~ 를 뜻하므로, 반복문이 돌때 숫자가 커짐을 이용할 때 사용한다.
만약, 일반 for반복문을 쓰려면
function App (){ function 반복된UI(){ var 어레이 = []; for (var i = 0; i < 3; i++) { 어레이.push(<div>안녕</div>) //빈 어레이에 push로 3번 반복해 추가한다. } return 어레이 } return ( <div> HTML 잔뜩있는 곳 { 반복된UI() } </div> ) }
이런 식으로, 사용하면 return 쪽에 안녕이란 div세개가 추가되어 생성된다.
'React' 카테고리의 다른 글
input다루기 (0) 2022.03.08 props 자식이 부모의 state 사용할 때 (0) 2022.03.07 if문 대신 삼항연산자 (0) 2022.03.05 많은 div을 한 단어로 줄이는 component문법 (0) 2022.03.05 버튼을 만들고 클린된 횟수 count (state 변경) (0) 2022.03.04