Props 와 State

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

1. Props

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

밑에 예시코드를 보겠습니다.

function 컴포넌트

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

ReactDOM.render(<Component message="안녕하세요" />, rootEl);

위에 코드를 보면 render룰 해주는 곳에서 message를 입력해주면
그것을 props가 받아서 h1태그에 넣어줍니다.

class 컴포넌트

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

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

클래스 컴포넌트는 위에 예시 코드처럼 사용합니다.

default props

랜더하는 과정에서 값을 넣어주지 않을 때 기본 값을 세팅할 수 있다.

• function

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

// function, class 둘다 사용 가능
Component.defaultProps = {
  message: "기본값"
};

ReactDOM.render(<Component />, rootEl);

위에 예시처럼 기본값을 설정할 수 있다.

• 클래스

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

  // 클래스에서만 사용 가능
  static defaultProps = {
    message: "기본값2"
  };
}

ReactDOM.render(<Component />, rootEl);

❗ 물론 ReactDOM.render(<Component message="기본값 아님" />, rootEl); 처럼 props를 넣어준다면 기본값이 아닌 넣어준 값이 나온다.

2. State

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

2-1. state 정의하는 방식(2가지)

• 객체형식으로 정의

// 1. 객체 형태
state = {
  count: 0
};

• constructor 로 정의

// 2. constructor
constructor(props) {
  super(props);

  // state 초기화
  this.state = { count: 0 };
}

❗랜더가 된 직후에 불리는 함수 componentDidMount()

componentDidMount() {
  setTimeout(() => {
    // state를 다시 정의하려면 setState를 사용해야한다.
    //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);
}

전체 코드

<script type="text/babel">
  const rootEl = document.querySelector("#root");
  console.log(React);
  console.log(ReactDOM);

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

  // function에서도 사용 가능
  // Component.defaultProps = {
  //   message: "기본값"
  // };

  class Component extends React.Component {
    // 1. 객체 형태
    // state = {
    //   count: 0
    // };

    // 2. constructor
    constructor(props) {
      super(props);

      // state 초기화
      this.state = { count: 0 };
    }

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

    componentDidMount() {
      setTimeout(() => {
        // state를 다시 정의하려면 setState를 사용해야한다.
        //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"
    };
  }

  ReactDOM.render(<Component />, rootEl);
</script>