리액트js 핵심개념 state

react

state

state

유동적인 데이터
JSX 내부에 {this.state.stateName}
초기값 설정이 필수, 생성자(constructor)에서 this.state = {}로 설정(설정을 안했는데 쓰면 에러)
값을 수정할 때에는 this.setState({...})
렌더링 된 다음엔 this.state = 절대 사용하면 안됨 값이 변경된 후에는 자동으로 리렌더링함.

class Counter extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {
      value : 0
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({
      value:this.state.value + 1
    });
    
  }
  
  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleClick>Press Me</button>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Counter/>
    );
  }
};

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

바인딩을 해주지 않으면 this를 사용할당시 무엇이 this인지 모르기때문에 bind해주어야한다.

효준's profile image

효준

2018-01-29 23:30

다른글 보러가기

리액트js 핵심개념 props

이전 포스트

리액트js 컴포넌트 맵핑

다음 포스트