React 반복문으로 HTML 작성하기

https://logical02.tistory.com/32

JavaScript map 함수

React에서 HTML안에는 중괄호를 써서 JavaScript 자료형을 쓸 수 있는데 for이나 while같은 반복문은 사용하지 못한다.

자료형만 쓸 수 있기 때문에 반복을 하고 싶을때는 array 객체 안에 있는 map()함수를 사용하여 반복한다.

 

function App(){
	return (
    	<div>
        	{
            	[1,2,3,4].map(function(a,i){
                	return (<div> {a}번째 반복</div>);
             	});
        	}
        </div>
    );
}

이렇게 하면

 

1번째 반복

2번째 반복

3번째 반복

4번째 반복

 

이런식으로 그 자리에 div 태그들이 여러개 생겨난다.

 

그런데 이렇게 생성한 div태그들은 모두 똑같이 생겼기 때문에 React에서 모두 똑같은 태그로 인식한다.

따라서 아래처럼 key값을 부여해주는게 좋다.

 

function App(){
	return (
    	<div>
        	{
            	[1,2,3,4].map(function(a,i){
                	return (<div key={i}> {a}번째 반복</div>);
             	});
        	}
        </div>
    );
}