TIL DAY.27 Props, and State 복습

오늘은 1차 프로젝트를 진행하면서 이해하기 제일 어려웠던 props 와 state 를 복습하는 시간을 갖도록 하겠습니다.

Props 이란?

• 컴포넌트 내부의 immutable Data
• JSX 내부에 {this.props.propsName}
• 컴포넌트를 사용할 때, <> 괄호 안에 propsName = "value"
• this.props.children 은 기본적으로 갖고있는 props으로서 , <CPnt 여기에 있는 값이 들어갑니다./Cpnt>

class Codelab extends React.Component {
  render() {
    return (
    <div>
        <h1>Hello{this.props.name}</h1>
        <h2>{this.props.number}</h2>
        <div>{this.props.children}</div>
    </div>
    );
  }
}

Codelab.propTypes = {
  name:React.PropTypes.string,
  number:React.PropTypes.number.isRequired
};

Codelab.defaultProps = {
  name:"Unknown"
};

class App extends React.Component {
  render() {
    return(
    <Codelab name={this.props.name}>{this.props.children}</Codelab>
      );
  }
}

ReactDOM.render(<App>I am your child</App>,document.getElementById('root'));

State 이란?

• 유동적인 데이터
• JSX 내부에 {this.state.stateName}
• 초기값 설정이 필수, 생성자(constructor) 에서 this.state={}으로 설정
• 값을 수정 할 때에는 this.setState({...}), 렌더링 된 다음엔 this.state= 절대 사용하지 말것