[리액트를 다루는 기술] 3장. props, state

//MyComponents.js 파일

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; //필수 props를 지정하거나, props 타입을 지정해야 할 때 사용한다.

class MyComponent extends Component {
    static defaultProps = { name: '기본이름' } //name props 값을 지정하지 않았을 때, 기본 값으로 설정한다.
    static propTypes = { 
        name: PropTypes.string, //name props 타입을 문자열로 설정한다.
        age: PropTypes.number.isRequired //age props 타입은 숫자이고, 필수로 있어야한다. 
        } 
    /* 
    //생성자함수 constructor 를 사용한 state 변수의 선언 (방법1)
    constructor(props){
        super(props);
        this.state = {
            number: 0
        }
    }
    */
   //클래스 필드 문법을 사용한 state 변수의 선언 (방법2)
   state = { number: 0 }

    render(){
        return(
            <div>
               <p> 안녕하세요, 제 이름은 {this.props.name} 입니다. </p>
               <p> 저는 {this.props.age} 살입니다. </p>
               <p> 숫자: {this.state.number} </p>
               <button onClick={()=> { 
                   this.setState({
                       number: this.state.number + 1 
                   })
               }
            }>더하기 </button>
            </div>
        )
    }
}

export default MyComponent; //모튤 내보내기(export)-> 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러온다

//App.js 파일

import React, {Component} from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render(){
    return(
      <div>
        <MyComponent name = "신가은"  age = {22}/> 
      </div>
    );
  }
}

export default App;

props 와 state : React component에서 다루는 데이터

1. props : 부모컴포넌트가 자식컴포넌트에게 주는 값 자식은 받아오기만 할 수 있고, 직접 변경할 수 없다. -> props 렌더링하기 -> props 값 설정하기 -> props 기본값 설정하기 // defaultProps -> props 값 검증하기 // propTypes
2. state : 컴포넌트 내부에서 선언하며, 내부에서만 사용하는 데이터로, 값을 변경할 수 있다. 동적인 데이터를 다룬다. 부모의 state는 자식의 props가 된다. -> state 초기값 설정하기 // constructor() -> state 렌더링하기 -> state 값 업데이트하기 // setState()

React 에서 값을 컴포넌트로 넘길 때
<MyComponent name = "신가은" age = {22}/> string값은 "" 로 넘기고, string값을 제외한 값은 { } 로 감싸야 한다.

 

생성자함수 constructor 를 사용한 state 변수의 선언 (방법1)
(설명) super(props) 선언전까지 constructor에서 this 키워드를 사용 할 수 없다.