this.state와 this.setState

이번에는 클래스형 컴포넌트에서 쓸 수 있는 this.state와 this.setState에 대해서 알아보겠다.

state 객체는 내부에서 변화하는 값을 저장하는 하나의 공간이라고 생각하면 되는데 외부로 데이터를 전달해주기 위한(외부로부터 데이터를 전달받기 위한) props 객체와는 조금 차이가 있다.

state를 사용하기 위해서는 클래스형 컴포넌트의 생성자에서 정의해줘야 하는데 간단한 사용방법을 예제를 통해 알아보고자 한다.

import React from "react";
import "./styles.css";

function App (){
  return (
    <div className="App">
      <Toggle/>
    </div>
  );
 
}

class Toggle extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      isOn: false,
    }
  }

  render(){
    return (
     <div>
       <button >{this.state.isOn? "ON": "OFF"}</button>
     </div>
    );
  }

}

export default App

먼저 클래스형 컴포넌트 Toggle을 선언해준다. 
constructor로 생성자를 만들어주고 es6문법을 이용하여 super키워드로 생성자를 초기화해준다. 
그리고 여기서 this.state를 이용할 수 있는데 토글 버튼을 만들 것이기 때문에 isOn이라는 이름으로 선언해주고 값을 boolean형태로 넣어주었다. (초깃값 : false)

this.state는 클래스 컴포넌트 내부에서 변화하는 값을 담은 객체로 반드시 constructor에서 선언해주어야 한다. 

그리고 버튼의 값으로 this.state안의 isOn에 들어있는 값을 넣어주려고 하는데 여기서 삼항 연산자를 이용하여 isOn의 값이 true일 때는 ON이라고 표시해주고 false일 때는 OFF라고 표시되도록 해주었다.

실행 화면

그럼 이렇게 렌더링이 되는데 이제 버튼을 누르면 ON OFF 값이 바뀌도록 설정해보겠다.

import React from "react";
import "./styles.css";

function App (){
  return (
    <div className="App">
      <Toggle/>
    </div>
  );
 
}

class Toggle extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      isOn: false,
    }
    // 함수를 바인딩해줌
    this.handleChange = this.handleChange.bind(this);
  }

// 버튼의 상태를 변경하는 함수
  handleChange(){
    this.setState({
      isOn: !this.state.isOn,
    })
  	console.log(this.state.isOn);
  }

  render(){
    return (
     <div>
       <button onClick={this.handleChange}>{this.state.isOn? "ON": "OFF"}</button>
     </div>
    );
  }

}

export default App

this.state안에 있는 값을 바꿔주려면 반드시 this.setState 를 사용해야 하는데 handleChange라는 함수를 만들어서 버튼을 눌렀을 때 그 값을 바꿔주도록 선언해주었다.
(그리고 바뀐 값을 확인하도록 콘솔로 찍어주었다.)

그리고 클래스형 컴포넌트 안에 멤버 함수를 정의해주면 반드시 bind 작업이 필요하다. (만약 bind가 없다면 버튼을 클릭했을 시 this의 값은 window 객체로 나올 것이다.)

실행 화면

누를 때마다 ON OFF 값이 바뀌고 this.state의 값이 바뀌는 것을 볼 수 있다.

this.state와 this.setState를 사용할 때 몇가지 주의할 점이 있다.

• this.state내부의 값을 변경할 때에는 반드시 this.setState를 사용해야 한다. 
  직접적으로 this.state의 값을 변경해선 안된다.
• this.setState()는 비동기로 처리되는 함수이므로 실행 순서에 유의해야 한다. (fetch와 같은 비동기 함수를 같이 사용할 경우 값이 안 넘어갈 수 있으니 주의해야 한다.)
• this.setState() 안에는 화살표 함수로도 사용이 가능하다.
• this.setState()안에는 변경할 state 객체가 들어가지만 (기존의 객체를 덮어 씌워준다) 함수를 넣을 수도 있다.

this.setState((state, props)=>({
  isOn: !state.isOn
}));

// this.setState의 첫 번째 인자로는 이전 state의 값이 넘어오고 
// 두 번째 인자로는 업데이트가 적용된 시점의 props가 들어온다.

• this.setState()를 이용하면 기존의 this.state를 병합해준다. (같은 키 값은 덮어 씌워주고 this.state에 없던 키 값은 추가된다.)
  (JavaScript의 객체 속성을 가진다.)
• this.setState()를 사용할 때 state 객체를 넣어주거나 함수에서 state 객체를 리턴해주어야 한다.
• this.setState()가 실행되고 나면 컴포넌트는 다시 랜더링(리랜더링)이 이루어진다.

이렇게 this.state와 this.setState에 대해서 알아보았다.