js strict mode / ESlint

strict mode

function test(){
	x = 'test'
}
test();

console.log(x) // test

엄격 모드를 선언하지 않으면, 전역 객체에 x 프로퍼티를 동적으로 추가하여, 전역 변수로 사용할수있다. (암묵적 전역) 
이는 개발자의 의도가 아니기때문에 오류를 발생시킬수있다. 따라서 언제나 키워드 let, const 를 사용하여 변수를 선언해야한다.

전역의 선두에 use strict;를 추가한다.

'use strict';
function test(){
	x = 'test'
}
test();

console.log(x) // x is not defiend at test

 

전역에 적용하면, script 단위로 적용된다. 이는 바람직하지 않다.
함수단위로 strict mode를 사용하는것도 좋지않다.

 

strict mode를 적용하면 잡아주는 에러

• 선언하지 않은 변수 참조 시 RefferenceError (암묵적 전역을 막아준다)
• delete 연산자로 변수, 함수, 매개변수 삭제 시 syntaxError
• 중복된 매개변수 사용시 syntaxError
• with 문 사용시 syntaxError (쓰는거 못봤음)

 

strict mode를 적용하면 바뀌는 변화

• 함수를 일반함수로 호출하면, this는 undefiend
• 매개변수를 받아 재할당해 변경해도 arguments 객체에 반영되지 않음

 

리액트에서는 어떻게 적용되고 있을까?

스트릭트 모드를 제공하고, 감싸준다.

• 개발 모드에서만 작동하기때문에 프로덕션 빌드에는 영향이 없다.
• 콘솔이 2개씩 찍힌다
• 생명주기 검사해주고 이상하면 에러
• 레거시(문자열ref, contextApi...등) 코드 발견시 에러 

import React from 'react';

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