React Component 함수처럼 재사용하는 방법

2023-03-22

안녕하세요.

지난 시간에는 React에서 여러개의 element를 생성하는 방법에 대해서 알아봤습니다.

이번 시간에는 한개의 함수를 React Component로 변환해보고 그 React Component를 함수처럼 재사용하는 방법에 대해서 알아보겠습니다.

우선 하나의 message 함수를 만들고 여러번 재사용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const message = () => (
      <>
        <h1>안녕하세요.</h1>
      </>
    );

    const element = (
      <>
        {message()}
        {message()}
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>
</body>
</html>

이렇게 하면 "안녕하세요."라는 문구가 두번 출력됩니다.

이번에는 함수에 인자를 넣어서 재사용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const message = (name, title) => (
      <>
        <h1>{name} {title}님, 안녕하세요. </h1>
      </>
    );

    const element = (
      <>
        {message("문동은", "대리")}
        {message("주여정", "부장")}
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>
</body>
</html>

이렇게 하면 "문동은 대리님, 안녕하세요."와 "주여정 부장님, 안녕하세요."라는 문구가 출력됩니다.

이번에는 함수 대신에 React Component로 만들어서 재사용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const message = (name, title) => (
      <>
        <h1>{name} {title}님, 안녕하세요. </h1>
      </>
    );

    const Message = ({name, title}) => {
      return (
        <>
          <h1>{name} {title}님, 안녕하세요. </h1>
        </>
      );
    }

    const element = (
      <>
        {message("문동은", "대리")}
        {message("주여정", "부장")}
        <Message name="문동은" title="사원" />
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>
</body>
</html>

이렇게 message 함수를 Message React Component로 만들어 재사용할 수 있습니다.

React Component에서 인자값이 중괄호로 감싸져 있는 부분은 props라고 부릅니다.

그리고 함수일 때는 함수명이 소문자로 시작하고 React Component일 때는 함수명이 대문자로 시작하는 점 유의해야 합니다.

그 이유는 React Component를 기존의 html 태그와 구분하기 위해서입니다.

또한 중괄호 안에는 props의 속성이 들어가므로 children 도 인자로 받을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    
    const Message = ({name, title, children}) => {
      return (
        <>
          <h1>{name} {title}님, 안녕하세요. </h1>
          {children}
        </>
      );
    }

    const Good = () => <h3>좋은 아침입니다.</h3>

    const element = (
      <>
        <Message name="문동은" title="사원">
          <Good />
          <Good />
        </Message>
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>
</body>
</html>

이렇게 하면 React Component 안에 다른 태그도 함께 넣어서 사용할 수 있습니다.

이렇게 React Component를 만들어서 재사용할 수 있습니다.

감사합니다.

< 목록으로 돌아가기