리액트 반복문 map 함수

1. 자바스크립트 map 함수 쓰는 법

 

array(어레이) 자료형을 하나 만들고, 콜백함수(function)을 넣으면 map 안의 코드가 array 자료의 갯수만큼 반복된다.

이렇게 하면, 234234234 이렇게 [2, 3, 4] 안의 데이터가 붙어서 3번 출력된다.

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

 

 

2. 자바스크립트 map 함수 쓰는 법 2

 

어레이 안에 있는 자료에 대해 전부 10 곱해서 출력하려면, 콜백함수 소괄호 안에 파라미터를 아무거나(a) 입력하고, a*10을 return 해 준다. 

[20, 30, 40] 이 출력된다.

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

 

 

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

 

글제목 array에 3개의 데이터가 저장되어 있다.

자바스크립트에서와 비슷하게, 코드를 작성하면 된다. 

이렇게 하면 글제목 array에 있는 3개의 데이터가 3번(array 갯수만큼) 반복된다.

let [글제목, 글제목변경] = useState(['남자코트', '시안 여행', '리액트 연습']);

{글제목.map(function(){
	return (<div>{글제목}</div>)
	})
};

 

4. 컴포넌트 Component 반복하기

 

먼저 array를 만들어주고 map 함수에서 return에 만든 컴포넌트(DIV)를 넣어준다.

그리고 물론 컴포넌트도 따로 만들어줘야 한다. 그러면 안녕 DIV 가 3번(state의 갯수만큼) 출력된다.

let [글제목, 글제목변경] = useState(['남자코트', '시안 여행', '리액트 연습']);

{글제목.map(function(){
	return <DIV/>
	})
};


function DIV(){
	return (
    	<div className="container">
        	<div>안녕 DIV</div>
        </div>
    )
}

 

5. 데이터 바인딩 - array의 각각의 데이터를 보여주기

 

array[0], arrya[1], array[2] ... 의 데이터를 나눠서 반복문에서 보여주려면...

let [글제목, 글제목변경] = useState(['남자코트', '시안 여행', '리액트 연습']);

{글제목.map(function((a, i)){
	return <DIV 글제목={글제목[i]} i={i}/>
	})
};


function DIV(props){
	return (    
    	<div className="container">
        	<div>{props.글제목}</div>
        </div>
    )
}