SVG Dynamic import
nextjs 에서 svg 파일을 컴포넌트로 활용하기 위해서는 @svgr/webpack 플러그인 설치 및 추가 설정을 추가해줘야 됩니다.설치
next.config.js 설정
컴포넌트로 사용하기
위와 같은 과정을 거치면 이제 프로젝트에서
svg를 import하여 컴포넌트로 쉽게 사용 할 수 있게 되었습니다.하지만 뭔가 좀 아쉽습니다. 필요한
svg를 매번 import 해야된다니… 귀찮네요ㅎ 다른 방법이 없을까요?그래서 생각했던 방법으로
Icon 이라는 공통 컴포넌트 내에 모든 svg를 import 하여 다음과 같이 key, value로 매칭 시켜주는것이었습니다. 괜찮은 방법 이었지만 매번 새로운 svg 파일이 추가될 때마다 공통 컴포넌트내에서 매칭을 시켜주는 추가 작업이 필요했습니다. 좀 더 동적으로 불러올수 있는 방법을 고민해 봐야겠습니다.동적으로 불러오기
svg 컴포넌트를 동적으로 불러오기 위한 작업으로 다음과 같은 방식으로 코드를 수정했습니다. 주요 로직은 다음과 같습니다.
useEffect훅에서 props로 받아온 name 값을 활용하여svg컴포넌트를 import 하여 받아온mod.default값을 ref에 할당, isLoading 값을false로 변경
- 비동기적으로 불어오는 영향으로 발생하는 컴포넌트 랜더링 지연 현상을 커버하기 위한 Skeleton 적용
야호~ 이제 svg가 추가될 때마다 공통 컴포넌트 내에서 매칭 작업을 할 필요 없이, name 값을 통해 원하는 svg를 불러와서 컴포넌트로 사용할 수 있습니다.
장점:
- 렌더링 최적화: svg 파일을 컴포넌트로 동적으로 불러오기 때문에 실제 필요한 시점에만 렌더링되도록 할 수 있습니다.
- 상태에 따른 로딩: 동적으로 불러오는 상태로 상황에 따라 로딩 여부를 결정 할 수 있습니다.
단점:
- 렌더링 지연: 동적으로 불러오는 과정은 비동기적으로 진행되기 때문에, svg를 컴포넌트로 받아오는 동안 빈 공간으로 노출될 수 있습니다.