[React] - 반복문

• 리액트는 중괄호를 활용하는 JSX 문법을 사용하기 때문에 for문을 사용할 수 없다. (중괄호 안에는 함수나 변수만 들어갈 수 있기 때문)
• 대신 array 자료형에 map()이라는 내장 함수를 통해 반복문을 구현한다.

map() 함수 쓰는 법

• array에 들어있는 자료의 개수만큼 반복을 진행한다.

let array [1,2,3,4];
array.map(function() {
	console.log(1); // 콘솔창에 1이 4번 출력됨
});

• 콜백함수의 소괄호 안에 아무 파라미터를 정해주면, 해당 파라미터는 array에 있는 자료들을 출력한다.

let array [1,2,3,4];
array.map(function(a) {
	console.log(a); // 콘솔창에 1,2,3,4 출력됨
});

• return한 값이 array에 담긴다.

let array = [1,2,3,4];
array.map(function(a){
	return a*10; // array = [10,20,30,40]
});

JSX 안에서 html 반복 생성하기

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

• 배열 [1,2,3] 자료 개수만큼 반복 진행
• <div>안녕</div> 을 array에 3번 담게 되는데, 이걸 html로 미리보기를 하면

<div>안녕</div>
<div>안녕</div>
<div>안녕</div>

이렇게 보이기 때문에 map으로 html 반복 생성이 가능하다.

• map function의 인수를 2개 준다면?

map(function(a, i){})

-> a = array 안에 있던 자료, i = 0부터 1씩 증가하는 정수
-> i를 array의 인덱스로 사용할 수 있음

• map 반복문으로 반복 생성한 html 태그에는 key={i} 속성을 추가해줘야 함 (그래야 리액트가 <div>들을 각각 구분할 수 있음)
  <div className="list" key={i}>

for문을 쓰고 싶다면?

1. 따로 함수를 하나 생성한다.
2. 함수 안에 원하는 값을 담을 array 자료형 변수를 생성한다.
3. 함수 안에 for문을 생성해 2에서 생성한 array에 값들을 추가한다.
4. 반복문이 끝나면 array를 return한다.
5. 원하는 곳에서 위에서 만든 {function명()}형태로 데이터바인딩을 하여 사용한다.
   (만약 함수를 새로 생성하지 않고 그냥 array만 생성했다면, {array}로 값을 사용한다.)

function repeatFunction(){
  
  var array = [];
  for (var i = 0; i < 3; i++) {
    array.push(<div>안녕</div>)
  }
  return (
    <div>
      { array }
    </div>
  )
}