[자바스크립트 기초부터] javascript map 을 알아보자.

map?

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

const testArr = [ 1, 2, 3, 4];

const mapTest = testArr.map( x => x + 2);

console.log(mapTest); // Array [3, 4, 5, 6];

 이런예제로 사용할 수 있습니다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

매개변수는 

callback새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue처리할 현재 요소.

index Optional처리할 현재 요소의 인덱스.

array Optionalmap()을 호출한 배열.

thisArg Optionalcallback을 실행할 때 this로 사용되는 값.

 

이렇게 있습니다.

보통 저의 경우 currentValue, key 값을 많이 사용합니다.

 

특히 API 호출을 할 경우 많이 사용하는데

const test = [ 
    {
      testimg: img,
      name: "테스트1"
    },
    {
      testimg: img,
      name: "테스트2"
    },
    {
      testimg: img,
      name: "테스트3"
    },
    {
      testimg: img,
      name: "테스트4"
    },
    {
      testimg: img,
      name: "테스트5"
    },

  ] 
  // 실제로는 API 를 받아 올 값 지금은 목업데이터를 넣어둠)
  
  return( 
  	<View>
    	{test.map((data, index) => { 
    	<TouchableOpacity style={styles.myGroupStyle} key={index}>
    		<View>
    			<Image source={data.testimg}/>
    		</View>
    		<View>
    			<Text>{data.name}</Text>
    		</View>
    	</TouchableOpacity>
    	)
    	})}
    </View>
   )
   
         

이런식으로 react-native에서 사용합니다.

api 호출 후 return 값을 받아 data를 적용할 때 많이 쓰는 것 같습니다!

그리고 저는 map을 사용할 때 test.map((data, index) => 여기 부분에서 test라는 Array를 data로 key값은 index로 해서 사용합니다. 참고로 key값을 안넣어주면 오류가 나니까 넣는 것을 추천드립니다.