사용하는 이유
큰 프로젝트는 컴포넌트가 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;
'Front-End > React' 카테고리의 다른 글
[React] state의 배치업데이트 cf) useEffect/onchange (0) | 2023.11.05 |
---|---|
[React] 불변성이란? 리액트에서 state를 사용할때 불변성을 지켜주는이유 (0) | 2023.11.05 |
[React] 컴포넌트 파일 자동완성기능 (rfce) (0) | 2023.11.05 |
[React] 필기 (0) | 2023.10.22 |
react 공부한것 기록-3 (0) | 2023.06.15 |