[리액트 React] 클래스형 컴포넌트에서 state 직접 변경하는 법 / forceUpdate()

이전 게시물에서 클래스형 컴포넌트에서 setState로 직접적으로 state를 변경했을 때 아무 변화가 없는 것을 확인했다.

[리액트 React] setState() 사용법 / useState 사용법 / state 독학 / 클래스형컴포넌트 setState / 함수형컴포

 

 

 

그렇다면 클래스형 컴포넌트에서 state를 직접적으로 건드려서 변경하려면 어떻게 해야 할까?

forceUpdate() 함수를 사용하면 된다.

해당 함수로 화면을 새로고침하면 render() 함수를 호출해 변경된 내용을 화면에 출력할 수 있다.

 

 

 

 

 

1. App.js 작성하기

import React from 'react';
import './App.css'
import ForceUpdate from './ForceUpdate';

function App() {
	return(
		<div>
			<ForceUpdate />
		</div>
	)
}

export default App;

 

 

 

 

 

2. 클래스형 컴포넌트 ForceUpdate.js 작성하기

import React, { Component } from 'react';

class ForceUpdate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            StateString: 'tooktak',
        }
    }

    StateChange = () => {
        this.state.StateString = '뚝딱';
        this.forceUpdate(); // 해당 함수로 새로고침!
    }

    render() {
        return (
            <div>
                <button onClick={(e) => this.StateChange('direct', e)}>
                    state 직접 변경
                </button><br/>
                StateString: {this.state.StateString}
            </div>
        )
    }
}

export default ForceUpdate;

 

 

 

 

 

3. 브라우저 내용 확인

'state 직접 변경' 버튼을 눌렀을 때, 정상적으로 '뚝딱'으로 변경된다.