React 구성 요소를 강제로 업데이트하는 방법

개요

이 기사에서는 React.js에서 구성 요소를 강제로 업데이트하는 방법을 보여줍니다. 보다 구체적으로, React re-renders에 대한 간략한 소개를 제공하고 클래스 기반 구성 요소에서 업데이트를 강제 실행하는 방법과 기능 구성 요소에서 업데이트를 강제 실행하는 방법을 보여줍니다.

반응 재렌더링

React 자체는 대부분의 경우 자동으로 다시 렌더링 구성 요소를 처리합니다. 이것의 원인은 props 또는 state가 업데이트된 시기를 기반으로 할 수 있습니다. 따라서 상태나 속성이 변경되면 구성 요소가 다시 렌더링됩니다. 그러나 구성 요소가 다른 항목에 종속되어 있고 반드시 상태나 속성에 의존하지 않는 경우에는 어떻게 됩니까? 이 경우 React가 변경 사항을 감지하지 못했을 수 있으므로 구성 요소를 강제로 업데이트해야 할 수 있습니다.

React 컴포넌트에서 이 강제 업데이트를 사용하는 방법을 살펴보겠습니다. 이를 보여주기 위해 데모용으로 간단한 응용 프로그램을 만들 것입니다.

주의 사항: React에 대한 몇 가지 개념을 다룰 예정이므로 React에 대한 기본 지식이 있는 것이 좋습니다.

클래스 기반 구성 요소에 대한 강제 업데이트

클래스 구성 요소에는 구성 요소를 다시 렌더링하는 내장 메서드가 있습니다. forceUpdate(), 구성 요소를 강제로 다시 렌더링하는 데 사용됩니다. 에 대해 자세히 읽을 수 있습니다. forceUpdate() React의 메소드 공식 웹 사이트.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

주의 사항: 다음을 사용하여 구성 요소 업데이트에 의존하는 것은 바람직하지 않습니다. forceUpdate() 방법. 이 방법이 필요하다고 생각되면 먼저 코드를 분석하고 React가 구성 요소를 업데이트하지 않는 또 다른 이유가 있는지 알아내야 합니다. 버그로 인해 이 문제가 발생하거나 React가 자체적으로 구성 요소를 적절하게 다시 렌더링할 수 있도록 코드를 재구성할 수 있습니다.

다음은 클래스 기반 구성 요소에서 업데이트를 강제 실행하는 방법의 예입니다.

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

이 방법에는 보이는 것보다 훨씬 더 많은 일이 있습니다. 예를 들어, forceUpdate() 자식 구성 요소에 대한 수명 주기 메서드도 트리거합니다. 그리고 React에서 알 수 있듯이 마크업이 실제로 변경된 경우에만 DOM을 업데이트합니다.

당신은 여기에 라이브 코드.

기능 구성 요소에 대한 강제 업데이트

기능적 구성 요소에는 클래스 기반 구성 요소와 같이 구성 요소를 다시 렌더링하는 기본 제공 메서드가 없습니다. 이것은 우리가 가지고 있지 않다는 것을 의미합니다 forceUpdate() 우리가 사용할 수 있는 방법. 그러나 React 구성 요소는 일반적으로 상태 또는 소품 변경으로 인해 다시 렌더링됩니다. 이를 사용하여 강제로 업데이트하는 방법을 얻을 수 있습니다.

v16.8+부터 React에는 상태 업데이트, 부작용 수행 등을 위한 기능적 구성 요소에서 사용할 수 있는 Hooks라는 개념이 있습니다. 우리는 이 후크를 사용하여 구성 요소를 다시 렌더링할 때 유리하게 사용할 것입니다.

다음은 기능 구성 요소에서 업데이트를 강제 실행하는 방법의 몇 가지 예입니다.

사용법 - useReducer 훅

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

React의 감속기는 일반적으로 복잡한 상태 논리와 작업이 있을 때 사용됩니다. 여기서는 더미 상태 변수를 업데이트하여 업데이트를 트리거하는 데 사용합니다. x. 상태는 업데이트를 트리거하기 위해 실제로 변경되어야 하며, 이것이 각 호출에서 증가하는 이유입니다.

사용 useState 훅

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

이 유형의 강제 업데이트 뒤에 있는 아이디어는 다음과 매우 유사합니다. useReducer 변경을 강제하기 위해 상태를 지속적으로 업데이트한다는 점에서. 마지막 방법에서와 같이 카운터를 증가시키는 대신 여기에서는 단순히 부울 값을 토글하여 각 호출에서 무효화되도록 합니다.

사용법 - useState 및 useCallback 후크

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

다시 말하지만, 이 전략은 상태를 변경하여 작동합니다. 이 경우 기술적으로 변경하지는 않지만 가치 국가의, 우리는 are 상태에 대해 "깊은" 동등성 검사를 수행하지 않기 때문에 React에서 새 것으로 간주하는 새 객체를 보냅니다.

보시다시피 여기에서 동일한 것을 달성하는 여러 가지 방법이 있습니다. 이것들은 모두 기술적으로 안티 패턴이며 가능하면 피해야 합니다. 그러나 근본적인 문제를 해결할 수 없고 구성 요소를 강제로 업데이트해야 하는 경우 여기에 표시된 모든 방법이 작동해야 합니다.

결론

이 기사에서 우리는 React 컴포넌트에 업데이트를 강제하는 방법을 보았습니다. 우리는 또한 이것이 기능적 구성 요소와 클래스 기반 구성 요소 모두에서 어떻게 달성될 수 있는지 보았습니다. 반드시 좋은 습관은 아니지만 특별한 경우에 사용해야 하는 경우 작동 방식을 이해하는 것이 유용합니다.