bestsource

React의 Strict Mode란 무엇입니까?

bestsource 2023. 3. 20. 23:23
반응형

React의 Strict Mode란 무엇입니까?

strict 모드는 라이프 사이클 방식 제거에 대한 경고를 발생시켜 베스트 프랙티스 방식으로 리액트 코드를 작성하는 데 도움이 된다고 들었습니다.는 이 미디엄 기사에서 그것에 대해 읽었다.

제가 이해한 것이 맞습니까?strict 모드는 얼마나 효과적입니까?안전하지 않은 라이프 사이클 방법에만 해당됩니까?그렇지 않은 경우 기능 컴포넌트에서 이 기능을 사용할 수 있습니까?

import { StrictMode } from "react";
class Test extends Component{
  render(
    <StrictMode>
      //Some other child component which has all lifecycle methods implemented in it
    </StrictMode>
  );
}

React의 StrictMode는 보다 나은 React 컴포넌트를 쓸 수 있도록 도와주는 도우미 컴포넌트입니다.컴포넌트 세트를 정리할 수 있습니다.<StrictMode />기본적으로 다음과 같습니다.

  • 내부 컴포넌트가 권장되는 몇 가지 방법을 따르고 있는지 확인하고 콘솔에 표시되지 않으면 경고합니다.
  • 사용되지 않는 메서드가 사용되고 있지 않은지 확인하고 strict 모드를 사용하는 경우 콘솔에서 경고가 표시됩니다.
  • 잠재적 위험을 식별하여 부작용을 예방할 수 있도록 지원합니다.

설명서에서 설명한 바와 같이 엄격한 모드는 개발 지향적이기 때문에 프로덕션 구축에 영향을 미칠 염려가 없습니다.

새로운 코드 베이스에 임할 때, 어떤 종류의 코드/컴포넌트를 사용하고 싶은 경우, 엄밀한 모드를 실장하는 것이 특히 도움이 된다고 생각합니다.또, 버그 헌팅 모드인 경우는, 다음과 같이 정리하는 것이 좋을 수 있습니다.<StrictMode />문제의 원인이라고 생각되는 코드의 컴포넌트/블록

그러니까 엄밀한 모드를 이해하는 올바른 길입니다.계속하세요.그것은 게임을 할 때 더 잘 이해할 수 있는 것 중 하나라고 생각합니다.그러니까 즐기세요.

경고:StrictMode는, 실가동 모드가 아닌 개발 모드에서만 컴포넌트를 2회 렌더링 합니다.

예를 들면,getDerivedStateFromProps다음과 같은 방법:

   static getDerivedStateFromProps(nextProps, prevState){// it will call twice
        if(prevState.name !== nextProps.name){
            console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`) 
            return { name: nextProps.name }
        }
        return {}
    }

getDerivedStateFromProps메서드는 두 번 호출합니다.이것은 문제가 되지 않습니다.이것은 단지, 메인 컴포넌트를 포장하고 있기 때문입니다.<StrictMode>에서index.js파일.

StrictMode는, 코드의 문제를 검출해 경고하기 위해서, 컴포넌트를 2회 렌더링 합니다.

즉, StrictMode는 안전하지 않은 API, 레거시 API 또는 사용되지 않는 API/라이프 사이클을 식별하는 데 도움이 됩니다.발생할 수 있는 문제를 강조하기 위해 사용됩니다.개발자 도구이기 때문에 개발 모드에서만 실행됩니다.웹 앱 내의 모든 컴포넌트를 두 번 렌더링하여 앱의 문제를 파악하고 감지하여 경고 메시지를 표시합니다.

Strict Mode는 응용 프로그램에서 발생할 수 있는 문제를 강조 표시하기 위한 도구입니다.Fragment와 마찬가지로 Strict Mode는 표시 가능한 UI를 렌더링하지 않습니다.하위 항목에 대한 추가 검사 및 경고를 활성화합니다.

언급URL : https://stackoverflow.com/questions/53183362/what-is-strictmode-in-react

반응형