React에서 여러개의 element를 생성하는 방법

2023-03-20

안녕하세요.

지난 시간에는 React의 JSX 문법에 대해서 알아봤습니다.

다만 한개의 element를 children을 통해서 생성하는 방법에 대해서만 알아봤습니다.

이번 시간에는 React에서 여러개의 element를 생성하는 방법에 대해서 알아보겠습니다.

여러개의 element를 생성하는 방법은 크게 2가지가 있습니다.

첫번째는 React.createElement를 사용하는 방법입니다.

<!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 element = (
        <div
          className="box"
          children={[
            React.createElement("h1", null, "Hi"),
            React.createElement("h2", null, "Welcome"),
            React.createElement("h3", null, "Dev"),
          ]}
        />
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

그런데 이 첫번째 방법은 root가 아닌 div 태그 아래에 h1, h2, h3 태그가 생성됩니다.

root에 바로 아래에 생성하고 싶다면 div 태그 대신에 React.Fragment 태그를 사용해야 합니다.

두번째는 React.Fragment 태그를 사용하는 방법입니다.

<!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 element = (
        <React.Fragment 
          children={[
            React.createElement("h1", null, "Hi"),
            React.createElement("h2", null, "Welcome"),
            React.createElement("h3", null, "Dev"),
          ]}
        />
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

이렇게 하면, root에 바로 아래에 h1, h2, h3 태그가 생성됩니다.

또한 React.createElement는 JSX 문법으로 다음과 같이 작성할 수 있습니다.

<!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 element = (
        <React.Fragment 
          children={[
            <h1>Hi</h1>,
            <h2>Welcome</h2>,
            <h3>Dev</h3>,
          ]}
        />
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

또한 React.Fragment 코드를 열린태그로 그리고 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 element = (
        <React.Fragment>
          {[
            <h1>Hi</h1>,
            <h2>Welcome</h2>,
            <h3>Dev</h3>,
          ]}
        <React.Fragment>
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

그리고 React.Fragment 안에서는 대괄호와 중괄호를 사용하지 않아도 됩니다.

<!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 element = (
        <React.Fragment>
          <h1>Hi</h1>,
          <h2>Welcome</h2>,
          <h3>Dev</h3>,
        <React.Fragment>
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

여기서 더 나아가서 React.Fragment를 사용하지 않고 대신 빈 태그()를 사용해서 다음과 같이 작성할 수 있습니다.

<!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 element = (
        <>
          <h1>Hi</h1>,
          <h2>Welcome</h2>,
          <h3>Dev</h3>,
        </>
      );
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

이렇게 여러개의 element를 렌더링할 때는 React.Fragment를 사용하거나 빈 태그를 사용하면 됩니다.

감사합니다.

< 목록으로 돌아가기