[React] 전역 스타일링 쓰는 이유와 사용 예시

사용하는 이유

큰 프로젝트는 컴포넌트가 1000개 이렇게 되는데 거기서 공통적으로 쓰이는것을 다 똑같이 적어서 쓰면 매우 비효율적이라서 공통적인것을 따로 빼서씀

 

//GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

위와 같이 파일을 만들어놓고 

 

App.js 에서는 글로벌 컴포넌트를 가져다 이렇게 쓴다

//App.js
import GlobalStyle from "./GlobalStyle";
import Test from "./Test";

function App() {
	const title = 'exam';
	const contents = 'exam2';
  return (
    <>
      <GlobalStyle />
      <Test title={title} contents={contents} />
    </>
  );
}

export default App;