Vite에서 React.StrictMode 환경에 따라 설정하기

vite는 기본적으로 프로덕션 모드에서 Strict Mode를 true로 설정한다.

 

프로덕션에서 Strict Mode가 켜져있는 이유는 안정성과 성능을 향상시키기 위해서 인데, 'Strict Mode'를 설정함으로써 자바스크립트의 잠재적 오류를 탐지하고 경고 메세지를 출력하는 기능을 제공한다.

 

프로덕션 환경에서 잠재적인 버그를 발견하는 것은 어플리케이션의 안정성을 향상시키는데 기여한다.

실제로 rollup 옵션 Docs를 보게 되면, 특별한 이유 없이 이 'Strict Mode'를 해제하지 말라고 나온다.

(참고 :  https://rollupjs.org/configuration-options/#output-strict )

 

# Javascript에서 'Strict Mode'는 여러 기능들을 제공한다. 

• 암묵적으로 선언된 변수 사용 제한
• 읽기 전용 속성에 대한 할당 제한
• 전역 객체의 this 값 설정 제한

등등..

 

# React.Strict Mode 역시 다양한 기능들을 제공한다.

• 이중 렌더링으로 버그 발견
• Effect들을 다시 실행하여 버그 발견

 

따라서 Vite에서 프로덕션 환경에서 strict mode를 켜두는 것은

코드 안정성과 성능 향상을 목표로 하는 좋은 관행이라고 볼 수 있다.

 

어쨌든 옵션을 수정하는 방법을 살펴보자.

vite.config.js/ts 파일에서 옵션 수정을 통해 Stirct Mode를 설정할 수 있다.

development 환경일 때만 strict mode를 false로 설정한다.

// vite.config.js

    rollupOptions: {
      output: {
        strict: process.env.NODE_ENV === "development" ? false : true,
      },
    },