React Map 예제

Map 함수 이해하기

Map 함수는 React에서 제공하는 함수는 아니며 Javascript 언어에서 사용할 수 있는 함수이다.
Map함수를 사용하면 콜백 함수를 이용해 각각의 배열 요소를 호출해서 그 값을 변환할 수 있게 해준다.
React예제로 Map을 확인하는 이유는 React에서 어떠한 데이터를 반복적으로 렌더링하거나 컴포넌트를 렌더링할 때 Map함수를 많이 사용함으로,
이번 예제를 통해 Map함수에대해 자세히 알아보도록 한다

✏️리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환이 가능하다 실제로 리액트에서 배열은 게시글, 리스트, 피드를 표시하는데에 자주사용된다

Map 함수 사용법

arr.map(callbackFunction(currentValue, index, array), thisArg);

• map 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를 원하는 규칙에 따라 변환한 다음 새로운 배열을 생성한다.
  
• callback function을 작성할 때 맨 앞의 인자는 현재 배열(arr) 내의 값들을 의미하며, 두 번째 인자는 현재 배열 내 값의 인덱스를 의미하고, 마지막 인자는 현재 배열을 의미한다.
  
• thisArg는 callbackFunction 안에서 사용할 this 레퍼런스를 의미한다.

*key속성을 지정하지 않은 기존 데이터 목록에 새로운 데이터를 추가하면 리액트는 새로운 아이템을 어디에 추가,삭제,변경할지를 모른다 따라서 성능적으로 비효율적인 결과를 얻게되어 key속성은 꼭 사용하도록 하자

React 예제를 통해 Map 사용해보기

먼저 임시배열(dummyList)을 만들어서 데이터를 전달하여 그 데이터를 렌더링하는것부터 시작하도록 한다 예제로는 쇼핑몰 아이템을 렌더링하는것으로 App.js, ShopList.js 두개의 파일로 테스트를 진행한다

---

App.js

import './App.css';
import ShopList from "./ShopList"

const dummyList = [
  {
    id: 1,
    author: "선풍기",
    content: "첫번째",
    emotion: 1,
    created_date: new Date().getTime()
  },
  {
    id: 2,
    author: "가스레인지",
    content: "두번째",
    emotion: 2,
    created_date: new Date().getTime()
  },
  {
    id: 3,
    author: "모니터",
    content: "3번째",
    emotion: 3,
    created_date: new Date().getTime()
  }
]

const App = () => {
  return (
    <div className="App">
      <ShopList shopList={dummyList}/>
    </div>
  );
}

export default App;

---

ShopList.js

const ShopList=({shopList})=>{
    return (
    <div className="ShopList">
        <h2>쇼핑리스트</h2>
        <h4>{shopList.length}개의 아이템이 있습니다.</h4>
        <div>
            {shopList.map((it)=>(
                <div key={it.id}>
                    <div>작성자: {it.author}</div>
                    <div>내용: {it.content}</div>
                    <div>감정: {it.emotion}</div>
                    <div>작성시간(ms): {it.created_date}</div>
                    <hr />
                    <br />
                </div>
            ))}
        </div>
    </div>
    );
};

export default ShopList;