리액트의 Strict Mode

리액트에서 StrictMode는 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용한다.

1. 오래된 라이프사이클 메서드와 비권장 API의 사용을 감지

componentWillMount(), componentWillReceiveProps()와 같은 메서드는 더 이상 사용이 권장되지 않는데, StrictMode는 이러한 메서드들이 코드에 포함된 경우 경고를 표시해준다. 이를 통해 개발자가 최신 React API를 사용하여 보다 안정적이고 효율적인 코드를 작성하도록 돕는다.

2. 의도치 않은 부수 효과를 방지

리액트 컴포넌트의 렌더링이 예측 가능하고 순수하게 이루어지기를 기대한다. StrictMode는 이를 검증하기 위해 useEffect(), useState() 등 일부 훅이나 메서드를 두 번씩 실행한다. 두 번 실행하는 이유는, 동일한 결과가 나오는지 확인함으로써 컴포넌트가 사이드 이펙트를 일으키지 않고 순수하게 동작하는지를 검사하기 위함이다.

이러한 검증이 중요한 이유는 예기치 않은 동작이나 버그를 사전에 방지하기 위해서이다. 개발 환경에서 두 번씩 실행해봤을 때 문제가 발생하지 않으면, 프로덕션에서도 안전하게 실행된다는 신호라고 볼 수 있다. 이 과정에서 부수 효과가 감지되면 개발자는 코드를 수정해야 할 필요가 있다.

Strict Mode 두 번 실행하는 예시

• 문제 상황: setInterval로 1초마다 숫자를 올리는 타이머를 만들었는데, 실수로 타이머를 끄는 코드를 안 적었다고 해보자
• Strict Mode: 개발 모드에서 컴포넌트를 두 번 실행한다. 만약 코드가 잘못되었다면 타이머가 두 개돌아가서 숫자가 평소보다 2배 빠르게 올라간다.
• 결과: 개발자는 "평소보다 왜 이렇게 빨리 올라가지?"하고 문제를 즉시 깨닫는다.

StrictMode는 개발자가 더욱 안전하고 효율적인 코드를 작성할 수 있도록 도와주는 도구이다.

코드가 두 번씩 실행되어도 성능에 괜찮을까?

이러한 현상은 개발 모드에서만 발생하고, 실제 프로덕션 빌드에서는 정상적으로 한 번만 실행되기 때문에 성능에 영향을 미치지 않는다.