[React] NPM에 없는 JS라이브러리를 로드하고 사용하는 여러가지 방법

1. 커스텀 훅 사용

장점

재사용성

같은 로직을 여러 컴포넌트에서 재사용할 수 있습니다.

분리된 관심사

로딩 로직을 컴포넌트로부터 분리하여 관리할 수 있습니다.

코드의 중복 최소화

중복되는 코드를 줄일 수 있습니다.

단점

학습 곡선

커스텀 훅을 제대로 이해하고 사용하기 위해선 React 훅에 대한 이해가 필요합니다.

---

2. 전역 상태 관리 (예: Redux, Context API)

장점

애플리케이션 전반에서 상태 공유

JS 라이브러리의 로드 상태를 앱의 모든 컴포넌트와 공유할 수 있습니다.

중앙 집중식 관리

상태를 한 곳에서 관리하여 일관성을 유지할 수 있습니다.

 

단점

복잡성

상태 관리 라이브러리의 추가적인 복잡성과 설정이 필요합니다.

오버헤드

작은 애플리케이션의 경우, 전역 상태 관리가 과도하게 느껴질 수 있습니다.

---

3. 정적 임포트 (HTML <script> 태그 사용)

장점

간단함

HTML 파일에 직접 <script> 태그를 추가하는 간단한 방법입니다.

즉시 로딩

페이지 로드 시 opencv.js가 자동으로 로드됩니다.

 

단점

초기 로드 시간 증가

페이지 로드 시간이 길어질 수 있습니다.

페이지 전체에 영향

페이지의 모든 컴포넌트가 로드될 때까지 대기해야 합니다.

---

4. 동적 임포트 (Lazy Loading)

장점

성능 최적화

필요할 때만 JS 라이브러리를 를 로드합니다.

초기 로드 시간 감소

애플리케이션의 초기 로드 시간을 단축할 수 있습니다.

 

단점

코드 분할 필요

애플리케이션의 코드 분할 및 구성이 필요합니다.

비동기 로딩

사용자가 해당 기능을 요청할 때까지 로딩이 지연될 수 있습니다.