class component, state, setState()

class component

• class React component에서 확장하여 사용한다.(extends가 그 기능을 한다)
• function이 아니기 때문에 return을 사용하지 않고 render를 사용한다.
  (render function도 React component가 가지고 있는 기능)
• render안에 screen에 보일 것들을 입력하면 된다.
• React는 자동적으로 모든 class component의 render function을 실행한다

class App extends React.Component{
  state ={
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({count: current.count - 1 }));
  };
  render(){
    return(//return할때는 하나의 tag로 감싸야한다.
      <div>
      <h1>im a class {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      {/*this.add()에서 ()는 즉시실행을 나타낸다*/}
      <button onClick={this.minus}>Minus</button>
      </div>
    ) 
  }
}
export default App;

state

• 유동적인 데이터를 사용할때 state(object)를 사용한다.
• state(object)안에 있는 값들은 변할 수 있다.
• 미래에 쓰고자 하는 state를 선언하는 건 필수가 아니다. 쓰고 싶은 state를 그때 그때 추가해도 상관없다.
• 기존의 state값을 변경할 수도 있지만 새로 state값을 추가할 수도 있다.

만약 state에 book이란 key가 없어도 this.setState({book: true});를 사용하면 state에 새로운 값이 추가된다.

class App extends React.Component{
  state ={
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count +1 }));
  };
  minus = () => {
    this.setState(current => ({count: this.state.count -1 }));
  };
 ...

setState()

• setState를 호출하면 React는 state를 update함과 동시에 render function을 호출한다.
• setState를 사용하지 않으면 state는 update될 수 있지만 React가 state의 변경을 알아차리지 못해 render fucntion이 호출되지 않는다
• render function은 변화된 부분만 update한다

lass App extends React.Component{
  state ={
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count +1 }));
    //current로 현재 state를 가져올 수 있다.
  };
  minus = () => {
    this.setState(current => ({count: this.state.count -1 }));
  };
...

setState에서 기존의 state를 가져올때 위 방법보다 아래 방법을 사용하는데 더 낫다.

add = () => {
    this.setState({count: this.state.count + 1});
  };

vs

add = () => {
    this.setState(current => ({current.count + 1}));
  };