Strict Mode

 

 

Javascript에서의 Strict Mode와 React에서의 Strict Mode, 그리고 Typescript에서의 Strict Mode는 동일한 이름을 갖지만 각각의 역할과 기능이 다릅니다. 이번 포스팅에서는 이를 정리합니다.

 

Javascript Strict Mode

Javascript에서의 Strict Mode(엄격 모드)는 다음과 같은 특징을 갖습니다.

 

• 기존에 조용히 무시되던 에러들을 Throwing 한다.
• Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다
• ECMAScript의 차기 버전들에서 정의될 문법을 금지한다.

Examples

암묵적 전역

선언하지 않은 변수를 참조하면 Reference 에러를 발생시킵니다 

'use strict'

x = 1;
console.log(x); // Reference Error

 

변수, 함수, 매개변수의 삭제

delete 연산자로 변수, 함수, 매개변수를 삭제하려 하면 Syntax Error를 발생시킵니다

'use strict'

var x = 1;
delete x; // SyntaxError

 

매개변수 이름의 중복

중복된 매개변수 이름을 사용하면 Syntax Error를 발생시킵니다

'use strict'

// SyntaxError
function foo(x, x) {
  return x + 1;
}

 

this의 역할

strict mode에서 함수를 일반함수로 호출하면 this에 undefined가 반영됩니다. (new로 호출하여 생성자 함수로 사용한 경우 해당 함수가 생성한 객체가 바인딩됩니다) 이때 오류는 발생하지 않습니다

'use strict'

function foo() {
  console.log(this) // undefined
}
foo();

Warnings

javascript strict mode를 전체 파일에 적용하는 것은 권장되지 않습니다. 왜냐하면 모던 웹 애플리케이션의 경우 여러 서드 파티 라이브러리들을 install해서 사용하는데 이 라이브러리들이 strict mode 대응이 되어있지 않은 경우 애플리케이션이 정상적으로 실행되지 않을 수 있기 때문입니다. 따라서 strict mode를 적용해야 하는 경우 모듈이나 함수 단위로 적용하는 것이 권장됩니다 (JS 모듈의 경우 별도의 'use strict' 구문이 없어도 자동으로 strict mode 처리됩니다)

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

Strict mode - JavaScript | MDN

 

 

React Strict Mode (feat.Nextjs)

React Strict Mode는 "development" 환경에서만 적용되며 실제로 production build에는 적용되지 않습니다. 

 

Strict mode checks are run in development mode only;
they do not impact the production build.

 

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

 

React의 Strict Mode는 Javascript level이 아닌 React API Level에서의 Strict Mode를 의미합니다. 공식 문서에 의하면 다음과 같은 경우에 대한 Strict Check를 제공합니다. 목록을 보면 Javascript 본연의 기능보다는 react lifecycle, react legacy api등에 대한 검사들을 수행하는 것을 확인할 수 있습니다. (자세한 내용은 공식문서를 참고하세요)

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

 

 

https://reactjs.org/docs/strict-mode.html

Strict Mode – React

 

Typescript Strict Mode

Typescript는 Javascript와 본질적으로 같습니다. (Javascript의 SuperSet) Typescript에도 Strict Mode가 존재하며 --strict flag를 사용함으로써 활성화할 수 있습니다. Typescript의 strict 모드를 활성화하면 Javascript의 strict mode가 활성화되며(컴파일된 모듈에 'use strict'가 첨부됩니다), 그 외에 몇 가지 옵션들이 더 활성화됩니다. 활성화되는 옵션은 다음과 같습니다 (옵션의 자세한 내용은 Typescript 공식 문서를 확인하세요)

 

• --alwaysStrict
• --strictBindCallApply
• --strictFunctionTypes
• --strictNullChecks
• --strictPropertyInitialization
• --noImplicitAny
• --noImplicitThis
• --useUnknownInCatchVariables

 

실제로 다음과 같은 간단한 예제를 strict모드를 활성화하여 컴파일하면 'use strict'가 앞에 붙는 것을 확인할 수 있습니다.

// test.ts
const tsCompileTest = (a: number, b: number) => {
  const c = a + b;
  return c;
};

 

 

npx tsc test.ts

 

npx tsc test.ts --strict