React에서 리스트(배열) 타입의 데이터를 사용하여 여러개의 컴포넌트나 태그로 jsx 파일에서 출력, 렌더링하는 방법을 알아봅니다.



# React 리스트 타입 데이터 여러 개로 출력하는 방법, map
리액트 앱에서는 다른 프레임워크에서 사용하는 반복 프로퍼티, 디렉티브 등이 존재하지 않습니다. 예를들어 v-for 또는 @ngFor 를 사용할 수 없죠.

그렇다면 어떻게 하면 리스트 타입의 컬렉션 데이터를 여러 개의 컴포넌트 또는 태그로 변환해 웹페이지에 출력할 수 있을까요? 아래에서 자세히 알아봅니다.


! react 리스트 데이터에 map() 메소드 사용하기
자바스크립트의 map()은 배열에 사용하며 반복하여 내부 값을 모두 순환합니다. 즉 배열 타입의 데이터에 map()을 사용해 출력할 수 있죠. 대부분의 react 에서는 반복되는 렌더링을 구현하기 위해서 map()을 많이 씁니다.

Array.map(function)

이때 주의할 점은 react에서는 key 프로퍼티를 반드시 추가해 주어야 합니다. 그렇게 하지 않으면 콘솔창에 에러 메시지가 출력됩니다. 유일한 값을 key에 추가하도록 합니다.

그럼 한 가지 예제를 만들어 자세히 알아보겠습니다. 만약 아래와 같이 state에 데이터가 존재하는 경우...
constructor(props) {
  super(props);
  this.state = {
    sites : [
      { name: 'web' },
      { name: 'is' },
      { name: 'free' },
    ];
  }
}

위 변수 mySite를 사용하여 아래와 같이 구현할 수 있습니다.
render() {
  const siteItems = this.state.sites.map((site, index) => {
    return (
      <MediaItem key={site.index} title={site.name} />
    )
  });

  return (
    <Row>
      { siteItems }
    </Row>
  )
}

위 코드를 살펴보면 state의 배열값 sites에 map()을 사용하여 내부의 item을 return하여 모두 출력한 예제입니다. 이때 key 프로퍼티를 사용하였고 값으로 name을 주었습니다.

이처럼 react에서 map()을 사용해 리스트 타입을 반복 출력하는 방법을 알아보았습니다.