React 컴포넌트 상태관리(state) (Day3)

Property VS State

Property : 컴포넌트 내부에서 값을 바꿀수 없다.
State : 값을 저장하거나 변경할 수 있는 객체

State 특징

1. 생성자에서 반드시 초기화 필요
2. state를 변경할때는 setState()함수(상태관리함수)를 반드시 사용해야 한다.(forceUpdate()함수도 가능은하다.)
3. setState() 함수는 비동기로 처리

기본적 필수요소

1. constructor
2. constructor 내의 super(props)
3. this.state의 정의
4. 필요 함수가 존재시 constructor에 bind

예제 : 버튼을 누를 때 숫자가 증가하는 카운터 컴포넌트

App.jsx

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import Increase from "./03/Increase"


class App extends React.Component {
  render() {
    return (
        <div>
         <Increase/>

        </div>
        );
      }
}
export default App;

Increase.jsx

import React from 'react';

class Increase extends React.Component {
    constructor(props){
        super(props);
        this.state={
            count:0
        }
       this.increaseCount = this.increaseCount.bind(this);
    }
    increaseCount(){
        const num = this.state.count;
        this.setState({
            count : num + 1
        })

    }
    render() {
        return (
            <div>
                <span>카운트 : {this.state.count}</span>
                <button onClick={this.increaseCount}>카운트증가</button>
            </div>
        );
    }
}

export default Increase;

주의 깊게 봐야할 Increase.jsx에서 constructor에는 super와 this.state가 미리 선언되어있고 필요한 함수에 따른 bind가 연결되어있다.

SetState()란?

state을 변경(event | resat api 등을 통해서...)하여, 연관된 UI을 update 할 때 사용 ( 리액트 엔진이 자동으로 render() 호출)

직접 state를 변경하면 안되는 이유

render()함수로 화면을 그려주는 시점은 리액트 엔진이 정하기 때문에 직접 state값을 변경해도 render()함수가 새로 호출되지 않는다.

forceUpdate()란?

출력 검증 작업 없이 함수가 호출될 때마다 새롭게 화면을 출력
(클래스 인스턴스 변수와 화면을 강제로 출력)

위의 예제에 적용시키기

Increase.jsx

import React from 'react';

class Increase extends React.Component {
    constructor(props){
        super(props);
        this.state={
            count:0
        }
       this.increaseCount = this.increaseCount.bind(this);
    }
    increaseCount() {
        this.state.count = this.state.count + 1;
        this.forceUpdate();
    }

    
    render(){
        return (
            <div>
                <span>카운트 : {this.state.count}</span>
                <button onClick={this.increaseCount}>카운트증가</button>
            </div>
        );
    }
}

export default Increase;

increaseCount()함수에 forceUpdate()를 사용하였다.