State 관리

state란? 

 

state는 변경될 수 있는 데이터를 말한다. 

(Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.)

즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다.

 

 

 

 

Props? 

이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. 

 

 

state 접근

state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다.

class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. 

 

state 예시 

counter.js

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      number: 0,
    };
  }

  handleClick() {
    this.setState({ number: this.state.number + 1 });
  }

  render() {
    return (
      <div>
        <h2>{this.state.number}</h2>
        <button onClick={this.handleClick}>Increase</button>
      </div>
    );
  }
}

export default Counter;

위의 코드를 살펴보면  생성자 함수안에 handleclick 함수를 사용하기위해 바인딩해주고 

this.state안에 number라는 state값을 0으로 초기화 시켜주었다. 

 

handleClick 함수를 살펴보면 setState함수를 통해 number state값을 +1씩 추가시켜주고있다. 

 

알아두어야 할것

this.setState 함수를 통해 state값을 업데이트할 때는 상태가 비동기적으로 업데이트가 된다. 

즉 위의 예시에서 handleClick 함수에 this.setState를 두번호출하여도 버튼을 클릭했을때 +2가되는것이 아닌 +1씩밖에 올라가지 않는다. 

 

이러한 문제의 해결책은 this.setState를 사용할때 객체를 넣어주지 않고 함수를 인자로 넣어주면 된다 . 

 

기본적인 형식은 아래와 같이 작성한다.

this.setState((prevState,props)=>{
return {
//업데이트 내용
}
})

 

이런 형식을 토대로 버튼을 클릭했을때 한번에 +2씩 증가하게 하고싶다면

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      number: 0,
    };
  }

  handleClick() {
    this.setState((prev) => {
      return {
        number: prev.number + 1,
      };
    });
    this.setState((prev) => {
      return {
        number: prev.number + 1,
      };
    });
  }

  render() {
    return (
      <div>
        <h2>{this.state.number}</h2>
        <button onClick={this.handleClick}>Increase</button>
      </div>
    );
  }
}

export default Counter;

위와 같이 this.setState의 인자로 함수를 넣어줘서 2번 호출하면 된다. 

 

* 여기서 this.setState(prev,props)에서의 prev는 기존 state상태, props는 현재 지니고 있는 props를 가리킨다.