1 - 05. Element 찍어내기

패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.

동일한 엘리먼트의 반복

<div id='root'>
  <h1>Hi</h1>
  <h3>Bye</h3>
  <h1>Hi</h1>
  <h3>Bye</h3>
  <h1>Hi</h1>
  <h3>Bye</h3>
</div>

위와 같은 구조의 HTML이 있다고 하자. <h1>과 <h3>의 쌍이 3번 반복되는 형태인데, 이를 리액트를 통해 만들고자 하면, 총 6개의 엘리먼트를 일일이 생성하여 넣어주는건 매우 귀찮고 지루한 일이다.

<script type="text/babel">
  const $root = document.getElementById("root");
  const paint = () => (
    <>
      <h1>Hi</h1>
      <h3>Bye</h3>
    </>
  );

  const $element = (
    <>
      {paint()}
      {paint()}
      {paint()}
    </>
  );

  ReactDOM.render($element, $root);
</script>

똑같은 엘리먼트를 하나하나 생성하는 행동을 피하기 위해 반복되는 <h1><h3>의 JSX를 반환해주는 함수 paint를 선언하였다. 해당 함수를 3번 호출하여 담아주는 것으로 위와 똑같은 구조를 렌더링할 수 있다.

유사한 엘리먼트의 반복

그러나 내용이 바뀌거나 class 또는 id같은 어트리뷰트가 조금씩 다른 엘리먼트라면 위와 같은 방법은 사용하지 못한다. 그렇다면 달라지는 내용을 변수로 받아 JSX로 넘겨주면 된다.

<script type="text/babel">
  const $root = document.getElementById("root");
  const paint = (title, description) => (
    <>
      <h1>{title}</h1>
      <h3>{description}</h3>
    </>
  );

  const $element = (
    <>
      {paint("Good", "good")}
      {paint("Bad", "bad")}
      {paint("So so", "so so")}
    </>
  );

  ReactDOM.render($element, $root);
</script>

h1태그와 h3태그에 매번 다른 내용을 담아주기 위해 각각의 내용을 title, description 변수로 받아 JSX 안에 넣어주었다. 이러면 완전히 동일하지않은 엘리먼트라도 하나의 함수로 반환하여 렌더링할 수 있다.

컴포넌트

위에서 사용한 paint 함수를 조금 변형시켜보자. 첫글자를 대문자로 바꾸고, 인자들을 하나의 객체로 묶어준 다음, $element에 넣어주는 형태도 이전과는 다르게 작성한다.

<script type="text/babel">
  const $root = document.getElementById("root");
  const Paint = ({title, description}) => (
    <>
      <h1>{title}</h1>
      <h3>{description}</h3>
    </>
  );

  const $element = (
    <>
      <Paint title="Good" description="good" />
      <Paint title="Bad" description="bad" />
      <Paint title="So so" description="so so" />
    </>
  );

  ReactDOM.render($element, $root);
</script>

Paint처럼 데이터를 가진 하나의 props를 전달받아 리액트 엘리먼트를 반환하는 함수 또는 클래스를 컴포넌트라고 한다. 즉 리액트는 기존에 존재하는 Html tag와 다르게 대문자로 시작하는 태그를 사용자 정의 컴포넌트로 작성된 엘리먼트로 해석하며, JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 인자인 props로 전달한다.

<script type="text/babel">
  const $root = document.getElementById("root");
  const Paint = ({ title, description, children }) => (
    <>
      <h1>{title}</h1>
      <h3>{description}</h3>
      {children}
    </>
  );

  const Soso = (
    <>
      <h1>So so</h1>
      <h3>so so</h3>
    </>
  );

  const $element = (
    <Paint title="Good" description="good">
      <Paint title="Bad" description="bad" />
      {Soso}
    </Paint>
  );

  ReactDOM.render($element, $root);
</script>

이와 같이 다른 JSX 엘리먼트나 컴포넌트를 children으로 전달받아 반환할 수 있다.