[react] 컴포넌트 전용 스타일시트 적용하기 (css scope)
- Nest
- Development
- Category
- Javascript
- Hit
- 1599
- Star
- 3
vue.js
에서는 <style scoped>
키워드로 손쉽게 컴포넌트 전용 스타일시트를 작성하여 셀렉터 충돌을 피할 수 있다.
하지만 예전에 react 개발을 할때는 그리하지 못하여 컴포넌트를 엘리먼트와 스타일시트를 같이 패키징 할 수 없어서 여러모로 관리하기 불편했지만 그새 좋은방법이 나온듯..
참고링크
- https://dev.to/viclafouch/how-to-scope-your-css-scss-in-react-js-271a
- https://min9nim.github.io/2020/04/react-scoped-css/ (한글문서)
셀렉터와 dom attribute 값들이 data-v-{hash}
형식으로 표현되면서 이름을 똑같이 서로 다른 컴포넌트에서 같은 이름을 사용하더라도 독립적으로 스타일링을 할 수 있게되었다.vue
에서는 기본적으로 사용할 수 있는 기능이다.
이게 된다면 완벽하게 컴포넌트 단위로 묶어서 개발할 수 있을것이다.
커스터마이즈 css값은 var()
로 사용하면 유연하게 값들을 처리할 수 있을것이라서 react에서 개발도 상당히 괜찮아질것이다.
다시 react를 손대볼까 자꾸 유혹에 빠져들어 관련 라이브러리나 기술들을 조금씩 보곤한다.