Merge pull request #61 from HK1211/fix-53

fixed: 깃헙이슈_#53: DaumpostcodeEmbed 메소드 사용시 Document.write() 가문제가 됩니다.

Author: Normaltic

src/DaumPostcodeEmbed.tsx

@@ -42,6 +42,19 @@ const defaultProps = {
 class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
   static defaultProps = defaultProps;
 
+  /**
+   * 1. 깃헙이슈_#53: DaumpostcodeEmbed 메소드 사용시 Document.write() 가 문제가 됩니다.
+   * 2. 에러메세지: caught TypeError: Cannot read properties of null (reading 'document').
+   * 3. 원인: `loadPostcode` 함수가 두번 실행되어 발생하는 문제입니다.
+   * * React StrictMode에서는 의도적으로 라이프사이클 메소드가 두 번 호출되게 설계되어 있습니다.
+   * * 이는 개발 과정에서 부작용(side-effects)이 발생하는 것을 감지하고 문제를 미리 찾아낼 수 있도록 하는 목적이 있습니다.
+   * 4. 해결: 의도적으로 componentDidMount시 `loadPostcode` 함수가 1번만 호출하도록 변수 `mount`를 추가하여, mount값이 false 일때만 `loadPostcode`를 실행하면 해결됩니다.
+   * @see =================== 변경 내역 ==================
+   * [작성자][작업일시] - 내용
+   * [HK1211][2023-05-28 Sunday 00:48:08] - 최초작성
+   */
+  private mounted = false;
+
   wrap = createRef<HTMLDivElement>();
 
   state = {
@@ -53,7 +66,10 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
     const { scriptUrl } = this.props;
 
     if (!scriptUrl) return;
-    loadPostcode(scriptUrl).then(initiate).catch(onError);
+    if (!this.mounted) {
+      loadPostcode(scriptUrl).then(initiate).catch(onError);
+      this.mounted = true; // react@18 부터 development 환경에서 React.StrictMode 사용시 출력되는 문제해결.
+    }
   }
 
   initiate = (Postcode: PostcodeConstructor) => {