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
'bestsource' 카테고리의 다른 글
JSON 오브젝트의 아이템이 "json.dumps"를 사용하여 고장났습니까? (0) | 2023.03.20 |
---|---|
환경변수를 통해 이름에 밑줄을 사용하여 Spring Boot 속성을 설정하려면 어떻게 해야 합니까? (0) | 2023.03.20 |
장고 CSRF 토큰 + Angularjs (0) | 2023.03.20 |
@Component에서 클래스에 주석을 다는 경우 Spring Bean과 Singleton을 의미합니까? (0) | 2023.03.20 |
실제 데이터를 사용하여 테스트할 수 있는 공개적으로 액세스 가능한 JSON 데이터 소스가 있습니까? (0) | 2023.03.20 |