#3.1 All you need to know about State

#3.1 All you need to know about State

🎈이번시간에는 state안의 데이터를 업데이트하는 방법인 setState에 대해 알아보겠다.

 

⭐ state 안의 데이터를 업데이트 하려면 어떻게 해야할까?

🎈 잘못된 방법

 add = () => {

    this.state.count = 1;

  };

  minus = () => {

    this.state.count = -1;

  }

 

왠지 이렇게 작성하면 될 것 같지만 이렇게 작성하면  "직접 state를 변경하지 마시오"라는 메시지가 나오며, 또한 코드도 동작하지 않는다.

그 이유는 위와 같이 작성하면 리액트는 render 메소드를 refresh하지 않기 때문이다.

매번 state의 상태를 변경할 때 react가 render 메소드를 호출해서 바뀐 데이터가 반영이 되어야 한다.

 

따라서 setState 함수를 호출하면 된다.

만약에 우리가 setState 함수를 호출하면, 리액트는 매우 똑똑해서 우리가 언제 setState를 호출할 지를 알고 또한 내가 view를 refresh하기를 원하는 지 알고 render 메소드를 refresh하기를 원하는지 안다.

 

🎈 setState 사용하기

state는 object라고 했다. 그러므로 setState는 새로운 state를 받아야 하고, 따라서 다음과 같이 작성해야 한다.

 

class App extends React.Component{

  state = {

    count: 0

  };

  add = () => {

    this.setState({count: 1});

  };

  minus = () => {

    this.setState({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>

  );

  }

}

다음과 같이 작성하고 실행해본다. 그리고 소스코드를 보면 모든 것이 바뀌는 것이 아니라 setState를 통해 변경한 부분만 깜빡이는 것을 볼 수가 있다.

 

 

 

왜냐하면 리액트는 충분히 똑똑해서 setState를 호출하면 리액트는 state를 refresh하고 새로운 state와 함께  렌더 메소드를 호출할 것이다. 리액트는 변화가 있는 부분만 업데이트 한다. 리액트는 처음에 이야기했던 virtual DOM을 가지고 있기 때문에 리액트는 매우 빠르게 변경할 수 있고 깜빡거리지도 않는다.

 

🎈setState를 통해 현재 값에서 증가/감소 시키기

우리는 클릭을 할 때마다 숫자를 증가, 감소하고 싶다.

 

1. 동작은 하지만 별로 좋지 않은 방법

add = () => {

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

};

minus = () => {

    this.setState({count: this.state.count - 1});

};

이렇게 작성해도 동작은 똑같이 하지만 사실 좋은 방법은 아니다.

리액트가 state에 의존하게 하는 방법보다는 함수 형태로 작성하는 것이 좋다.

 

2. 가장 좋은 방법 (함수 형태로 작성하기)

add = () => {

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

};

minus = () => {

    this.setState(current => ({count: current.count - 1}));

};

이것이 state를 set할 때 리액트에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.

(이해를 하자면, current는 this.state인 셈이다.)

---

🎈핵심

* setState 없이 그냥 state안의 데이터를 직접 변경하려고 하면 렌더 메소드가 다시 실행되지 않기 때문에 setState 메소드를 써야 렌더 메소드가 다시 실행되면서 바뀐 값이 적용이 된다.

* setState를 사용할 때에는 새 state를 전달해주어야 하는데, state는 객체라 했으므로, 객체 형태로 전달해주면 된다.

* setState를 사용할 때 직접 state의 데이터에 접근하는 것보다 함수 형태로 접근하는 것이 가장 좋은 방법이다.

*** 매 순간 setState를 호출할 때마다 리액트는 새로운 state와 함께 render function을 호출한다.