React : react-shadow 사용법 , style 독립적으로 넣고 싶을때, App.js 와 index.css 스타일 분리

react-shadow 설치

npm i react-shadow

react-shadow 정의 및 사용법

리액트 첫 설치시 구조는
index.html 내부에 App이라는 id 값에 App.js 가 들어간 구조로 이뤄져 있다.
때문에 index.css 파일이 있는 경우 하위 요소인 App.js 에 모든 스타일에 영향을 주게되는데, index.html 에만 사용하고 App.js에는 적용되지 않도록 자식요소의 스타일을 부모와 독립시킬 수 있다

이때 사용하는 것이 react-shadow 이다.

예시) App.js 에 넣어진 스타일과 index.css 스타일을 분리하고 싶다
1. react-shadow 를 독립되어질 컴포넌트에 불러온다
2.<root.div></root.div>로 독립되어질 요소를 감싸준다
3.</root.div> 직전에 <style type="text/css"> 넣을 스타일 </style> 넣어준다
4. const 변수명 = `` => 백킷 안에 스타일 요소를 넣어 '넣을 스타일 ' 부분에 {변수명}으로 넣어줄 수 있다.

import root from "react-shadow";


const styles = `
.App {
  text-align: center;
}
`


function App() {
  return (
    <root.div> //root.div 사용해 독립된 요소로 분리
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
      <style type="text/css">{styles}</style>  //스타일
    </root.div>
  );
}

export default App;

이렇게 하면 스타일 요소를 독립적으로 분리해서 사용하는것이 가능하다!