[React]컴포넌트로 반복 작업 줄이기!!

오른쪽 그림과 같은 결과물을 하드 코딩으로 만들면 아래와 같다.

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>연락처</h1>

    <h2>선인장</h2>
    <img
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGIxAMoUfFAvWMucYI44ITA-rxCxt-VvlaJ5QACjYVRCNZyOwHPgVF_T0MRrxIsLjrgdw&usqp=CAU"
      alt="avatar_img"
    />
    <p>010-1234-1234</p>
    <p>b@cactus.com</p>

    <h2>강아지</h2>
    <img
      src="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"
      alt="avatar_img"
    />
    <p>010-8888-8888</p>
    <p>jack@doggy.com</p>

    <h2>고양이</h2>
    <img
      src="https://img.catpre.com/web/catpre/event/popular_keyword_theme/22_pc_main_page_banner_0734.jpg"
      alt="avatar_img"
    />
    <p>+918 372 574</p>
    <p>gmail@kitty.com</p>
  </div>,
  document.getElementById("root")
);

 

현재 연락처에는 선인장, 강아지, 고양이만 있어서 다행이지만 연락처가 추가되면 지금처럼 하드코딩으로 하기에는 무리가 있다!!

이럴때 리액트의 특징 중 하나인 컴포넌트를 사용해서 더 손쉽게 연락처 결과물을 만들어 보자!

---

 

여기서 잠깐! 리액트의 컴포넌트란?

CS에서의 정의는 "독립적인 기능을 수행하는 단위 모듈"이다.
리액트의 컴포넌트는 앱을 이루는 최소한의 단위를 말한다. 그리고 CS의 정의도 리액트 컴포넌트에 충분히 해당하는 말이다.

 

---

우선 반복적인 작업을 대신 해주는 함수를 하나 만들어 보겠다.

function Contact() {
  return (
    <div>
      <h2>선인장</h2>
      <img
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGIxAMoUfFAvWMucYI44ITA-rxCxt-VvlaJ5QACjYVRCNZyOwHPgVF_T0MRrxIsLjrgdw&usqp=CAU"
        alt="avatar_img"
      />
      <p>010-1234-1234</p>
      <p>b@cactus.com</p>
    </div>
  );
}

선인장 연락처를 만들어주는 html 코드를 Contact라는 메서에 넣어주었다. 그리고 렌더링 부분에서 해당 컴포넌트를 호출하면 아래와 같은 결과를 가지게된다.

ReactDOM.render(
  <div>
    <h1>연락처</h1>
    <Contact />
  </div>,
  document.getElementById("root")
);

처음에 반복적인 html 코드를 다 지우고 컴포넌트(<Contact/>)를 넣어주었더니 오른쪽과 같이 선인장 하나가 출력되었다.

 

훨씬 간단해졌지만 아직 문제가 남아있다.

 

내 연락처에는 귀여운 강아지랑 고양이가 있는데 그 녀석들도 같이 출력을 해줘야한다!!!

 

결론적으로는 Contact 컴포넌트에 들어가는 이름, 사진, 전화번호, 이메일을 동적으로 바꾸어 주어야한다.

 

이를 해결하기 위해서는 컴포넌트의 props이라는 속성값을 이용할 수 있다.

 

props는 마치 html 태그에서 사용하는 name, placeholder 같은 속성들이랑 비슷하다고 볼 수 있다.

 

다른 점이라면 props는 내가 원하는 변수이름으로 값을 지정해서 넘겨줄 수 있다는 것이다.

 

아래의 예시를 한번 보자!

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"
    />
  </div>,
  document.getElementById("root")
);

 

기존에 <Contact/> 부분에 props를 설정해준것을 볼 수 있다.

name에는 연락처 이름, img에는 사진 url, tel에는 전화번호 그리고 email에는 상대방의 이메일을 넣어주었다.

 

function Contact(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <img src={props.img} alt="avatar_img" />
      <p>{props.tel}</p>
      <p>{props.email}</p>
    </div>
  );
}

 

그리고 Contact 컴포넌트에는 props라는 파라미터를 받게 변경해주었다. html 영역에서 지정해준

props들이 파라미터에 담아져서 전달된다.

 

기존에 이름, 이미지, 전화번호, 이메일을 다 지우고 파라미터에서 값을 가져오게 코드를 변경해주었다.

return 값이 html 코드이기 때문에 반드시 { }로 변수를 감싸주어야한다.

 

이렇게 변경해도 출력물에는 변화가 없다.

 

이러한 방식으로 컴포넌트 속 변수들을 동적으로 활용할 수 있다.

 

그렇다면 이제 강아지랑 고양이도 같은 방식으로 props를 설정해서 출력해보자!!!

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")
);

 

강아지, 고양이 컴포넌트에도 props를 설정해서 넘겨주면 귀엽고 깜찍한 전화번호부가 완성된다!!

 

물론 아직은 지금도 반복적인 코드들이 많다. 

 

그건 다음 글에서 다뤄보겠다! 그럼 이만.