JavaScript - map으로 Array Data Rendering

JavaScript로 코드를 작성하다보면, Array 형태의 Data를 순차적으로 Rendering해야하는 상황을 만나게 된다.

그때는 map을 사용해서 Rendering할 수 있다.

import React from 'react';
import { View, Text } from 'react-native';

const MyFunctionalComponent = (props) => {
  const data = props.data;
  const arraySize = data.length;

  return (
    <View>
      <Text>Array size: {arraySize}</Text>
      {data.map((item, index) => {
        return (
          <Text key={index}>{item}</Text>
        );
      })}
    </View>
  );
};

export default MyFunctionalComponent;

위에 예제 코드를 살펴보면, data가 array형태로 props를 통해 전달받은 것이다.

해당 data의 각 element들을 Rendering할 때는 위 처럼 map(item,index)로 쓴다. 

여기서 index는 array의 index이다. 

보통 Rendering할 때는 key={index}를 써준다.