📖Map(data,i)
- JSX안에서 특정 HTML요소를 반복하여 나타낼 때 사용하는 함수
(JSX문법에서는 for와 같은 반복문과 if와 같은 조건문 사용이 불가하기 때문) - 기능1(갯수만큼반복) : array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행
- 기능2(순차적반복) : 파라미터를 아무렇게나 작명하면 그 파라미터는 array안에 저장되어있는 자료를 하나씩 출력해줌
- 기능3(반복문처럼 순서출력) : 두 번째 파라미터(i)는 자료의 크기와 순서를 저장함
📝기능구현 예제
✏️ 기능1(갯수만큼반복) : arr에 들어있는 자료갯수만큼 그 안에 있는 코드 반복실행
예제1
var arr = [1,2,3];
arr.map(function(){
console.log(1);
});👉🏻 console.log(1)이 arr의 갯수(3)만큼 3번 실행됨
예제2
var arr = [1,2,3];
function App(){
return(
<div>
{ //JSX에서 JS코드 실행시 중괄호 붙여줘야 함
arr.map(function(){
return(<div>안녕</div>)
})
}
</div>
)
}👉🏻'div 안녕'이 arr안 자료의 갯수(3)민큼 3번 실행됨
<div>안녕</div>
<div>안녕</div>
<div>안녕</div>✏️ 기능2(순차적반복) : 파라미터를 아무렇게나 작명하면 그 파라미터는 arr안에 저장되어있는 자료를 하나씩 출력
var arr = [1,2,3];
arr.map(function(a){ //파라미터 아무거나(a) 전달
console.log(a); //파라미터 a를 사용 (a는 arr안의 자료를 뜻함) → 1, 2, 3
});👉🏻 함수에 전달된 파라미터 a를 통해 arr안의 자료인 1,2,3이 순차적으로 콘솔창에 출력됨
✏️ 기능3(반복문처럼 순서출력) : map의 두 번째 파라미터(i)는 자료의 크기/순서를 저장함
function App (){
return (
<div>
(생략)
{
글제목.map(function(a, i){
//a : 글제목 array의 데이터를 모두 저장 (기능2참고)
//i : 글제목 array의 크기/순번 을 저장 (ex. 0,1,2... 반복문처럼 작동함)
return (
<div className="list" key={i}>
//key : 생성되는 각각의 div를 구분하기 위함(key={i}는 FM문법이라고 생각하면 됨)
<h4>{ 글제목[i] }</h4>
//글제목 array의 i번째 값을 나타내줌
</div> )
})
}
</div>
)
}💡동작원리
- map을 사용하여 위 예제들 처럼 a에 '글제목' array의 데이터를 모두 저장함
(기능2에서 다뤘던 임의의 파라미터를 의미함, 여기에 데이터가 저장되는 것임) - i에 크기/순서를 저장하여 h4태그에 글제목의 i번째에 해당하는 요소를 출력하고,
(h4가 포함된 div태그에 key값으로 두 번째 파라미터 i, 즉 순서를 부여하여
각 div태그를 구분하여 저장함) - i=0일때 h4태그에 글제목[0], div태그에 key=0인 요소를 출력,
i=1일때는 모든값이 1인 요소를 출력하는 방법으로
순서와 데이터를 순차적으로 출력하는 반복문처럼 작동됨
📚정리
1. 노파라미터 : array의 갯수만큼 실행코드 반복출력
arr.map(function(){실행코드})
2. 첫 번째 파라미터 : array의 자료를 하나씩 출력
arr.map(function(a){a를 이용한 실행코드})
3. 두 번째 파라미터 : array의 순서/크기와 데이터를 순차적으로 출력
arr.map(function(a,i){i를 이용한 실행코드})
arr[i], key={i} 등으로 응용가능
keynene