반복문을 사용해서 렌더링하기

2023-03-23

안녕하세요.

지난 시간에는 함수를 정의하는 방법에 대해서 알아보겠습니다.

이번 시간에는 반복문을 사용해서 컴포넌트를 렌더링하는 방법에 대해서 알아보겠습니다.

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

    function Number({number, selected}) {
      return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
    }

    const element = (
      <>
        {[1, 2, 3, 4, 5].map((number, index) => (
          <Number key={index} number={number} selected={number === 3} />
        ))}
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>

</body>
</html>

위 코드를 실행하면 1, 2, 3, 4, 5 가 순서대로 출력되는데 3번째 숫자만 h1 태그로 출력됩니다.

반복문을 사용할때는 항상 key 값에 고유한 Unique한 값을 넣어주어야 합니다.

이번 시간에는 반복문을 사용해서 컴포넌트를 렌더링하는 방법에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기