[Issue] SVG를 React 컴포넌트로 사용 시 오류

문제 상황

import { ReactComponent as upIconSVG } from '../../assets/Icon/UpIcon.svg';

위와 같이 UPIcon.svg 파일을 upIconSVG라는 이름의 React 컴포넌트로 불러와 JSX로 렌더링하려고 했더니 아래와 같이 JSX.IntrinsicElements 형식에 upIconSVG 속성이 없다는 오류가 발생했다.

문제 이유

처음엔 webpack 설정에 문제가 있나 고민했는데 찾아낸 이유는 아주 간단했다. Element가 < upIcon />과 같이 소문자로 시작하여 문제가 되었던 것이다. 소문자로 시작하는 경우, React에서 내장 컴포넌트로 해석되는데 upIcon은 import한 컴포넌트이기 때문이다.

Element가 소문자로 시작하는 경우

< div >나 < span > 같은 내장 컴포넌트라는 것을 뜻하며 'div'나 'span' 같은 문자열 형태로 React.createElement에 전달된다.

Element가 대문자로 시작하는 경우

< Foo /> 와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import한 컴포넌트를 가리킨다.

문제 해결

import { ReactComponent as UpIconSVG } from '../../assets/Icon/UpIcon.svg';

위와 같이 대문자로 시작하도록 바꿔주니 정상작동했다.

참고 자료

React 공식문서 > JSX 이해하기 > React Element의 타입 지정하기