React에서 map 사용하기

반복되는 html ui를 반복문으로 축약 할 수 있다.

 

반복문으로 축약하기 전에 javascript 문법 map을 다시 살펴보고 가자

**map() 사용법

[1,2,3].map(function(){
	코드~~
})

array 뒤에 .map()을 붙여주고 뒤에 콜백함수 function()을 붙여주면 

1.function 안에 적은 코드를 array 갯수 만큼 반복 해 준다.

function안에 작성 한 1이라는 숫자가 array 갯수만큼 3번 반복 되는 것을 확인 할 수 있다.

 

2. function에 파라미터를 지정 해 주면 파라미터는 array에 담겨 있던 데이터로 꽂힌다.

콘솔창을 확인 해 보면 파라미터를 작성 했기 때문에 array 안에 1,2,3이 순서대로 출력 된 것을 확인 할 수 있다.

 

3. return을 추가하면 return 뒤에 작성 된 자료를 array에 담아주고 array 갯수만큼 반복 해 준다.

그리고 return 뒤에 작성 할 때에는 반드시 return 옆에 작성 해야한다. 시작을 줄 바꿈해서 시작하면 에러가 발생된다.

 

{
	[반복 할 갯수].map(function(){
    	retunrn 반복내용
    })

}

이런식으로 작성 해 주면 되고 여러 태그들을 사용 할 경우에는 태그들을 () 로 묶어주면 된다.