map 함수

map 함수 사용

---

array 자료형에는 map() 함수를 사용할 수 있다. 

 

var array = [2, 3, 4];

array.map(function(){
	console.log(1);
})

1. array에 들어있는 자료의 갯수만큼 그 안에 있는 코드를 반복 실행해준다. 

console.log(1); 세 번 실행

 

 

var array = [2, 3, 4];

array.map(function(a){
	console.log(a);
})

2. 콜백함수에 파라미터는 배열을 순회하며 모든 자료를 하나씩 출력해준다. 

콘솔창에 2, 3, 4 출력

 

 

 

var array = [2, 3, 4];

var newArray = array.map(function(a){
	return a * 10;
})

console.log(newArray)

3. map 함수 안에서 return 해주면 배열로 담아준다. 

newArray 는 [20, 30, 40] 담긴다. 

 

 

 

 

 

 

JSX 안에서 HTML 반복 생성하기

---

리액트 중괄호 안에 반복되는 html 이 존재하여 반복 생성하고 싶을 때 map 함수를 이용하면 편리하다. 

 

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>Hi</div> )
        }) 
      }
    </div>
  )
}

map 함수가 배열안의 원소의 개수만큼 반복되기 때문에 <div>Hi</div> 가 세번 반복되어 세개의 div 가 만들어진다. 

 

같은 HTML 을 여러개 만들고 싶을 때 map 함수를 사용해주면된다. 

 

map 함수 안의 데이터들을 데이터바인딩 해주고 싶으면 

 

function App (){
  return (
    <div>
      (생략)
      { 
        title.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

위와 같이 사용해주면 title 배열 안의 데이터들을 h4 태그에 데이터바인딩 해줄 수 있다. 

 

 

for 반복문을 사용하고싶다면,

 

1. html 들 담아둘 array 자료 하나 만듬

2. for 반복문 이용해서 반복문 돌림

3. 반복될 때마다 array 자료에 <div> 하나씩 추가

4. 원하는 곳에서 {array 자료} 사용 

 

function App(){
	var array = [];
	for (var i=0; i<3; i++{
		array.push(<div>Hi</div>)
	}
	return (
		<div>
			{array}
		</div>
	)
}

위와같이 사용 

for 문법은 JSX 안에서 사용할 수 없어서 밖에 사용해주어야 한다.