Props 는 컴포넌트 **외부**에서 컴포넌트에게 주는 데이터.
State 는 컴포넌트 **내부**에서 변경할 수 있는 데이터.
둘 다 변경이 발생하면, Render가 다시 일어날 수 있다.

Render 함수
props와 state 를 바탕으로 컴포넌트를 그려낸다.
props와 state가 변경되면, 컴포넌트를 다시 그려낸다.
컴포넌트를 그리는 방법을 기술하는 함수가 Render 함수이다.

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

// 함수 and Class 모두 사용 가능한 방법. default 값을 지정해준다.
Component.defaultProps = {
	message: "기본값!!!!",
}

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

class Component extends React.Component {
	render() {
	  return (
	    <div>
	      <h1>{this.props.message} 이것은 Class로 만든 컴포넌트 입니다.</h1>
      </div>
		 )
    }
		// class 에서만 사용 가능한 방법이다.
    static defaultProps = {          
	    message: "기본값",
	}
}

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

// Hook 을 배우면 함수 컴포넌트에서도 state를 사용 할 수 있다. 현재 배운거까지는 class에서만
		class MyComponent extends React.Component {
      // state 방법 1
      // state = {
      //   count: 0,
      // }
      // state 방법2
      constructor(props) {
        super(props);
        this.state = { count : 0 };
      }

      render() {
        return (          
          <h1>
            {this.props.message}
            <div>{this.state.count}</div>
          </h1>
        )
      }

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

      static defaultProps = {
        message: "이 부분을 채워주세요!",
      }
    }

    ReactDOM.render(<MyComponent />, document.querySelector('#root'));

위 코드에서 setState 는 다음과 같이도 바꿀수 있다.
위 코드 방식은 객체를 새로 만들어서 넣어주는 방식

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

현재 방법은 앞의 값을 이용해서 넘겨준다.

**결국 Props, State 가 바뀌면 다시 Render 되는 것이다.**