[React] state 사용 시 주의할 점

props를 통해서는 컴포넌트 내부에서 값을 바꿀 수 없다. 이번에는 state를 통해서 컴포넌트의 내부에서 값을 바꾸는 방법에 대해 알아보겠다.

 

• 생성자에서 반드시 초기화를 해줘야 한다.
• state값을 바꾸려면 반드시 setState() 함수를 사용한다.

import React, { Component } from 'react';
 
class Counter extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      count: props.count,
    };
 
    this.increaseCount = this.increaseCount.bind(this);
  }

 

생성자를 사용하여 state를 만들어줍니다. 

 

  increaseCount() {
    this.setState(({ count }) => ({
      count: count + 1,
    }));
  }
 
  render() {
    return (
      <div>
        <span>현재 카운트: {this.state.count}</span>
        <button onClick={this.increaseCount}>카운트 증가</button>
      </div>
    );
  }
}
 
export default Counter;

 

호출될 때마다 setState를 사용하여 state 변수 count를 증가시켜주는 increaseCount 함수를 만들어줍니다. 버튼을 하나 만들어 onClick 함수를 increaseCount 함수로 설정해줍니다.

 

결과 화면

코드 작성 후 리액트 웹을 실행시켜주면 위와 같은 결과를 얻을 수 있습니다.