[React] props, state

3. 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> {/*여기 이름 name으로 일치시키기 - name="velopert"*/}
        <div>{this.props.children}</div>
      </div> //JSX
    );
  }
}

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

ReactDOM.render(<App name="velopert">i am children</App>, document.getElementById('root'));

 

 

---

 

- 기본값 설정하기

컴포넌트의 선언이 끝난 후 defaultProps 객체를 설정하면 된다.

 

class App extends React.Component {
    render() {
        return (
            <div>{this.props.value}</div>
        );
    }
};

App.defaultProps = {
    value: 0 //value props의 값을 0으로 설정했음
};

 

---

 

- type 검증하기

특정 props 값이 특정 타입이 아니거나 필수인데 입력하지 않았을 경우 경고를 띄우게 할 수 있다.

컴포넌트 선언이 끝난 후 propTypes를 설정하면 된다.

 

class App extends React.Component {
    render() {
        return (
            <div>
                 {this.props.value}
                 {this.props.secondValue}
                 {this.props.thirdValue}
            </div>
        );
    }
};

App.propTypes = {
    value: React.PropTypes.string, //문자열
    secondValue: React.PropType.number, //숫자
    thirdValue: React.PropTypes.any.isRequired //어떤 타입이든 필수로 입력되도록 설정
};

 

---

 

* props

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.defaultProps = {
    name: "Unknown"
};

Codelab.propTypes = { //유지보수를 위해 사용하는 것
    number: React.PropTypes.number.isRequired
}

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

ReactDOM.render(
    <App/>, 
    document.getElementById("root")
);

 

---

 

• state

컴포넌트에서 유동적인 데이터를 보여줄 때 사용

 

JSX 내부에 { this.state.stateName }

초기값 설정이 필수, 생성자(constructor) 에서 this.state = { 객체내용 } 으로 설정

props와 달리 값을 수정 할 때에는 this.setState({ val: 'new_val' })

 

렌더링 된 다음엔 this.state = 절대 사용하지 말것!

=> 왜나햐면 setState의 메소드의 경우, state를 바로 수정하는 것이 아닌 안정적인 프로세스를 통해 값이 변경되고 변경된 다음엔 자동으로 리-랜더링을 하기 때문이다.

 

---

 

* state

class Counter extends React.Component {
  //초기값 설정이 필수
  //constructor의 파라메터는 props
  constructor(props){
    super(props); //메소드 안에서 props, this에 접근할 수 있게 된다
    this.state={
      value:0
    };
  }
  
  //버튼이 클릭될 때 실행될 메소드
  handleClick() {
    this.setState({
      value: this.state.value + 1
    }); //this.state = 와 같이 사용하지 말 것! 값이 변경되지 않는다.
  }
  
  render() {
    return(
    <div>
        <h2>{this.state.value}</h2>
        {/* 해당 메소드가 실행되게 하기 위해 onClick 설정해주기
        this가 뭔지 알게 해주기 위해서 바인딩 해주어야 함*/}
        <button onClick={this.handleClick.bind(this)}>press me!</button>
    </div>
    )
  }
}
class App extends React.Component {
  render() {
    return (
      <Counter/>
    );
  }
};
ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);