displayName에 ‘$1’ 접미사가 붙는 현상

Published at 2025-09-10

TIL

날짜: 2025년 9월 10일

displayName에 ‘$1’ 접미사가 붙는 현상

상황

리액트 VITE 환경에서 개발을 하던 중, 이상한 현상을 마주했다.

검증을 위해 스테이징 서버에 코드를 올렸는데 일부 컴포넌트가 노출이 안되는 현상이다.

원인을 추적해보니 화면에 그리기 위한 컴포넌트를 동적으로 조합하는 과정에서, 컴포넌트의 displayName을 사용하였는데, 이를 내가 의도한대로 가져오는게 아니라 componentName$1 같이 뒤에 $1이 추가로 붙어있는 것이었다.

원인

프로젝트에서 styled-components 을 사용하고 있는데, styled-components가 컴포넌트 이름을 최적화 하면서 displayName을 바꿔버린다. 이 과정에서 $1같은 문자가 들어가게 된 것이다.

해결

컴포넌트를 구분하기 위한 name 속성을 추가하였다.