[React] 리액트 - state 사용하기

안녕하세요. 이번 포스팅에서는 state 사용하는 방법에 대해 알아보겠습니다. 

 

앞선 포스팅에서 배운 props의 경우는 주체가 되는 컴포넌트(Component)의 부모 컴포넌트(Component)에서 값을 지정하고 주체가 되는 컴포넌트(Component)에서는 해당 값을 읽기 전용으로만 사용할 수 있었습니다. 이번 포스팅에서는 주체가 되는 컴포넌트(Component)에서 직접 값을 변경하고 읽을 수 있는 state에 대해서 알아보겠습니다.

---

1. state 초기값 설정

import React, { Component } from 'react';

class MyComponent extends Component
{    
    constructor(props)
    {
        super(props);

        this.state = {
            num : 0 
        }
    }   

    render(){
        return(
             <h1>{this.state.num}</h1>
        )
    }
}

export default MyComponent;

▼ state 초기값은 보통 클래스의 생성자 함수인 Constructor 안에 정의합니다. 이때 props 객체를 인자로 하는 부모 클래스의 생성자를 먼저 호출한 다음 현재 컴포넌트(Component)의 state 초기값을 설정합니다. 위 코드에서는 num이라는 state 값을 0으로 초기화하고 있습니다. 해당 state 값을 렌더링하는 방식은 props를 렌더링하는 방식과 같게 {} 구문안에 this 키워드를 통해 접근하여 사용합니다.

---

2. state 업데이트 하기

이번에는 state 값을 업데이트를 해보겠습니다. 

import React, { Component } from 'react';

class MyComponent extends Component
{    
    constructor(props)
    {
        super(props);

        this.state = {
            num : 0 
        }
    }   
    
    componentDidMount(){
        setInterval(() => {
            this.setState({
                num : this.state.num + 1
            })
        }, 1000);
    }

    render(){
        return(
             <h1>{this.state.num}</h1>
        )
    }
}

export default MyComponent;

▼ MyComponent 클래스 내부에서 componentDidMount() 함수를 구현하였습니다. 해당 함수는 Component는 Component Life Cycle 중 Component가 생성되고 렌더링이 끝나는 시점에 호출되는 함수입니다. 함수 안에는 타이머 함수를 통해 1초마다 setState() 함수를 통해 num의 값을 +1을 하고 있습니다. state 업데이트를 위해 setState() 함수를 사용하고 있습니다. this.state.num으로 num state 값에 바로 접근하여 변경할 수도 있지만 권장하는 내용은 아닙니다. 해당 방식으로 state 값을 업데이트할 경우에는 리렌더링을 하지 않기 때문에 View가 갱신되지 않기 때문입니다. 해당 App을 실행하면 초기값 0을 시작으로 하여 +1씩 증가하는 결과를 확인할 수 있습니다.