[React 따라하기 #9] React State

React State

state 는 컴포넌트가 갖고있는 object 입니다.
state 가 변경되면, 컴포넌트는 다시 랜더합니다.

 

state 를 사용하려면 constructor 에서 속성을 초기화 해야 합니다! 그래야 사용할 수 있어요.
아래 예제에 render 안에서 this.state.gender 는 사용가능, this.state.footsize 는 불가능합니다.

역시 예제로 알아보는게 좋겠죠.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	gender: "man",
        tall: "181",
        weight: "80"
    };
  }
  render() {
    return <h2>Hello {this.props.name}!</h2>;
  }
}

ReactDOM.render(<Hello name="bryan"/>, document.getElementById('root'));

여기서 constructor 안에 있는

this.state = {
    ...
}

에서 보듯이 많은 property 를 가질 수 있습니다.

사용법은

this.state.propertyname 

예제.

See the Pen state_test01 by Seunggeun Oh (@seunggeun-oh) on CodePen.

 

 

- state 수정 :  this.setState() 

state 가 수정되면 render() 메소드가 다시 실행됩니다.
※ 항상 setState() 를 사용해서 수정해야합니다. 그래야 컴포넌트가 업데이트된것을 알고 render() 를 실행합니다.

아래는 버튼 클릭 시 state 를 변경해서 re-render 하는 예제입니다.

See the Pen state_test02 by Seunggeun Oh (@seunggeun-oh) on CodePen.

 

 

 

 

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #8] React Props

 

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)

2020/01/02 - [HTML,Javascript] - [React 따라하기 #11] React Event 리액트 이벤트