[React.js] map 함수 / 컴포넌트 응용

자바스크립트의 map 함수를 컴포넌트에 응용하다

---

import React from 'react'
import menuList from "./data/menu.json"
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import 'bootstrap/dist/css/bootstrap.min.css';

const Ex02 = () => {
    console.log(menuList);
  return (
    menuList.map((menu) => (    
    <Card className="text-center" key={menu.id}>
    <Card.Header>{menu.category}</Card.Header>
    <Card.Body>
      <Card.Title>{menu.name}</Card.Title>
      <Card.Text>
        {menu.price}
      </Card.Text>
      <Button variant="primary">Buy</Button>
    </Card.Body>
  </Card>))

  )
}

export default Ex02

1. map 함수

map 함수 코드, 결과 (그림 1)

/*
  map() 함수
   - 배열 내 모든 요소를 각각 접근해서 원하는 형태로 변환한 후 새로운 배열로
     변환해주는 함수
     매개변수 1개만 쓰면 item이고 2번째로 오는 매개변수는 인덱스이다.
   - 문법 : 배열객체.map((item, index) => {}) return 문 위쪽
            {배열객체.map((item, index) => ())} return 문 안쪽

     item : 현재 배열 내 값
     index : 현재 배열 내 값의 인덱스
*/

 map함수는 배열을 첫번째 매개변수로 받는다. 두번째 매개변수는 인덱스이다. map함수는 콜백함수를 활용하는 함수 중 하나인데 forEach 함수와는 다르게 콜백함수에서 리턴한 값을 기반으로 새로운 배열을 만드는 함수이다. map함수에 매개변수로 사용되는 배열의 각 요소를 콜백함수의 매개변수로 사용해서 새로운 배열을 만든다. 기존의 배열은 영향을 받지않고 완전히 새로운 배열이 반환되는 것이다. return문 위쪽과 안쪽에서 콜백함수의 괄호 모양이 다르기 때문에 주의해야 한다. return문 위 쪽에선 { }, 안 쪽에선 ( )

map 정리 (그림 2)

---

2. map함수 컴포넌트 응용

bootstrap의 Card를 사용해서 컴포넌트 응용을 해보겠다. 일단 map함수를 사용하려면 배열이 있어야 한다. JSON형태의 배열을 만들어주려고한다.

data 폴더 생성 (그림 3)

JSON 파일 내부 (그림 4)

그림 1처럼 JSON파일을 보관할 data 폴더를 src 폴더 안에 생성해준다. JSON 형태의 배열은 배열의 각 요소가 객체형태로 되어있다. 각 요소가 각 카드의 정보를 의미한다.

import menuList from "./data/menu.json"

console로 확인한 menuList (그림 5)

JSON 파일을 만든 후 JSON 파일을 사용할 파일에서 import로 불러온다. (그림 2 참조)  'menuList'는 사용자가 임의로 정할 수 있다. 이제 menuList안에 저 JSON 파일의 정보가 그대로 담겨있다고 생각하면 된다. (그림 3 참조)

 

const Ex02 = () => {
    console.log(menuList);
  return (
    menuList.map((menu) => (    
    <Card className="text-center" key={menu.id}>
    <Card.Header>{menu.category}</Card.Header>
    <Card.Body>
      <Card.Title>{menu.name}</Card.Title>
      <Card.Text>
        {menu.price}
      </Card.Text>
      <Button variant="primary">Buy</Button>
    </Card.Body>
  </Card>))

  )
}

 이제 가져온 JSON 형태의 meunList에 map 함수를 적용시킬 차례이다. map에 HTML 문법을 적용할 때 주의 사항이 있다. 바로 각 컴포넌트를 감싸는 태그에 컴포넌트마다 고유한 key 속성을 주어야 한다. 왜냐하면 React에서 이전 DOM트리와 비교하여 새로운 화면을 업데이트 할 때 key를 이용해서 비교하기 때문에 key가 없으면 배열 내 추가/수정/삭제가 정상적으로 작동하지 않는다. map함수의 index를 활용할 수도 있지만, React 공식 문서에서도 권장하지 않는 방법이기 때문에 사용하지 않도록 한다. index는 순서가 불안정한 값이므로 비교시 문제가 발생된다. 

 meunList에 map함수를 사용했고 콜백함수의 매개변수 menu안에 JSON 파일의 배열의 각각의 객체가 담겨있다. 그래서 return에서 객체의 key값을 사용해서 value를 가져오는 방법으로 각 컴포넌트에 값을 넣어준다.

결과 (그림 6)