React : Component props 기본값 지정하기

🍒Jooooooo_eun🍒·2021년 12월 8일
0

React basic

목록 보기
2/16
post-thumbnail

컴포넌트 기본값 설정하기

방법 1. Component.defaultProps 를 사용하여 내부 props 값들을 임시 지정이 가능하다.

<body>
  <div id="root">
  </div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    class Component extends React.Component {
        render() {
          return (
            <div>
              <h1>
                {this.props.message} massage 데이터 입니다.
              </h1>
            </div>
          )
        }
    }
    //기본값은 여기서 설정
    Component.defaultProps = {
      message : "기본값",
    };
    ReactDOM.render(
      <Component/>,
      document.querySelector("#root")
    )
  </script>
</body>




방법 2. static defaultProps 사용하여 설정
( 해당 방법은 function(hook) 사용일 경우 적용되지 않음!)

<body>
  <div id="root">
  </div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    class Component extends React.Component {
      render() {
        return (
          <div>
            <h1>
              {this.props.message} massage 데이터 입니다.
              </h1>
          </div>
        )
      }
      //class extends 사용시에만 가능합니다
      static defaultProps = {
        message: "기본값"
      }
    }
    ReactDOM.render(
      <Component />,
      document.querySelector("#root")
    )
  </script>
</body>
profile
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍

0개의 댓글