[React] map 사용하기.

 

반복문으로 같은 html 축약하는 방법.

 

Map 

 

모든 array 자료 뒤에다가 map 을 붙일 수 있다

map을 쓸 때 콜백함수를 쓰는데

 

여기서 콜백함수란 소괄호 안에 함수를 집어넣는것을 콜백함수라고 한다.

 

앞에 선언된 Array 개수 만큼 함수가 실행된다.

함수 안에 임의의 변수 파라미터를 넣어주면

 

그 변수는 해당 함수 안에서 array 값들을 갖게된다.

 

return에 특정한 값을 담아주면 array에 담아줌.(array 개수만큼

.

보통 반복문의 경우 for  을 쓰는데 return 문 {} 안에서는 map을 쓴다.

약간 이런느낌으로 <div>안녕</div> 가 3번 반복된다고 생각하면 된다.

 

이 안녕 위치에 

반복되어 출력되길 원하는 부분을 넣어주면 

반복되어 출력하는 모습을 확인 할 수 있다.

 

이 기능을 이용하면!!

현재 블로그 글 갯수만큼 html을 생성하는 것이 가능하다.

글 제목들을 가지고 있는 array 를 map 앞에 붙여주면 해당 갯수만큼 return 문 안의 html 이 출력되어 나온다.

 

이렇게 결과값을 반복 했을 때 html 에는 글제목[1]에 들어있는 값들만 반복되어 보일 것이다.

 

function 안에 파라미터를 글제목[1] 자리에 넣어주면 array 에 들어있는 데이터 값이 순서대로 출력된다.

 

 

Map 뒤의 함수 파라미터는 2개를 넣을 수 있는데 첫번째는 해당 array 의 정보값을 가지고 있고

 

두번째 파라미터는 정수 0부터 1씩 증가하는 정수이다.

 

 이 기능을 이용해서 이렇게해도 array 안의 데이터 값을 출력이 가능하다.

 

 

map 함수를 이용해서 좋아요가 각자 증가하게끔 코드를 짜세요!

 

일단 map 함수의 첫번째 파라미터는 해당 어레이의 값들이 나오고

그 다음 파라미터는 정수로 0,1,2 순으로 1씩 증가한다.

 

일단 배열의 값은 loveIt을 변화시키기 위해서는

setLoveIt이 새로운 값임을 받아들이게 하기위해

 

새 변수에 {...loveit} 을 담아주고

순서대로 들어간 loveIt의 두번째 파라미터를 이용해 새로운 변수에 담아준 후에

setLoveIt에 변수의 주소값을 담아줘야 한다!

 

 

 

 

 

 

출처 : 코딩애플 React 강의 8강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.