[React] map함수 이용하여 반복문 작성하기

컴포넌트를 하나 작성한 후 그 컴포넌트를 원하는 개수만큼 붙여넣는 것도 프로그램을 실행하는 과정에서 코드적인 오류는 발생하지 않는다. 하지만 똑같은 코드가 무한히 반복됨으로써 비효율적인 결과를 초래할 수 있고, 무엇보다 하드코딩을 하지 않는 백엔드로부터 DB를 받아서 코드를 작성하는 입장에서는 불필요하다.

이럴 때 자주 쓰이는 것이 map함수이다. 그럼 이번 글에서는 map함수를 어떻게 작성하는 지에 대해 알아보도록 하자.

참고로 이 글은 '덕꾸: 행복하게 덕질하자'라는 멋쟁이 사자처럼 중앙해커톤 프로젝트 일부이다.

먼저 페이지 안에 index.jsx 이외에 우리가 받아올 정보를 담고 있는 칸을 받아올 수 있는 컴포넌트를 작성해야 한다. 이것을 PulchaseAlbum.jsx라고 하겠다. 이 안에는 앨범 제목과 옵션명, 가격, 그리고 수량에 관한 정보를 담고 있다.

1) map component 선언하기

const PurchaseListMap = (props) => {
  return props.Lists.map((v) => (
    <PurchaseAlbum
      key={v.Aibum}
      Img={v.Img}
      Title={v.Title}
      Option={v.Option}
      Price={v.Price}
      Count={v.Count}
    />
  ));
};

우선 prop로 정보를 받아오는 정도는 알 것이다. 이 컴포넌트의 return 값은 후에 받아롤 List의 이름을 적어준다. props.Lists.map으로 받아주는데 여기서 (v)는 필수로 작성해주어야 한다.
그리고 밑에 다른 컴포넌트로 작성한 <PurchaseAlbum /.> 을 불러와 key값, 그리고 받아야 할 내용들을 선언해준다.

2) default 값 리스트 선언하기

const Lists = [
    {
      Img: "http://www.akbobada.com/home/akbobada/archive/akbo/img/202208031533045.jpg",
      Title: "Attention - NewJeans",
      Option: "NewJeans 1st EP 'New Jean'",
      Price: "₩11,000",
      Count: "1",
    },
  ]

리스트 안에 기본값으로 띄워줄 값들을 선언해 준다.

그렇다면 저 Img, Title, Option 같은 값들을 어떻게 받아올 것인가...
그것은 PurchaseAlbum 컴포넌트에서 받아올 수 있다. 이제 그 컴포넌트 파일로 넘어가보자.

const PurchaseAlbum = (props) => {
	 <AlbumCover Img={props.Img} />
   	 <Typography bold14>{props.Title}</Typography>
      .
      .
      .
  }

map component에서 선언한 변수를 변수={props.변수}로 선언하면 된다.

참고로 이미지 파일을 불러오는 컴포넌트를 참고하면 다음과 같다.

const AlbumCover = styled.div`
width: 79px;
height: 107px;
display: flex;
border-radius: 6px;
background-size: cover;
background-image: url(${(props) => (props.Img ? props.Img : "none")});
`;

background-size: cover 을 이용하면 정해진 사이즈에 정확히 이미지가 들어간다.
background-image: url(${(props) => (props.Img ? props.Img : "none")});

완성본