붉은거위 노트 (redgoose note)

[react] 컴포넌트 전용 스타일시트 적용하기 (css scope)

Nest
Development
Category
Javascript
Hit
1435
Star
3

xwdpchvb9w0vdemuggao.webp

vue.js에서는 <style scoped> 키워드로 손쉽게 컴포넌트 전용 스타일시트를 작성하여 셀렉터 충돌을 피할 수 있다.
하지만 예전에 react 개발을 할때는 그리하지 못하여 컴포넌트를 엘리먼트와 스타일시트를 같이 패키징 할 수 없어서 여러모로 관리하기 불편했지만 그새 좋은방법이 나온듯..

참고링크


셀렉터와 dom attribute 값들이 data-v-{hash} 형식으로 표현되면서 이름을 똑같이 서로 다른 컴포넌트에서 같은 이름을 사용하더라도 독립적으로 스타일링을 할 수 있게되었다.
vue에서는 기본적으로 사용할 수 있는 기능이다.

이게 된다면 완벽하게 컴포넌트 단위로 묶어서 개발할 수 있을것이다.
커스터마이즈 css값은 var()로 사용하면 유연하게 값들을 처리할 수 있을것이라서 react에서 개발도 상당히 괜찮아질것이다.
다시 react를 손대볼까 자꾸 유혹에 빠져들어 관련 라이브러리나 기술들을 조금씩 보곤한다.