[React JS] #3. State

#3.0 Class Components and State

1. state

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다.
동적으로 데이터를 갱신하려고 할 때 props가 아닌 state가 필요하다.
state는 class component에 존재.

• class component
  • class이고, react component로부터 확장되고 screen에 표시된다.
  • react는 자동적으로 class component의 render method를 실행한다.

class App extends React.Component{
  render() {
    <h1> Hi </h1>;  
  }
}

• function component
  • function은 뭔가를 return하고 screen에 표시

function App () {
  return (
    <h1> hi </h1>
  );
}

• state
  • state는 object이고 component의 data를 넣을 공간이 있다.
  • state의 데이터는 동적이다.

class App extends React.Component{
  state = {
    count: 0
  };
  render () {
    return <h1>The number is {this.state.count}</h1>;
  }  
}

#3.1 All you need to know State

1. state 변경하기

• 직접 state에 접근하지 말 것

  this.state.count = 1;

  이렇게 구현할 경우, react를 갱신하지 않으므로 변화 존재 x

• setState() 사용

  • state를 갱신하고 render method를 재실행한다.
  • virtual DOM을 기반으로 바뀐 state만 갱신하기 때문에 매우 빠르다.

  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render () {
    return <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>;
  }  

#3.2 Component Life Cycle

1. life cycle method

react가 component를 생성하고 없애는 방법
react가 render function을 실행하기 전 후로 다른 method들이 실행된다.

• mounting

  create component

  • mounting method가 실행되면서 수행되는 function들
  • :constructor, render, componenetDidMount

• updating

  component 업데이트

  • caused by you, state를 변경하는 행위
  • Updating 관련 method가 실행되면서 수행되는 function들
  • : render, componenetDidUpdate

• unmounting

  kill component