map()으로 컴포넌트 출력 반복 줄이기!

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다.

 

하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다.

 

그러면 어쩐단 말이야!

 

이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자!

 

ReactDOM.render(
  <div>
    <h1>연락처</h1>
    <Contact
      name="선인장"
      img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGIxAMoUfFAvWMucYI44ITA-rxCxt-VvlaJ5QACjYVRCNZyOwHPgVF_T0MRrxIsLjrgdw&usqp=CAU"
      tel="010-1234-1234"
      email="b@cactus.com"
    />
    <Contact
      name="강아지"
      img="https://s3.ap-northeast-2.amazonaws.com/elasticbeanstalk-ap-northeast-2-176213403491/media/magazine_img/magazine_262/%EC%8D%B8%EB%84%A4%EC%9D%BC.jpg"
      tel="010-8888-8888"
      email="ack@doggy.com"
    />
    <Contact
      name="고양이"
      img="https://img.catpre.com/web/catpre/event/popular_keyword_theme/22_pc_main_page_banner_0734.jpg"
      tel="010-1111-1111"
      email="gmail@kitty.com"
    />
  </div>,
  document.getElementById("root")
);

 

위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다.

같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!!

 

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

 

무슨 일이 일어났길래 이렇게 코드가 간소해진 건지 지금부터 천천히 알아보자.

(이번에는 결과물에 스타일을 입혔지만 이 글에서는 따로 설명하지 않겠다...)

 

위 코드가 간단한 이유는 컴포넌트화를 시켰기 때문이다.

ReactDOM.render(<App />, document.getElementById("root"));

이 부분을 살펴보면 App이라는 컴포넌트만 들어가 있다. 

 

그렇다!!!

 

모든 건 App 컴포넌트에 들어있다. 그리고 또 다른 역할을 하는 컴포넌트들이 App 컴포넌트에 들어가 있는 구조다!

 

좀 더 구조적으로 컴포넌트를 사용해서 역할을 분배한 거다.

 

 

 

우선 프로젝트 구조를 한번 살펴보자.

 

index.js

-> 최종적인 렌더링이 이루어진다.

 

App 컴포넌트

-> 완성된 연락처 html 코드를 반환한다.

-> contacts.js로부터 연락처 정보를 가져온다

-> 받아온 연락처 정보를 Contact 컴포넌트에 전달

 

Contact 컴포넌트

-> 연락처 하나하나를 찍어내는 기능을 한다.

 

Avatar 컴포넌트

-> 프로필 이미지를 설정해주는 컴포넌트

 

Detail 컴포넌트

-> 연락처에서 전화번호, 이메일을 넣어주는 컴포넌트

 

 

먼저 App 컴포넌트를 살펴보자!!

import React from "react";
import Contact from "./Contact";
import contacts from "../contacts";

function App() {
  return (
    <div>
      <h1 className="heading">연락처</h1>

      <Contact
        name={contacts[0].name}
        img={contacts[0].imgURL}
        tel={contacts[0].phone}
        email={contacts[0].email}
      />
      <Contact
        name={contacts[1].name}
        img={contacts[1].imgURL}
        tel={contacts[1].phone}
        email={contacts[1].email}
      />
      <Contact
        name={contacts[2].name}
        img={contacts[2].imgURL}
        tel={contacts[2].phone}
        email={contacts[2].email}
      />
    </div>
  );
}

export default App;

 

연락처 정보를 contacts.js에 배열로 담아주고 App 컴포넌트에서 contacts.js를 import해와서 위와 같은 코드가 완성되었다.

 

역시나 컴포넌트를 3번이나 반복해서 작성해주었다.

 

contacts.js에 있는 연락처 정보 배열을 map()을 사용해서 코드를 수정해주면 아래처럼 바꿀 수 있다.

 

import React from "react";
import Contact from "./Contact";
import contacts from "../contacts";

function createContact(contact) {
  return (
    <Contact
      name={contact.name}
      img={contact.imgURL}
      tel={contact.phone}
      email={contact.email}
    />
  );
}

function App() {
  return (
    <div>
      <h1 className="heading">연락처</h1>
      {contacts.map(createContact)}
    </div>
  );
}

export default App;

 

Contact 컴포넌트를 하나씩 적어주기보단 createContact이라는

메서드를 만들어서 3개의 연락처를 간단하게 찍을 수 있었다.

 

결과 또한 처음과 같이 원하는 대로 나왔다.

{contacts.map(createContact)}

이 부분을 약간 설명하자면

 

contacts의 길이만큼 반복하면서 createContact 메서드를 수행하는 것이다.

 

그리고 반복을 할 때마다 createContact 메서드에는 contacts의 한 개의 요소가 파라미터로 전달된다.

 

첫 번째 반복에는 선인장의 정보가, 두 번째 반복에는 강아지 그리고 마지막에는 고양이의 정보가 전달되고 Contact 컴포넌트는 전달받은 정보로 연락처 정보를 완성한다.

 

오늘은 map()과 컴포넌트를 이용해서 반복적인 출력을 간단하게 만드는 걸 알아보았다!!