JSX 문법으로 정의된 React Component를 JS 함수처럼 재사용하는 방법

2023-03-23

안녕하세요.

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

이번 시간에는 JSX 문법으로 정의된 React Component를 JS 함수처럼 재사용하는 방법에 대해서 알아보겠습니다.

지난 시간에 다음 코드와 같이 JSX 문법으로 정의된 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, children}) => {
      return (
        <>
          <h1>{name} {title}님, 안녕하세요. </h1>
          {children}
        </>
      );
    }

    const element = (
      <>
        <Message name="문동은" title="사원">
          반갑습니다.
        </Message>
      </>
    );

    ReactDOM.render(element, rootElement);

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

이번에는 정의된 React Component를 JS 함수처럼 사용해 보겠습니다.

<!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 element = (
      <>
        {Message({name: "문동은", title: "사원", children: "반갑습니다."})}
      </>
    );

    ReactDOM.render(element, rootElement);

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

이렇게 하면, JSX 문법으로 했을 때와 동일한 결과가 나옵니다.

이렇게 JSX 문법으로 정의된 React Component를 JS 함수처럼 사용할 수 있습니다.

감사합니다.

< 목록으로 돌아가기