이름에서 알 수 있듯이 FORCE 🏋🏼‍♀️ 는 반대가 없을 때 물체의 움직임을 변경하는 상호 작용입니다(Wikipedia에서).

힘은 일반적으로 의도하지 않은 일에 적용하는 것입니다. 우리는 힘을 현명하게 사용해야 합니다. 그것은 당신에게도 해를 끼칠 수 있습니다.

이 반응 API를 일반적으로 사용하지 않을 것입니다. 그러나 나는 이것을 직장에서 사용했기 때문에 이 블로그를 씁니다. 그리고 이 기사에서는 forceUpdate를 사용할 수 있는 위치에 대한 힌트를 제공합니다. 기술 분야에는 일상 생활에서 사용하지 않을 것이지만 진정으로 필요할 때마다 마음에 💡 클릭할 수 있는 방법을 배워야 합니다.

Disclaimer: Don't use forceUpdate until and unless you know what you are doing. As react suggest use state or props which will automatically handle all renders.

forceUpdate 란 무엇입니까?

반응에서 구성 요소는 소품이나 상태가 변경될 때 자동으로 다시 렌더링됩니다.
그러나 렌더링이 컴포넌트를 강제로 re-render하기 위해 반응하도록 지시해야 하는 다른 데이터에 의존하는 몇 가지 시나리오가 있습니다.

이를 위해 반응에 forceUpdate() 이라는 API가 있습니다.

구성 요소에서 forceUpdate를 호출할 때마다 구성 요소에서 렌더링을 방지하는 이유가 될 수 있으므로 반응이 다시 렌더링되고 수명 주기 메서드를 건너뜁니다shouldComponentUpdate. 자식 구성 요소의 경우 반응은 해당 구성 요소에 대한 메서드를 방지하지 않습니다.

사용하지 않는 이유

특히 PureComponent에서 특히 성능에 영향을 미치는 React skipshouldComponentUpdate 수명 주기 방법

안티 패턴입니다.

유지 관리가 더 어렵습니다(당신은 이해할 수 있지만 동료나 미래의 개발자는 이해하지 못합니다).

다음 상태를 예측하기가 더 어렵습니다.

비교를 위해 shouldComponentUpdate/componentWillUpdate/componentDidUpdate를 사용할 수 없도록 이전 상태 값을 오염시킵니다.

구현

불행히도 우리 모두는 클래스 구성 요소에서 기능 구성 요소로 이동했지만 강제 재 렌더링을 제공하는 직접적인 반응 API는 없습니다.

그러나 useState 훅을 사용하여 동일한 기능을 달성할 수 있습니다. 확인할 수 있는 몇 가지 다른 접근 방식도 있습니다here.

예를 들어 보겠습니다.

예시

테이블 데이터가 있고 테이블 행을 클릭할 때마다 해당 행 데이터를 기반으로 다른 세부 정보를 가져와야 하는 문제를 고려하십시오.

먼저 전체 코드를 보자


여기에 테이블 데이터가 있습니다.

const data = [
  {
    company: "Alfreds Futterkiste",
    contact: "Maria Anders",
    country: "Germany"
  },
  {
    company: "Centro comercial Moctezuma",
    contact: "Maria Anders",
    country: "Mexico"
  }
];

반응에 익숙하다면 이것을 반복하고 테이블을 만드는 것은 큰 문제가 아닙니다.
그러나 보시다시피 테이블 행을 확장 및 축소하고 현재 가지고 있지 않은 데이터를 주입해야 합니다(이것이 이 문제를 처리하기 위한 저의 접근 방식입니다. 의견에서 다른 접근 방식을 제안할 수 있습니다 🤗).

반응에 대한 지식이 있다면 함수형 프로그래밍 개념을 사용합니다. 이 때문에 우리는 불변성의 법칙을 따라야 합니다. 인스턴스화한 후에는 수정할 수 없습니다.

여기서 반응은 테이블 데이터 개체를 직접 변경하여 자체를 다시 렌더링하지 않습니다. 마지막으로 코드에서 보여준 것처럼 강제 업데이트 또는 useState를 사용할 수 있습니다. 구성 요소를 다시 렌더링하도록 반응에 알려줍니다.

const [state, setState] = useState(0);

 const handleClick = (index) => {
    const updatedState = data[index];

    if (updatedState.other) {
      delete updatedState.other;
      setState((pre) => {
        return pre + 1;
      });
    } else {
      updatedState.other = {
        description: "Hello there"
      };
      setState((pre) => {
        return pre + 1;
      });
    }
  };

handleClick는 클릭된 행 인덱스를 가져와 테이블 데이터 개체를 변경하는 이벤트 핸들러입니다. 여기에서 useState는 forceUpdate로 작동합니다. 저는 단순히 모든 setstate 후에 새로운 증분 상태를 설정하는 counter를 사용했습니다.

읽어 주셔서 감사합니다. 앞으로 🤝 클릭하면 감사합니다.