[React] 리액트 기초부터(5)

state는 컴포넌트 자신이 들고 있다.

변화가 필요하다면 컴포넌트의 내장 함수 중 하나인 setState()를 통해 값을 설정할 수 있다.

 

state를 이용하여 컴포넌트 값 변하는 예제)

 

Counter.js)

import React, {Component} from 'react';

class Counter extends Component{
  state = {
    number: 0
  }

  handleIncrease = () =>{
    this.setState({
      number:this.state.number+1
    })
  }
  handleDecrease = () =>{
    this.setState({
      number:this.state.number-1
    })
  }
  render(){
    return(
      <div>
        <h1>카운터</h1>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    )
      
  }
}

export default Counter;

 

App.js)

import React, { Component } from 'react';
import Counter from './Counter';

class App extends Component {
  render() {
    return (
       <Counter/>
    );
  }
}

export default App;

 

만약 Counter.js에서 함수를 나타낼때 = () =>{} 하지 않고 (){} 이렇게 나타낸다면 함수 내부에서 this가 어떤 값인지 알지 못하게 된다.

 

이런 식으로 사용하기 위해선 construct를 선언해주어야한다.

construct 사용 예제)

import React, {Component} from 'react';

class Counter extends Component{
  state = {
    number: 0
  };

  constructor(props){
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }
  handleIncrease (){
    this.setState({
      number:this.state.number+1
    })
  }
  handleDecrease (){
    this.setState({
      number:this.state.number-1
    })
  }
  render(){
    return(
      <div>
        <h1>카운터</h1>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    )
      
  }
}

export default Counter;

state는 컴포넌트 내부에 있고 컴포넌트 내부에서 바뀔 수 있는 값이고 이 값이 바뀔 때 마다 컴포넌트는 ReRendering이 된다. 값을 바꿀때에는 꼭 setState 함수를 이용해서 바꿔야한다. 사용하지 않는다면 ReRendering을 하지 않아서 원하는 값을 나타내지 못하게 된다.

 

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.