[React] 많은 div들을 반복문으로 줄이는 법

for문은 JSX 중괄호 안에서 사용할 수 없기 때문에 map()을 사용해야 한다.

 

js에서 map() 사용하는 방법

모든 array에서는 .map()을 사용할 수 있다. 기본으로 제공해주는 함수임

 

첫번째 기능)

[1,2,3,4,5].map(function(){})     -> 소괄호안에 콜백함수 집어넣어주면 됨. 그러면 콜백함수가 array갯수만큼 반복 실행 됨

 

map() 함수로 console.log(1)이 3번 찍힘

 

 

 

두번째 기능)

map(function(){}) 의 함수 안에 파라미터는 array안에 있던 자료이다.

함수의 파라미터에 a는 array안의 자료가 됨

array의 자료인 1,2,3이 순차적으로 로그 찍힘

 

 

 

세번째 기능)

return 작성하면 array로 담아서 반환한다.

array안에 자료를 return으로 바꿔줌

 

 

이런 map() 함수로 리액트 환경에서 쉽게 반복문 사용 가능함

 

 

이제 진행중인 블로그 프로젝트에서 map() 함수를 사용해보도록 하겠다.

 

 

컴포넌트의 return문 안에 이런식으로 코드를 작성하면 안녕이 3번 랜더링 될것인데
원리를 간단하게 설명하면 map() 함수로 인하여

return문에는 [<div>안녕</div>,<div>안녕</div>,<div>안녕</div>] 이런식으로 array 배열이 있을것임

리액트는 array안에 html을 담아놔도 잘 랜더링 해준다.

그래서 안녕이 3번 랜더링 됨.

 

참고로 html이 길어진다면 소괄호 안에 작성해주면 된다.

 

 

 

 

 

이제 글 제목을 map함수로 반복문을 만들어 보겠음

 

 

array의 자료 수만큼 반복해야하니 useState로 저장해놓은 title을 사용하고,

함수 안의 파라미터를 자유롭게 작명해준 후에 사용 (여기서 a는 array안의 자료가 순차적으로 들어감)

.map()함수로 글 제목이 이렇게 잘 랜더링 된다

 

그리고 또 한가지 응용가능한 방법이 있는데

function() 파라미터에 인자를 두개까지 작명 가능하다.

여기서 작명한 두번째 파라미터는 반복문이 돌 때 마다 0부터 1씩 증가하는 정수이다.

그러므로 아래와 같이 작성해도 글 제목이 순차적으로 잘 랜더링 될 것임.

title[0],title[1],title[2] 인덱스가 i로 인해 랜더링 된다

 

 

 

최종 정리하자면

map()함수로

1. array 자료만큼 내부 코드 실행함

2. return문 안의 내용을 array로 담아서 반환함

3. function() 안에 유용한 파라미터 2개 사용 가능함 (순차적으로 array의 자료가 되는 파라미터, 0부터 1씩 증가하는 정수)

 

 

이런식으로 추가 기능(추천, 모달창) 개발하면 된다.

근데 여기서 추천을 누르면 모든 제목의 추천갯수가 동시에 올라가므로 이것은

혼자 해결해보는것이 숙제 (글로 정리하겠음)