React에서 Strict 모드의 목적

1. React StrcitMode
2. React Strict 모드의 장점
3. React Strict 모드의 최상의 사용

JavaScript는 전체 스택 응용 프로그램을 개발하기 위한 훌륭한 프로그래밍 언어입니다. 초보자 개발자는 종종 깨끗하고 조직적인 JavaScript 코드를 작성하는 데 어려움을 겪습니다. 다행히 웹 애플리케이션을 작성하기 위한 몇 가지 구조를 제공하는 JavaScript 프레임워크가 있습니다. 그리고 React는 효율적인 웹 애플리케이션을 작성하기 위한 가장 인기 있는 프레임워크 중 하나입니다. React의 표준 관행에서 벗어난 코드 조각을 강조하기 위해 StrictMode라는 도우미 구성 요소를 제공합니다.

React StrcitMode

React StrictMode는 애플리케이션의 잠재적인 문제를 강조합니다. 이렇게 하면 더 읽기 쉽고 안전한 응용 프로그램을 작성하는 데 도움이 됩니다. 이 기능은 React 패키지에 포함되어 있으므로 별도로 가져올 필요가 없습니다. 의심스러운 코드가 있는 경우 StrictMode 도우미 구성 요소로 래핑하면 됩니다. 여기 기능적 React 구성 요소에서 사용하는 방법:

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

이 경우 도우미 구성 요소로 <SuspiciousComponent>를 래핑했습니다. 하위 구성 요소의 코드를 React의 권장 사례에 위배되는 코드로 변경하면 StrictMode가 경보를 발생시킵니다. 이는 일부 잘못된 관행으로 인해 앱이 충돌하지 않을 수 있기 때문에 필요합니다. 앱이 작동한다고 해서 문제가 없는 것은 아닙니다. 코드 조각에 대해 의심이 가는 경우 <React.StrictMode> 도우미 구성 요소로 코드를 래핑하여 문제가 없는지 확인합니다. 단일 구성 요소, 여러 구성 요소 또는 전체 트리를 래핑할 수 있습니다.

전체 구성 요소 트리에서 잠재적인 오류를 찾으려면 상위 구성 요소의 return 문을 보고 다른 모든 구성 요소를 포함하는 <div>(또는 일부 다른 요소)를 래핑합니다. 복잡한 애플리케이션을 구축했다면 StrictMode는 불가피하게 일부 오류를 감지하여 콘솔에 보고합니다.

Fragment 도우미 구성 요소와 마찬가지로 StrictMode는 실제 UI를 렌더링하지 않습니다. 또한 애플리케이션의 스타일에도 영향을 미치지 않습니다.

React Strict Mode는 개발 모드에서 버그를 감지하는 데 사용됩니다. 모든 오류를 정리하고 앱을 제작할 준비가 되면 제거할 수 있습니다.

React Strict 모드의 장점

React에서 StrictMode를 사용하는 것의 명백한 이점 외에도 더 나은 품질의 코드를 작성하는 방법을 배우는 데 유용한 도구가 될 수도 있습니다.

부작용으로부터 보호

일부 수명 주기 메서드는 렌더링 단계에서 여러 번 호출될 수 있으므로 React는 부작용이 포함되어서는 안 된다고 권장합니다. 이 권장 사항은 종종 간과되어 애플리케이션을 외부 공격에 노출시키는 잘못된 상태 및 메모리 누수로 이어집니다. 다행히 StrictMode 도우미 구성 요소는 유해한 부작용을 찾아 수정하는 데 도움이 될 수 있습니다. 그리고 이를 달성하기 위해 StrictMode로 래핑된 구성 요소의 메서드를 의도적으로 두 번 호출합니다.

오래된 관행 감지

findDOMNode와 같은 기능은 한때 ReactJS에서 허용되었지만 이제는 더 이상 사용되지 않습니다. 과거에 널리 사용되었지만 곧 제거될 context API도 마찬가지입니다. StrictMode는 오래된 메소드나 React 관련 기능에 대한 경보를 울리는 유용한 도구가 될 수 있습니다.

React Strict 모드의 최상의 사용

작성하지 않은 코드베이스로 작업하는 경우 StrictMode는 특히 경험이 없는 개발자가 React 애플리케이션을 작성한 경우 코드의 적절한 구성을 보장하는 데 유용한 도구가 될 수 있습니다.

JavaScript(React와 함께 사용) 코드에서 버그를 찾는 것은 매우 어려울 수 있습니다. 그러나 StrictMode로 코드를 래핑하면 무엇이 잘못되었는지에 대한 아이디어를 얻을 수 있습니다.

전반적으로 StrictMode는 React에서 가장 유용한 도구 중 하나입니다. 초보자 개발자는 이를 사용하여 React에서 권장되는 방식을 준수하는 코드를 작성하는 습관을 들일 수 있습니다. Strict Mode를 사용하면 할수록 더 편안하게 사용할 수 있습니다.