map

자바스크립트에서 map함수 사용하기

자바스크립트에서는 중괄호 안에서 map이라는 함수를 통해 반복문을 이용할 수 있다.

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

위의 코드를 보자.
콜백함수 소괄호 안에 파라미터를 아무이름이나 입력한다. (저는 a로 입력)
이 a라는 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해준다.
그럼 어레이에 있던 모든 자료가 10씩 곱해져셔 [20, 30, 40]이 된다.

map 함수는 원본 자료형을 변경시키지 않으므로
newArray에는 [20,30,40]이 담겨져있고 원래 어레이에는 [2,3,4]가 담겨져있다.

JSX 안에서 map으로 반복문사용하기

function App (){
  return (
    <div>
      
      ...
      { 글제목.map(function(a){
        return (
        <div className="list">
          <h3>{ a }</h3>
          <p>4월 13일 발행</p>
          <hr />
        </div>
      }) }
    </div>
  )
}

위 처럼 작성하면 글제목이라는 state의 개수만큼 list div가 반복되며
a에는 배열의 state의 인덱스에 맞는 글 제목들이 맞춰서 각각 다른 제목이 출력된다.