[React] map함수를 이용해 반복되는 JSX 줄이기

자바스크립트 map 함수 쓰는 법 

JSX 중간중간 중괄호 열고 { 변수명 } 넣어 사용하였다.

그럼 반복문도 중괄호 안에서 { for (){} } 이렇게 집어넣을 수 있지 않을까라고 생각할 수 있지만

{} 중괄호안에는 변수, 함수 형태만 입력 가능하다.  

그래서 중괄호 안에서 쓸 수 있는 map 이라는 반복문을 이용한다. 

반복문은 아니고 array에 붙일 수 있는 일종의 내장 함수이다. 

 

array 자료형이 하나 있다고 치자. 

array 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때가 가끔 있다. 

그럴 때 쓰는 문법이 바로 map 이라는 내장 함수이다.

 

let 어레이 = [2,3,4];
어레이.map(function(a){
  return a * 10
});

 

콜백 함수 소괄호 안에 파라미터를 아무 이름이나 입력해주면 (저는 a로 입력)

이 a라는 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해주는 역할이다. 

그리고 a에 10을 곱하든 20을 곱하든 원하는 작업을 시켜주면 된다. 

그럼 어레이에 있던 모든 자료가 10씩 곱해져셔 [20, 30, 40] 이 된다. 

참고로 콜백함수에 화살표 함수를 사용할 수 있다.

JSX 안에서 map으로 반복문을 돌리고 싶으면

<div> 태그를 서너 개 생성하려고 한다. map을 이용해서 만들어보자.

글 제목이라는 state 개수에 맞게 3개만 한번 생성해보자.

let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집', '프론트엔드'] );

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      { 
      글제목.map(function(a){
        return (
        <div className="list">
          <h3>{ a }</h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) 
      }
    </div>
  )
}

 

위 코드대로 작성하면 글제목글 제목 Array에서 배열 인덱스 하나가 a에 저장되고 a 그대로 <h3>{a}</h3> 제목으로 만들어진다. 이후 글 제목 안에 있는 모든 인덱스들도 똑같이 같은 과정을 반복한다.

그러면 제목이 '남자 코트 추천', '강남 우동 맛집', '프런트엔드' 각각 만들어질 것이다.