리액트(React)-반복문사용:map

리액트에서 반복문 사용하는 법

JSX에서 중괄호 내에 for 문은 사용불가능

중괄호 안에는 변수, 함수만 넣을 수 있다.

map 함수를 통해 반복문 구현 가능

{ map() } 은 반복문은 아니고 array에 쓸 수 있는 일종의 내장 함수.

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

위와 같은 모양이며, 위의 예는 각 요소에 10을 곱해주는 반복문

콜백함수의 파라미터에 아무 이름이 넣어주는데, 그 파라미터는 배열 안의 각각의 값을 의미한다.

그리고 map함수는 원본을 변형시키지 않아서 새로운 변수로 만들어준다.

---

JSX 안에서 map()함수를 통해 반복문 만들기

글제목 이라는 state에 맞추어 <div>안녕</div>태그를 3개를 생성하기

  let [글제목, 글제목변경] = useState([
    "마포구 국밥 맛집",
    "남자 코트 추천",
    "코카콜라 제로 할인",
  ]);
  
  function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      { 글제목.map(function(){
        return (<div>안녕</div>)
      }) }
    </div>
  )
}

실행하면 `<div>안녕</div> 태그가 3개 생성된다.

1. 원하는 재료에 map 함수 붙이면 그 재료의 개수만큼 반복문 만들 수 있고

2. 반복하고 싶은 HTML요소를 return 뒤에 붙인다.

그러면 기존 방식보다 훨씬 적은 코드로 만들 수 있다.

---

map 함수 안의 파라미터는 대입한 자료의 각 요소를 의미한다고 했었다.

그렇기 때문에 파라미터를 잘 이용해서 각각 다른 요소를 위치에 맞게 넣어줄 수 있다.

무슨 말이냐면,

<div className="list">
          <h3>{ 글제목[1] }</h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>

을 map으로 돌린다면

글제목[1], 즉 "남자 코트 추천" 만 3개 생길 것.

파라미터를 잘 이용한다면,

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

a 라고 이름 붙인 파라미터(이름은 아무거나 상관없음) 자리에는 각 요소가 들어가기 때문에 글제목의 0,1,2,번째 인덱스가 차례대로 대입될것이라는 것.

---

만약 for문을 쓰고 싶다면?

그냥 일반 함수를 새로 만들어서 중괄호{} 안에 그 함수를 넣는 방식을 써야한다.

1. 일반 함수를 새로 만든다.
2. 빈 array를 하나 만든다.
3. 함수 안에서 for문을 이용해 HTML요소를 추가한다.
4. 완성된 array를 return 뒤에 넣는다.
5. 완성된 함수를 원하는 위치에 넣어준다(데이터바인딩. {} 안에 넣는거 말하는거)

예)

function App (){

  function 반복된UI(){
    var 어레이 = [];
    for (var i = 0; i < 3; i++) {
      어레이.push(<div>안녕</div>)
    }
    return 어레이
  }
  return (
    <div>
      HTML 잔뜩있는 곳
      
      { 반복된UI() }
    </div>
  )
}