반응형
1. 개요
- map 함수를 알아야 함
- 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌
- 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음
- 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌
[1,2,3].map(function(i){
console.log(i);
})
2. 코드
- 예를 하나 들어봅시다
import {useState} from 'react';
function App() {
let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']);
return (
<div>
{
글제목.map(function(a, b){
return(
<div key={a}>
<h3>글번호 : {b+1}</h3>
<h3>{a}</h3>
</div>
)
}
}
</div>
)
}
- state에 글제목을 여러개 저장하고, map()을 이용해 글 제목만큼 <div>태그를 반복해줌
- 이때, map()의 콜백함수에 매개변수 a와 b가 들어가는데 a는 글제목 state에 들어있는 제목을 순서대로 갖게 됨
- b는 0부터 시작되는 숫자인데 반복횟수만큼 증가함
- 그래서 위 코드를 실행하면 글번호와 글제목이 표시되는 <div>태그가 글제목 state에 들어있는 제목 수 만큼 반복됨
반응형
'코딩 > ReactJS' 카테고리의 다른 글
ReactJS 프로젝트에서 빌드가 뭔지 알아보자 (0) | 2023.03.01 |
---|---|
ReactJS 필수 개념, props 알아보기 (0) | 2023.02.28 |
리액트 프로젝트가 실행안될때(react-scripts 배치파일 어쩌구) (0) | 2023.02.21 |
reactjs로 동적인 UI 만들어보기 (0) | 2023.02.16 |
reactjs에서 component로 편리하게 HTML덩어리 관리하기 (0) | 2023.02.15 |