TipTap 소스 코드에서 useSyncExternalStore 활용법 깊이보기

TipTap에서 useSyncExternalStore란 무엇인가?

오픈소스 라이브러리 TipTap의 특정 기능에 주목하다 보면 useSyncExternalStore의 역할을 간과할 수 없습니다. 이 React Hook은 어떤 의미에서 혁신적이며, 상태 동기화의 중요성을 제공합니다. 이 글에서는 TipTap 코드베이스 내에서 useSyncExternalStore의 사용법을 심도 있게 분석하고자 합니다.

TipTap 소스 내 쓰임새: 개요

useSyncExternalStore는 TipTap 소스 코드 내 여러 파일에서 나타납니다. 주요한 3곳은 다음과 같습니다:

• EditorContent.tsx
• useEditorState.ts
• useEditor.ts

각 파일이 useSyncExternalStore를 사용함으로써 얻는 이점과 그 구현 세부사항을 분석해보겠습니다.

EditorContent.tsx에서의 사용법

EditorContent.tsx 파일은 TipTap에서 편집기 뷰의 렌더링을 담당하는 주요 컴포넌트 중 하나입니다. 여기서 useSyncExternalStore의 역할은 변화 주기에 따라 효율적으로 노드 뷰를 업데이트하는 것입니다.

import { useSyncExternalStore } from 'use-sync-external-store/shim'

const Portals: React.FC<{ contentComponent: ContentComponent }> = ({ contentComponent }) => {
  const renderers = useSyncExternalStore(
    contentComponent.subscribe,
    contentComponent.getSnapshot,
    contentComponent.getServerSnapshot,
  )

  return (
    <>
      {Object.values(renderers)}
    </>
  )
}

성능 최적화의 중요성

위에서 보듯이, "상태 변경 시에만 노드 뷰 포털을 렌더링"하여 성능 최적화를 달성합니다. 이는 대량의 데이터 핸들링 시 매우 유용하며, 사용자 경험을 저해하지 않도록 하는 핵심 기법입니다.

useEditorState.ts와 상태 관찰

useEditorState.ts 파일은 TipTap의 상태 스냅샷을 가져오는 데 중점을 둡니다. selector 기능을 추가하여 변화하는 편집기의 일부분에 대해 관리하고자 합니다.

import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'

export function useEditorState(options: UseEditorStateOptions) {
  const [editorStateManager] = useState(() => new EditorStateManager(options.editor))

  const selectedState = useSyncExternalStoreWithSelector(
    editorStateManager.subscribe,
    editorStateManager.getSnapshot,
    editorStateManager.getServerSnapshot,
    options.selector as UseEditorStateOptions['selector'],
    options.equalityFn ?? deepEqual,
  )

  useIsomorphicLayoutEffect(() => {
    return editorStateManager.watch(options.editor)
  }, [options.editor, editorStateManager])

  useDebugValue(selectedState)

  return selectedState
}

useSyncExternalStoreWithSelector의 효율성

이 파일에서는 useSyncExternalStoreWithSelector를 사용하여 효율적으로 스냅샷을 선택하고, 그에 따라 변경이 발생할 때마다 컴포넌트를 재렌더링하게 합니다. 이는 코드의 명료성과 성능을 모두 잡을 수 있는 디자인 패턴을 구축합니다.

useEditor.ts의 역할과 활용

useEditor.ts는 편집기의 주요 엔티티이며, 이 컴포넌트는 외부 상태를 에디터 관리에 이용합니다. useSyncExternalStore을 활용해 최신 에디터 인스턴스를 관리합니다.

import { useSyncExternalStore } from 'use-sync-external-store/shim'

export function useEditor(options: UseEditorOptions = {}, deps: DependencyList = []) {
  const mostRecentOptions = useRef(options)
  mostRecentOptions.current = options

  const [instanceManager] = useState(() => new EditorInstanceManager(mostRecentOptions))

  const editor = useSyncExternalStore(
    instanceManager.subscribe,
    instanceManager.getEditor,
    instanceManager.getServerSnapshot,
  )

  useDebugValue(editor)

외부 상태 관리의 컴팩트한 적용

useSyncExternalStore는 이 파일에서 외부 스토어인 instanceManager를 사용하여 편집기 상태를 지속적으로 동기화합니다. 이는 사용자가 편집기를 사용하는 동안 최적의 성능과 최신 상태 유지를 보장합니다.

결론과 참고 자료

useSyncExternalStore는 TipTap에서 성능과 상태 관리의 핵심을 이루는 기능적 요소입니다. 이 기능을 올바르게 이해하고 활용하면, 복잡한 사용자 인터페이스 요구 사항을 충족할 수 있습니다. React의 다양한 훅과 함께 사용함으로써, 성능 최적화와 코드의 유지 보수가 더 쉬워집니다.

더 읽어보기

1. TipTap GitHub
2. React Docs: useSyncExternalStore

위 자료들은 깊이 있는 이해를 위한 훌륭한 출발점이 될 것입니다.