[React] Class Component 와 State

저번 포스팅에서 살펴봤듯이 component를 만드는 방법은 function 을 이용하는 방법과 class 를 이용하는 방법이 존재합니다.

이번 포스팅에서는 class component 를 알아보도록 하겠습니다.

 

class component

이를 통해 component 를 생성하는 방법은 어렵지 않습니다.

React.Component 를 상속받는 class 를 하나 선언하고 render 메소드 내에서 JSX 를 통해 return 을 해줍니다.

react 는 자동적으로 class component 의 render 메소드를 실행하게 됩니다.

import React from 'react';

class App extends React.Component {
  render() {
    return <h3>Hello World</h3>;
  }
}

export default App;

 

굳이 function component 를 제쳐두고 다시 class component 를 하는 이유가 무엇일까요? 바로 state 때문입니다.

 

state

기존에 props 는 Parent component 에서 받아온 정적인 데이터였다면 state 는 내부에서 선언하고 값을 바꿀 수 있는 동적인 데이터입니다.

state 를 사용해보도록 합시다.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  }
  render() {
    return <h3>Hello World</h3>;
  }
}

export default App;

 

state 를 render 메소드 안에서 사용하고 싶은 경우 다음과 같이 접근이 가능합니다.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  }
  render() {
    return <h3>Hello World {this.state.count}</h3>;
  }
}

export default App;

 

위에서 state는 바꿀 수 있는 동적인 데이터라고 했습니다.

이번에는 어떻게 값을 바꾸는지 알아보도록 하겠습니다.

button 에 onClick 으로 add 함수와 minus 함수를 연결시켜서 버튼을 누를 시마다 state 의 값을 바꾸게 하였습니다.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  }

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

  minus = () => {
    this.state.count -= 1;
  }

  render() {
    return <div>
      <h3>count: {this.state.count}</h3>
      <button onClick={this.add}>+</button>
      <button onClick={this.minus}>-</button>
    </div>
  }
}

export default App;

 

하지만 이는 에러가 발생합니다.

에러 메시지를 보면 state 를 직접 변경하지 말라고 합니다.

Do not mutate state directly. Use setState()

이는 state가 바뀌고 render가 새롭게 호출되지 않기 때문에 값이 바뀐 component 를 반환해줄 수 가 없는 문제가 발생합니다.

 

이를 자동으로 해주는 것이 존재합니다.

바로 setState 이죠.

이는 state 를 refresh 를 한 후에 render 를 호출합니다.

이 때 virtual DOM 에 의해서 바뀌는 state 부분만 refresh 하게 되고 이는 성능에 큰 영향을 미칩니다.

그러면 setState 를 사용해보겠습니다.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  }

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

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

  render() {
    return <div>
      <h3>count: {this.state.count}</h3>
      <button onClick={this.add}>+</button>
      <button onClick={this.minus}>-</button>
    </div>
  }
}

export default App;

 

this.state.count 를 사용하는 것은 외부의 상태에 의존하게 되기 때문에 별로 좋은 방법은 아닙니다.

다음과 같이 함수로 인자로서 current 로 현재 state 를 넘겨줄 수 있습니다.

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

 

current 를 적용한 최종적인 코드는 다음과 같습니다.

import React from 'react';

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 <div>
      <h3>count: {this.state.count}</h3>
      <button onClick={this.add}>+</button>
      <button onClick={this.minus}>-</button>
    </div>
  }
}

export default App;