props로 전달받은 값을 if 문으로 조건부 렌더링하기

2023-03-23

안녕하세요.

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

이번 시간에는 props로 전달받은 값을 if 문으로 조건부 렌더링하는 방법에 대해서 알아보겠습니다.

<!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 = ({ text }) => {
      if (text.charAt(0) === text.charAt(0).toUpperCase()) {
        return <h1>{text}</h1>;
      } else {
        return <h3>{text}</h3>;
      }
    };

    const element = (
      <>
        <Message text="Chrome" />
        <Message text="chrome" />
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>

</body>
</html>

text를 props로 전달받아서 첫 글자가 대문자인지 소문자인지에 따라서 다른 태그를 렌더링하는 예제입니다.

첫번째는 첫번째 문자가 대문자 이므로 h1 태그로 렌더링하고, 두번째는 첫번째 문자가 소문자 이므로 h3 태그로 렌더링합니다.

여기서 더 나아가 props에 ture 또는 false 값을 가지는 selected 속성값을 추가하고, 이 값에 따라서 다른 태그를 렌더링하는 예제를 만들어보겠습니다.

<!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 = ({ text, selected }) => {
      if (selected) {
        return <h1>{text}</h1>;
      } else {
        return <h3>{text}</h3>;
      }
    };

    const element = (
      <>
        <Message text="Chrome" />
        <Message text="chrome" selected={true} />
      </>
    );

    ReactDOM.render(element, rootElement);

  </script>

</body>
</html>

selected 속성값을 true로 설정하면 h1 태그로 렌더링하고, false로 설정하면 h3 태그로 렌더링합니다.

첫번째는 selected 속성값을 설정하지 않았으므로 false로 설정되고 h3 태그로 렌더링되었고, 두번째는 selected 속성값을 true로 설정했으므로 h1 태그로 렌더링되었습니다.

이렇게 props로 전달받은 값을 if 문으로 조건부 렌더링하는 방법에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기