리액트 반복문 map 함수

리액트 반복문 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 ({글제목}) }) };

4. 컴포넌트 Component 반복하기

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

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

let [글제목, 글제목변경] = useState(['남자코트', '시안 여행', '리액트 연습']); {글제목.map(function(){ return }) }; function DIV(){ return ( 안녕 DIV ) }

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

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

let [글제목, 글제목변경] = useState(['남자코트', '시안 여행', '리액트 연습']); {글제목.map(function((a, i)){ return }) }; function DIV(props){ return ( {props.글제목} ) }

반응형

from http://reitsplusrich.tistory.com/50 by ccl(A) rewrite - 2021-09-20 03:01:31