React 구성 요소를 강제로 다시 렌더링

1. React 구성 요소를 클래스 구성 요소로 강제로 렌더링하기
2. 함수 구성 요소를 사용하여 React 구성 요소를 강제로 다시 렌더링

기본적으로 React 구성 요소는 state 또는 props의 변경으로 인해 다시 렌더링되도록 트리거됩니다. 대부분의 경우 React의 모범 사례를 따르면 이 동작으로 원하는 결과를 얻을 수 있습니다.

경우에 따라 프레임워크의 기본 동작이 충분하지 않아 구성 요소를 수동으로 다시 렌더링해야 합니다. 그렇게 하기 전에 코드를 주의 깊게 살펴보십시오. 강제로 다시 렌더링하는 것은 제한된 수의 상황에서만 실행 가능한 옵션입니다.

React 구성 요소를 클래스 구성 요소로 강제로 렌더링하기

올바르게 사용되면 React Class Component의 setState() 메서드에 대한 호출은 항상 다시 렌더링을 트리거해야 합니다. shouldComponentUpdate() 수명 주기에는 이 동작을 방지하는 조건부 논리가 포함될 수 있습니다.

setState()를 호출하지만 구성 요소가 업데이트되지 않으면 코드에 문제가 있을 수 있습니다. forceUpdate() 메소드를 사용해야 하는 타당한 이유가 있는지 확인하십시오.

this.forceUpdate()

render() 메서드가 state 또는 props 외부의 데이터에 의존하고 해당 데이터의 변경 사항을 기반으로 다시 렌더링을 트리거하려는 경우 forceUpdate() 메서드를 사용할 수 있습니다.

예제 코드:

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

이 경우 state 또는 props를 변경해도 업데이트가 트리거되지 않습니다. 이를 수행하는 것이 forceUpdate() 메서드입니다.

모범 사례

React 개발자는 최후의 수단으로 forceUpdate()만 사용해야 합니다. 렌더 함수는 props 및 state에서만 읽어야 합니다. 이 지침을 따르면 React 구성 요소의 단순성과 효율성을 보장할 수 있습니다.

forceUpdate() 메서드를 자주 사용하지 않는 것이 좋습니다. 습관적으로 많이 사용하는 경우 코드를 살펴보고 개선할 수 있는지 확인할 수 있습니다.

함수 구성 요소를 사용하여 React 구성 요소를 강제로 다시 렌더링

함수 구성 요소에는 forceUpdate() 메서드가 포함되어 있지 않습니다. 그러나 useState() 또는 useReducer 후크를 사용하여 강제로 다시 렌더링하도록 할 수 있습니다.

useState

클래스 구성 요소의 setState() 메소드와 유사하게 useState() 후크는 업데이트된 state 객체가 다른 값을 갖는 한 항상 업데이트를 트리거합니다.

useState() 후크를 사용하여 업데이트를 강제 실행하는 사용자 지정 후크를 만들 수 있습니다. 이러한 재사용 가능한 후크에 대한 샘플 코드는 다음과 같습니다.

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

우리 모두 알고 있듯이 useState() 후크는 state의 현재 값과 해당 setter의 두 가지 값을 반환합니다. 이 경우 newState setter만 필요합니다.

useReducer

useState 후크는 내부적으로 useReducer를 사용하므로 이 후크를 직접 사용하여 보다 우아한 솔루션을 만들 수 있습니다. React 공식 문서에서도 useReducer()를 사용하는 솔루션을 권장합니다. 다음은 샘플 솔루션입니다.

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

useReducer() 후크는 현재 state와 dispatch 함수를 반환합니다. 위의 예에서 [variableName, dispatchName] 구문을 사용하여 이러한 값을 저장합니다.

이 예에서 handleChange() 핸들러를 호출하면 구성 요소가 매번 업데이트됩니다.

후크는 이런 식으로 사용하기 위한 것이 아닙니다. 테스트 또는 이상치 사례에 이러한 솔루션을 사용해 보십시오.