컴포넌트 합성과 커스텀훅으로 리펙토링

useDeviceSetting 훅을 통해 디바이스 설정을 가져오는 로직을 분리합니다.

//hoot.ts

import { FETCH_DEVICE_KEY } from ".";

declare const window: Window & {
  ReactNativeWebView: {
    postMessage: (message: string) => void;
  };
};

export const useDeviceSetting = () => {
  const fetchApp = async ({ query }) => {
    const result = await new Promise((resolve) => {
      FETCH_DEVICE_KEY[query] = resolve;
      window.ReactNativeWebView.postMessage(JSON.stringify({ query }));
    });
    return result;
  };

  return {
    fetchApp,
  };
};

//index.ts

"use client";

import { useEffect } from "react";

export const FETCH_DEVICE_KEY: any = {
  // fetchDeviceSystemForAppSet: resolve
  // ...
  // ...
};

export default function DeviceSetting({ children }) {
  useEffect(() => {
    // 1. 안드로이드에서 수신 대기
    document.addEventListener("message", (message: any) => {
      if (!message.data) return;
      const response = JSON.parse(message.data);
      const query = Object.keys(response)[0];
      const resolve = FETCH_DEVICE_KEY[query];
      resolve({ data: response });
      delete FETCH_DEVICE_KEY[query];
    });

    // 2. IOS에서 수신 대기
    window.addEventListener("message", (message: any) => {
      if (!message.data) return;
      const response = JSON.parse(message.data);
      const query = Object.keys(response)[0];
      const resolve = FETCH_DEVICE_KEY[query];
      resolve({ data: response });
      delete FETCH_DEVICE_KEY[query];
    });
  }, []);

  return <>{children}</>;
}

리펙토링을 함으로써 볼 수 있는 장점은 다음과 같습니다.

1. 가독성 향상 : 각 컴포넌트가 독립적으로 기능을 수행하므로, 코드가 더 이해하기 쉬워집니다.
2. 재사용성 증가 : 커스텀 훅을 사용하여 여러 컴포넌트에서 동일한 로직을 재사용 할 수 있습니다.
3. 유지보수 용이: 각 기능이 별도의 컴포넌트로 분리되어 있어, 특정 기능을 수행할 때 다른 부분에 영향을 주지 않습니다.

이렇게 리팩토링을 통해 코드를 개선하면, 나중에 프로젝트가 커져도 관리하기 쉬운 구조를 유지할 수 있습니다!