[React] html 반복 생성하기 (feat. map)

같은 html 반복 생성하는 법

• 보통 for 로 반복문 쓰는데,
  React JSX 중괄호 안에서 못쓰니까...🙄

  ➡️ map() 을 써야한다

---

map의 뭐냐면

• array에 딸린 함수
• array.map(callbackFunc(){})
• array 자료 length만큼 callbackFunc 를 실행함

  소괄호 안에 들어가는 함수 ➡️ 콜백함수 라고 함

• 콜백함수 안의
  • 첫 번째 파라미터 : array 값 하나하나
  • 두 번째 파라미터 : index
• 콜백함수에서 return 을 쓰면 array 로 담아줌
• 예시

    ['a','b','c'].map((a, i) => {
        console.log(a); // a b c 한번씩 출력
        return a +' 완료'; // ['a 완료', 'b 완료', 'c 완료'] 배열 return
    })

---

리액트에선 반복문을 쓸 때 map을 사용함👀

• 이렇게 쓴당✅

    {
        [1,2,3].map(function(){
            return (<div>안녕</div>)
        })
    }

• 위 map()의 결과로,
  [<div>안녕</div>,<div>안녕</div>,<div>안녕</div>] 이런 식의 배열이 남음

  ➡️ 리액트는 array 안에 html 담아놔도 잘 보여준다

• 보통 state 에 map() 실행

---

map() 정리

• array.map((값, 인덱스)=>{내부코드})
• array의 length만큼 내부코드 반복 실행
• return 값을 array로 담아줌 ➡️ 결과값의 length는 array와 동일
• 유용한 파라미터 2개 (값, 인덱스) 사용가능

---

반복문으로 html 생성시 Warning 메시지

• key 가 필요함
• 반복해서 html을 생성할때는,
  html 마다 다른 숫자 key 값을 가져야한다

  key = {i} 이런 식으로 key 값을 넣어주자👀