Post

리액트의 StrictMode

리액트의 StrictMode

리액트의 Strict Mode에 대해서 설명해주세요 !

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

1. 오래된 코드와 비권장 API 감지

리액트에서는 이제 사용하지 않는 메서드들이 있습니다.

  • componentWillMount()
  • componentWillReceiveProps()

StrictMode는 이러한 메서드들이 코드에 포함된 경우 경고를 표시해줍니다.

2. 의도치 않은 부수 효과(Side Effect) 확인

리액트는 컴포넌트의 렌더링이 예측 가능하고 순수하게 이루어지기를 기대합니다.

  • 이를 검증하기 위해 useEffect, useState 등 일부 훅이나 메서드를 일부러 두 번씩 실행합니다.
  • 두 번 실행해도 동일한 결과가 나오면 OK
  • 만약 부수 효과가 드러나면 코드 수정이 필요하다는 신호 ❌

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

👉 즉, 안전한 컴포넌트인지 테스트하는 과정

코드가 두 번씩 실행되면 성능에 문제가 발생하지 않나요? 🤔

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


Summary

StrictMode는:

  • 오래된 코드 감지
  • 부수 효과 검사
  • 안정적인 앱 개발 지원

즉, 개발자에게 더 안전하고 효율적인 코드 작성을 도와주는 리액트의 “안전망” 역할을 합니다.


END

This post is licensed under CC BY 4.0 by the author.