Strict 모드로 인해 My React 컴포넌트가 두 번 렌더링됩니다.

Strict 모드로 인해 My React 컴포넌트가 두 번 렌더링됩니다.

My React Component가 두 번 렌더링 중입니다.그래서 라인별로 디버깅을 실행하기로 했습니다.문제는 다음과 같습니다.

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

모드 때문에 그런가?비활성화할 수 있나요?Strict 모드란?내가 필요할까?

StrictMode는 코드의 문제를 감지하고 경고(매우 유용할 수 있음)하기 위해 구성 요소를 두 번 렌더링합니다.

앱에서 StrictMode를 사용하도록 설정했지만 사용하도록 설정하지 않은 경우, 처음에 앱을 만들 때 create-react-app 등을 사용하여 StrictMode를 자동으로 사용하도록 설정했기 때문일 수 있습니다.

예를 들어 {app}이(가) 다음과 같이 래핑되어 있을 수 있습니다.<React.StrictMode>index.displays:

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

이 경우 Strict Mode를 비활성화하려면<React.StrictMode>태그:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

네, Strict 모드를 삭제해야 합니다.

strict 모드는 부작용을 자동으로 검출할 수 없지만, 조금 더 결정적으로 만들어 부작용을 검출하는 데 도움이 됩니다.이는 의도적으로 Class Component Constructor, render 및 show ComponentUpdate 메서드를 이중 호출함으로써 수행됩니다.

출처: React Docs: Strict 모드

my-self와 같은 Next.js 사용자의 경우 strict 모드도 기본적으로 활성화되어 있어 이 문제가 발생합니다.

이 방법으로 디세블로 할 수 있습니다.

// next.config.js
module.exports = {
  reactStrictMode: false,
}

컴포넌트가 두 번 렌더링되는 것 같은데 첫 번째 렌더링된 컴포넌트가 마운트 해제되지 않았습니까?적어도 React 17에서 볼 수 있는 동작은 내 코드에 버그가 있을 수 있습니다.

StrictMode를 사용하는 리액트 앱:

• 다음과 같은 듀얼 콘솔로그가 표시되는 경우:

• Strict Mode가 앱을 최적화하는 데 도움이 된다는 것을 알고 있다면

• Strict Mode를 완전히 비활성화하는 것은 원치 않습니다.

그 후, 다음과 같이 입력합니다.

React Developer Tools Chrome Extension은 Strict Mode에서 두 번째 렌더링 시 로그를 숨길 수 있는 옵션을 제공합니다.그것을 유효하게 하려면:

• 확장을 인스톨 합니다.
• Chrome Developer Tools 창에 Components라는 새 탭이 생성됩니다.클릭해 주세요.
• 그런 다음 구성 요소 탭 내부의 기어 아이콘을 클릭합니다.
• 그런 다음 Debugging 탭을 선택하고 Strict Mode에서 두 번째 렌더링 시 로그 숨기기 옵션을 선택합니다.

콘솔에 듀얼 로그가 표시되지 않게 됩니다.

하는 nextjs strict로 합니다.next.config.js로 설정합니다.

module.exports = {
reactStrictMode: false,
};

단, stric 모드가 더블 마운트의 원인인지 아닌지를 확인한 후에는 stric 모드를 유효하게 하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode