Cannot create styled-component for component 에러 해결을 위한 VScode 정규표현식

리액트 18.2.0, styled-components 6.1.8로 업그레이드 하면서

Error: Cannot create styled-component for component: undefined.

라는 오류를 만났다.

//from 
export const Wrapper = styled(PrevComponent)
//to
export const Wrapper = styled( props => <PrevComponent {...props} />)

이런 형식으로 바꿔주면 된다고 하는데 일일히 바꾸기엔 해당 문법을 써둔 코드가 너무 많았다 ... 😢

비효율을 너무 싫어하는 나는 방법을 찾았다.

VScode의 찾아바꾸기 기능을 이용해 styled(_문자열_) 을 모두
styled(props => <_문자열_> {...props} />) 형식으로 바꿔주는 것!

정규표현식을 사용하면 특정 문자열을 뽑아낼 수 있다.

VScode의 검색을 켜고 .*을 눌러 정규표현식을 활성화 후, 바꾸기 모드도 활성화 해준다.

styled\((.*?))
해당 문자를 찾아
styled(props => <$1 {...props} />)
로 바꿔주면 된다!

\( 이스케이프 문자가 붙은 괄호는 ( 이 괄호 스트링을 찾는 것이고,

(.*?)을 묶는 양옆의 괄호는 $1로 괄호안의 문자열을 치환하기 위한 괄호인 것을 주의하기 바람

공익 차원에서 정규식을 공유해본다.

조금이나마 시간 아끼고 효율적인 개발 하는 하루 되시길!