React10일차-reactshadow

우선 바탕화면에 vscode 열고 npx create-react-app 폴더이름 해서 엔터치고 그폴더로 드가서 새터미널 열어보자

create react app

그다음 npm i react-shadow 

src/App.js 에다가

import root from "react-shadow";

추가하고

retrun 내부를 <root.div></root.div> 내부에 집어넣기

</root.div>바로위에

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

추가하고 

function  위에

const style = `p{color:red}`;

추가

그러고 npm start 해보자

이런식으로 app.css는 적용이 안되고 p태그 안에 글자가 빨간색으로 되있을꺼다

자 이게 왜 이렇게 일어나는지 알아보면

react-shadow를 통해서 root를 import 하고 모든요소를 root.div안에 넣었다. 이렇게 되면 외부에서 오는 css요소에 영향을 받지 않는 기본적인 상태가된다. 

그리고 우리는 root.div내부에<style type="text/css">{style}</style>이렇게 스타일 을 넣어 줬으니 여기 내부에 css요소는 영향을 받는다. 

우리가 {style }을const style = `p{color:red}`;이렇게 정의 했으므로 p태그 내부 글자만 빨간색으로 변한다.

이게 react shadow다 우리가 다른 요소에 영향을 받지않은 요소를 만들때 유용할거 같다.