리액트 클래스 컴포넌트 | state

 

이제 state에 대해 알아보도록 하겠습니다. state는 동적 데이터를 다룰 때 사용합니다. 동적 데이터란 말 그대로 변경 가능한 데이터를 의미합니다. 컴포넌트를 자바스크립트 객체라고 했는데, 객체의 구성 요소 중 일부의 개수가 바뀐다던지, 속성이 바뀌는 상황을 다룰 수 있도록 해 주는 것이 바로 state인 것입니다. 

state는 함수형 컴포넌트에서는 지원되지 않는 개념입니다. 따라서 이제부터는 클래스형 컴포넌트를 다루어야 합니다. 클래스형 컴포넌트의 작성을 위해서는 기본적으로 다음과 같은 형태로 시작해야 합니다. 

import React from 'react';
import './App.css';
 
class App extends React.Component{
 
}
 
export default App;

핵심은 App 클래스가 React.Component 클래스를 상속받도록 해야 한다는 점입니다. 상속이란 간단히 말해 주어진 클래스(React.Component)를 확장해 새로운 클래스를 만드는 작업을 의미합니다. 

클래스 형태의 컴포넌트를 만들었으므로, 이제 컴포넌트가 JSX를 반환할 수 있도록 해주면 기본적인 컴포넌트의 역할은 수행할 수 있게 됩니다. 그런데 App 컴포넌트는 함수가 아니므로 return을 곧장 사용할 수 없습니다. 그래서 여기 안에는 render() 라는 함수를 추가해줍니다.

import React from 'react';
import './App.css';
 
class App extends React.Component{
  render(){
    return <h1>FROM CLASS COMPONENT</h1>
  }
}
 
export default App;

그리고 결과를 보겠습니다. 

 

결과를 보면 함수형 컴포넌트를 사용했을 때와 별 차이가 없습니다. 하지만 코드에서는 분명히 차이가 있었습니다. 함수형 컴포넌트는 return 키워드가 JSX를 반환하는 데 반해 클래스형 컴포넌트는 render() 함수가 JSX를 반환합니다. 여기서 알 수 있는 것은 render() 함수는 우리가 작성만 해두면 자동으로 실행되는 함수라는 사실입니다. 

우리가 클래스형 컴포넌트를 도입하는 이유는 state를 사용하고자 하는 목적 때문이었으므로, 이제 state에 대해 알아보도록 하겠습니다.

import React from 'react';
import './App.css';
 
class App extends React.Component{
 
  state={
    
  }
 
  render(){
    return <h1>FROM CLASS COMPONENT</h1>
  }
}
 
export default App;

state를 사용하려면 위와 같이 클래스 내부에 state라는 객체를 만들어주면 됩니다. 클래스형 컴포넌트의 state를 사용하기 위해서는 반드시 컴포넌트 내부에 소문자를 이용하여 state라고 적어주어야 합니다. state는 이름 그대로 컴포넌트의 상태에 대한 데이터를 저장하는 객체를 의미합니다. 

이제 state에 키를 추가해보겠습니다. count라는 키를 추가하고 그 값으로 0을 추가합니다. 그리고 render() 함수의 내용도 일부 수정해줍니다.

import React from 'react';
import './App.css';
 
class App extends React.Component{
 
  state={
    count: 0,
  }
 
  render(){
    return <h1 style={{padding:10}}>
    COUNT : {this.state.count}
    </h1>
  }
}
 
export default App;

 

참고로 count 키 뒤의 쉼표(,)는 있어도 되고 없어도 됩니다. 

결과를 보면 state의 값이 가상 DOM을 통해 출력되고 있음을 확인하실 수 있습니다. 그러나 아직은 state를 제대로 사용하고 있다고 할 수 없는 단계입니다. 동적 데이터를 저장하는 것을 목적으로 하기 때문에, 이제 데이터가 변하는 동작을 가미해야 비로소 state를 제대로 사용한다고 할 수 있습니다. 코드를 아래와 같이 수정해보도록 하겠습니다. 

import React from 'react';
import './App.css';
 
class App extends React.Component{
 
  state={
    count: 0,
  }
 
  render(){
    return <div style={{padding:10}}>
      <h1>COUNT : {this.state.count}</h1>
      <button style={{width:100, height:30}}>UP</button>
      <button style={{width:100, height:30}}>DOWN</button>
    </div>
  }
}
 
export default App;

버튼이 추가되었습니다. 이제 버튼을 누르면 버튼에 따라 값이 증가하거나 감소하는 동작을 구현할 것입니다. 그러기 위해서는 자바스크립트의 이벤트 등록을 활용해야 합니다. 함수 두개를 추가 작성하고, 각각의 함수를 버튼에 등록해주도록 하겠습니다. 

import React from 'react';
import './App.css';
 
class App extends React.Component{
 
  state={
    count: 0,
  }
 
  increase = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
 
  decrease = () => {
    this.setState({
      count: this.state.count - 1
    })    
  }
 
  render(){
    return <div style={{padding:10}}>
      <h1>COUNT : {this.state.count}</h1>
      <button 
      onClick={this.increase}
      style={{width:100, height:30}}>UP</button>
      <button 
      onClick={this.decrease}
      style={{width:100, height:30}}>DOWN</button>
    </div>
  }
}
 
export default App;

증가와 감소를 담당하는 두 개의 함수에서는 각각 this.setState() 라는 함수가 사용되었습니다. 이는 state의 값을 변경하는 기능을 담당하는 함수입니다. 각각에서는 state의 현재 count 값을 읽어들여 거기에서 1을 더하거나 빼는 동작을 수행하고 있습니다.

위 코드의 결과로, 앱은 원활한 동작을 수행할 수 있게 됩니다.