[react] react-shadow

https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN

 

shadow DOM 이란?

웹 컴포넌트의 중요한 측면은 캡슐화인데 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하게 유지될 수 있게 한다.

 

간단하게 어떤 HTML 안에 본래 HTML과 영향을 주지 않는 별도의 HTML덩어리라고 보면 된다.

 

 

 

사용해보기

react 프로젝트를 열고

 터미널에 npm i react-shadow를 입력하고 설치한다.

 

 

---

기존의 import './App.css'; 을 지워주고  실행을 해보면 css가 적용되지 않는 화면이 나오게 된다.

이때 root라는 걸 react-shadow에서 가져오기 위해 import 한다.

import root from "react-shadow";

 

 

 

 

그리고 이 자체만의 스타일을 넣어주기 위해 어떤 스타일을 넣을지 선언해주자

const styles=`.......`; 

 그 안에는 css형식으로 작성해준다.

백틱기호이다 주의하자!!!

 

 

 

그리고 component를 최상위 element에 <root.div>로 감싸면 외부와 연결되지 않는

이 자체만의 document가 있는 것이다. 

 

이 자체만의 스타일을 주기 위해서는 그 안에 style이라는 태그를 주는데 

<style type="text/css">{styles}</style>

안에 style을 추가하여 위에 작성한 style을 불러온다.

 

 

 

---

단점

• 스타일이 공통적으로 쓰이는 부분이 있기 마련인데 반복적으로 넣어줘야 한다는 점
• 내부 외부가 차단되어 있기 때문에 document에 지정되어있는 값을 상대적으로 표현할 때 제약이 있다.

 

 

 

선택에 따라 장점, 단점이 있으니 css module, styled-component, react-shadow 중에 맞는 걸 찾아 사용하자