리액트 컴포넌트 Props와 State

1. function component의 props와 defaultProps

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

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

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

 

2. class component의 props와 defaultProps

    class Component extends React.Component {
      render() {
        return (
          <div>
            <h1>{this.props.message}이것은 클래스로 만든 컴포넌트 입니다.</h1>
          </div>
        )
      }
      
      static defaultProps = {
        message: "기본값2"
      }
    }
      
    Component.defaultProps = {
      message: "기본값",
    }
    ReactDOM.render(<Component />, document.querySelector("#root"));

- class내부에서 지정하는 방법

- function component와 같이 밖에서 지정하는 방법

둘다 쓸 수 있음

 

3. state 

// 1. 
      state = {
        count: 0,
      };
      
// 2.생성자함수
      constructor(props) {
        super(props);
        this.state = {count:0 };
      }

    class Component extends React.Component {
      state = {
        count: 0,
      };

      render() {
        return (
          <div>
            <h1>{this.props.message}이것은 클래스로 만든 컴포넌트 입니다.</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: "기본값2"
      }
    }

class component내에서 state.count 기본값 지정해주고

componentDidMount란 함수를 재정의 (lifecycle hook)할때

state값을 바꾸려면 그냥 할당해주는게 아니라 this.setState() 써야함

 

- 방법1: this.setState()를 써서 count값 다시 세팅 (객체를 통째로 새로 만듦)

- 방법2: this.setState에 함수넣기 (앞에 값 활용)

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