[React 기본] class형 컴포넌트로 state와 onClick 사용해보기

1. 기본 생김새 만들어보기

class Habit extends Component {
  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        {/* 숫자 */}
        <span className="habit-count">0</span>
        
        {/* 더하기버튼 */}
        <button className="habit-button habit-increase">
          <i className="fas fa-plus-square"></i>
        </button>
        
        {/* 빼기 버튼*/}
        <button className="habit-button habit-decrease">
          <i className="fas fa-minus-square"></i>
        </button>
      </li>
    )
  }
}

 

2.  숫자를 하드코딩 0 에서 변수로 변경해보기 ( {this.state.count} )

class Habit extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        {/* 숫자 */}
        <span className="habit-count">{this.state.count}</span>
        
        {/* 더하기버튼 */}
        <button className="habit-button habit-increase">
          <i className="fas fa-plus-square"></i>
        </button>
        
        {/* 빼기 버튼*/}
        <button className="habit-button habit-decrease">
          <i className="fas fa-minus-square"></i>
        </button>
      </li>
    )
  }
}

render 함수 위에 state를 만들고 그 안에 변수를 만든다.
만든 변수를 0 대신에 중괄호를 이용하여 변수로 바꿔준다. {this.state.count}

이렇게 render안에서 변수 state에 접근할 때는 this.state.변수명으로 접근한다.

 

3. plus 이벤트 연결해보기

class Habit extends Component {
  state = {
    count: 0,
  };
  
  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  };
  
  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        {/* 숫자 */}
        <span className="habit-count">{this.state.count}</span>
        
        {/* 더하기버튼 */}
        <button className="habit-button habit-increase" onClick={this.handleIncrement}>
          <i className="fas fa-plus-square"></i>
        </button>
        
        {/* 빼기 버튼*/}
        <button className="habit-button habit-decrease">
          <i className="fas fa-minus-square"></i>
        </button>
      </li>
    )
  }
}

여기서 포인트는 2가지이다.
1. onClick할때 함수는 this.함수명만 쓰기
2. 위에 이벤트 안에서는 this.state.count += 1; 이런식으로 바로 state의 값을 변경 할 수가 없다.
이유는 그냥 state를 업데이트하게 되면 리액트는 값이 변경된 것을 감지하지 못해 새로 렌더링하지 않기 때문이다.
따라서 setState함수를 사용하여 state안의 count를 업데이트 시켜주어야 다시 렌더링이 된다. 

 

4. minus 이벤트 연결해보기

class Habit extends Component {
  state = {
    count: 0,
  };
  
  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  };
  
  handleDecrement = () => {
    const count = this.state.count - 1;
    if (count < 0) count = 0;
    this.setState({
      count
    })
  }
  
  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        {/* 숫자 */}
        <span className="habit-count">{this.state.count}</span>
        
        {/* 더하기버튼 */}
        <button className="habit-button habit-increase" onClick={this.handleIncrement}>
          <i className="fas fa-plus-square"></i>
        </button>
        
        {/* 빼기 버튼*/}
        <button className="habit-button habit-decrease" onClick={this.handleDecrement}>
          <i className="fas fa-minus-square"></i>
        </button>
      </li>
    )
  }
}

0보다 작으면 0을 넣어주고 나머지는 플러스이벤트와 동일하다.

 

 

따라서 중요포인트는,

       'state는 setState를 사용하여 업데이트 해준다.' 이다.