[React] setState를 사용하는 이유 (feat. setState 사용법)

강의를 들으며 코드를 따라치기만 바빴다. 이제는 시험기간이니깐 react를 공부해보려고 한다.

 

state의 값이 변경되면 state를 관리하는 컴포넌트의 render함수가 다시 호출된다.그리고 render함수가 가지고 있는 하위의 컴포넌트들의 각 render함수도 다시 호출된다. 아마 react는 단방향 연결이어서 이를 통해 상위 component와 연결을 하는것 같다.

즉 props나 state의 값이 바뀌면 화면이 다시 그려진다.

 

이런 componet의 state는 setState를 이용해서 바꾸어야 한다. 직접 값을 바꾸게 되면 렌더링이 되지않고 setState를 통해서 바꾸는 것만 렌더링이된다. 즉 이 말은 setState를 통해 바꿔야만 화면에 표시된다는 말이다.

 

this.state.greeting = 'Hello' //렌더링되지 않는다.

this.setState({ greeting: 'Hello' }) //렌더링되어 화면에 표시된다.

 

---

예제 코드

아래의 예시는 페이스북에 나오는 좋아요와 같이 버튼을 누르면 Counter되는 예시이다. 버튼을 클릭하면 클릭할 때마다 숫자가 1씩 증가되는 모습을 확인할 수 있다.

 

class Facebook extends React.Component {
  constructor(props) {
    super(props); // component class 생성자를 먼저 실행
    this.state = { // state 설정
    	liked : 0 // 초기 값 설정
  	};
  }; 
  
  clickLiked() {
    this.setState(() => {
	    return { liked: this.state.liked + 1};
    });
  };
  
  render() {
    return (
      <div>
        <h1>{this.state.liked}</h1> {/* state의 liked를 표시*/}
        <button onClick={this.clickLiked}> Increase </button>
      </div>
    );
  };
}

 

setState 함수를 사용하지 않고 직접 state를 수정하는 코드는 다음과 같이 작성되고 이 코드로 실행했을 때, 버튼을 클릭해도 숫자가 증가되지 않는다.

class Facebook extends React.Component {
  constructor(props) {
    super(props); // component class 생성자를 먼저 실행
    this.state = { // state 설정
    	liked : 0 // 초기 값 설정
  	};
  }; 
  
  clickLiked() {
    this.state.liked = this.state.liked + 1;
  };
  
  render() {
    return (
      <div>
        <h1>{this.state.liked}</h1> {/* state의 liked를 표시*/}
        <button onClick={this.clickLiked}> Increase </button>
      </div>
    );
  };
}