React - Props & State

• Props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터
• State : 컴포넌트 내부에서 변경할 수 있는 데이터
• 둘 다 변경이 발생하면 re-render 발생할 수 있음
• 현재는 React Hook으로 인해 class Component에서의 State 방식을 사용하지 않음

// Props 예제
function Component(props) {
  return (
    <div>
    <h1>{props.message}</h1>
    </div>
  );
}

// Default Props
Component.defaultProps = {
  message: 'Default Props',
};

ReactDOM.render(
  <Component message="Props Test" />,
  document.querySelector('#root')
);

// State 예제
class Component extends React.Component {
  // State 정의 방법 1
  // state = {
  //   count: 0,
  // };

  // State 정의 방법 2
  constructor(props) {
    super(props);

    this.state = { count: 0 };
  }

  componentDidMount() {
    setTimeout(() => {
      // State 변경 방법 1
      //  this.setState({ count: this.state.count + 1 });

      // State 변경 방법 2
      //  this.setState((previousState) => {
      //    const newState = { count: previousState.count + 1 };
      //    return newState;
      //  });
      // }, 1000);


    setTimeout(() => {
      // State 변경 방법 3
      this.setState((state) => ({
        count: state.count + 1,
      }));

      // State 변경 방법 4
      this.setState((state) => ({ ...state, count: state.count + 1 }));

    }, 1000);
  }

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

ReactDOM.render(
  <Component message="Props test" />,
  document.querySelector('#root')
);