Props & State

Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다.

State 는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.

둘 다 변경이 발생하면, Render 가 다 시 일어날 수 있습니다.

Render 함수

Props 와 State 를 바탕으로 컴포넌트를 그립니다.

그리고 Prop 와 State 가 변경되면, 컴포넌트를 다시 그립니다.

컴포넌트를 그리는 방법을 기술하는 함수가 Render 함수 입니다.

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

    // {message="안녕하세요!!"}
    // function Component(props){
    //   return (
    //     <div>
    //       <h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
    //     </div>
    //   );
    // }

    class Component extends React.Component{
      // state = {
      //   count: 0,
      // };
      constructor(props){
        super(props);

        // 
        this.state = { count: 0 };
      }

      render(){
        return (
          <div>
            <h1>{this.props.message} 이것은 class로 만든 컴포넌트 입니다.</h1>
            <p>{this.state.count}</p>
          </div>
        );
      }

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

      static defaultProps = {
        message: "기본값2"
      }
    }

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

    ReactDOM.render(
      <Component  message="기본값 아님" />, 
      document.querySelector('#root')
    );
  </script>