LWW

CS / FrontEnd / Programming / DataScience

2 분 소요

1. Props와 State

  • Props는 Component 외부에서 Component에게 주는 데이터
  • State는 Component 내부에서 변경할 수 있는 데이터
  • 둘 다 변경이 발생하면, Render가 다시 일어날 수 있음
  • Component를 그리는 방법을 기술하는 함수가 Render 함수
  • Render 함수는 Props와 State를 바탕으로 Component를 그림
  • Props와 State가 변경되면, Component를 다시 그림


- 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">
    console.log(React);
    console.log(ReactDOM);

    // Function Component
    // {message: '안녕하세요!!'}
    function Component(props) {
      return (
        <div>
          <h1>{props.message} 이것은 함수로 만든 Component 입니다.</h1>
        </div>
      );
    }

    ReactDOM.render(
      <Component message="안녕하세요!!" />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-props1


<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">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      render() {
        return (
          <div>
            <h1>{this.props.message} 이것은 클래스로 만든 Component 입니다.</h1>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Component message="안녕하세요!!" />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-props2


@ defaultProps

<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">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      render() {
        return (
          <div>
            <h1>{this.props.message} 이것은 클래스로 만든 Component 입니다.</h1>
          </div>
        );
      }
      static defaultProps = {
        message: "기본값1",
      };
    }

    ReactDOM.render(
      <Component />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-props3


<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">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      render() {
        return (
          <div>
            <h1>{this.props.message} 이것은 클래스로 만든 Component 입니다.</h1>
          </div>
        );
      }
    }

    Component.defaultProps = {
      message: "기본값2",
    };

    ReactDOM.render(
      <Component />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-props4


<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">
    console.log(React);
    console.log(ReactDOM);

    // Function Component
    function Component(props) {
      return (
        <div>
          <h1>{props.message} 이것은 함수로 만든 Component 입니다.</h1>
        </div>
      );
    }

    Component.defaultProps = {
      message: "기본값3",
    };

    ReactDOM.render(
      <Component />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-props5


- State

<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">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      // 그냥 작성
      state = {
        count: 0,
      };

      render() {
        return (
          <div>
            <h1>{this.props.message} 이것은 클래스로 만든 Component 입니다.</h1>
            <p>{this.state.count}</p>
          </div>
        );
      }

      componentDidMount() {
        setTimeout(() => {
          // this.state.count = this.state.count + 1
          this.setState({
            count: this.state.count + 1,
          });
        }, 1000);
      }

      static defaultProps = {
        message: "기본값",
      };
    }

    ReactDOM.render(
      <Component message="안녕하세요!" />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-state1


<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">
    console.log(React);
    console.log(ReactDOM);

    // Class Component
    class Component extends React.Component {
      // 생성자
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }

      render() {
        return (
          <div>
            <h1>{this.props.message} 이것은 클래스로 만든 Component 입니다.</h1>
            <p>{this.state.count}</p>
          </div>
        );
      }

      componentDidMount() {
        setTimeout(() => {
          this.setState((previousState) => {
            const newState = { count: previousState.count + 1};
            return newState;
          });
        }, 1000);
      }

      static defaultProps = {
        message: "기본값",
      };
    }

    ReactDOM.render(
      <Component message="안녕하세요!" />, 
      document.querySelector('#root')
    );
  </script>
</body>


react-state1

댓글남기기

참고