[React] forceUpdate 함수 활용 하기

this.state.{변수명} = {값} 은 리액트에서 권장하지 않는 코드로 값을 직접적으로 변경하게 되면 render() 함수를 호출하지 않아 DOM 변환이 일어나지 않게 됩니다.

 

이때 forceUpdate() 함수를 아래와 같이 활용하면 re-render 처리하여 변환된 값을 확인 할 수 있습니다.

 

setState 함수 활용 방법과

forceUpdate() 함수 활용 방법 두가지를 적용해 확인 해 보실 수 있습니다.

import React, { Component } from 'react';

class ForceUpdate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            String: "스트링",
        };
    }

    forceStringUpdate = (addString) => {
        this.state.String += addString;
        this.forceUpdate();
    }

    render() {
        return (
            <>
                <div>{this.state.String}</div>
                <button onClick={e => this.forceStringUpdate("force")}>강제업데이트</button>
                <button onClick={e => this.setState({ String: `${this.state.String}String` })}>setState 업데이트</button>
            </>

        );
    }
}

export default ForceUpdate;