useTripleClientMetadata / useTripleClientActions 통합

[polysiya]

useTripleClientMetadata와 useTripleClientActions를 합쳐서 useTripleNativeApp과 같은 context로 합치는 게 어떨까요?

현재의 문제점

useTripleClientMetadata로 제공되는 모든 함수는 optional인데 사실 useTripleClientMetadata의 값인 app의 존재여부에 달려있습니다.
2개의 context는 서로 의존적이지만 각각 제공되고 있고, 당연히 타입 선언도 독립적입니다.

이상적으로는 두 context를 합쳐서 아래와 같은 value를 제공하는 context가 되는 것이 좋을 것 같습니다.

type TripleNativeApp = {
  name: 'Triple-iOS' | 'Triple-Android'
  version: string
  actions: {
    // ...native-interface functions
  }
}

이렇게 변경하면 아래와 같이 됩니다.
BEFORE (코드)

  const { closeWindow } = useTripleClientActions()

  return (
    ...
      {closeWindow ? (
        <Navbar>
          <Navbar.Item floated="left" icon="back" onClick={closeWindow} />
        </Navbar>
      ) : null}
    ...
  )

AFTER

  const app = useTripleNativeApp()

  return (
    ...
      {app ? (
        <Navbar>
          <Navbar.Item floated="left" icon="back" onClick={app.actions.closeWindow} />
        </Navbar>
      ) : null}
    ...
  )

BEFORE (코드)

  const app = useTripleClientMetadata()
  const { subscribe, unsubscribe } = useTripleClientActions()

  useEffect(() => {
    if (!app) {
      const handleMessage = ({ data }: MessageEvent) => {
        handleVerifiedMessage(data)
      }

      window.addEventListener('message', handleMessage)

      return () => {
        window.removeEventListener('message', handleMessage)
      }
    } else if (subscribe && unsubscribe) {
      subscribe('receiveMessage', handleVerifiedMessage)

      return () => {
        unsubscribe('receiveMessage', handleVerifiedMessage)
      }
    }
  }, [])

AFTER

  const app = useTripleNativeApp()
  const { subscribe, unsubscribe } = useTripleClientActions()

  useEffect(() => {
    if (!app) {
      const handleMessage = ({ data }: MessageEvent) => {
        handleVerifiedMessage(data)
      }

      window.addEventListener('message', handleMessage)

      return () => {
        window.removeEventListener('message', handleMessage)
      }
    } else {
      const {
        actions: { subscribe, unsubscribe }
      } = app

      subscribe('receiveMessage', handleVerifiedMessage)

      return () => {
        unsubscribe('receiveMessage', handleVerifiedMessage)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

[drakang4]

그러면 기존 훅 2개는 제거되는건가요?

[polysiya]

deprecated 시키면 될 것 같아요. 새로 제공될 훅으로 완전히 대체하는 것을 생각했어요!