[React] Global Style 적용하기

👋 createGlobalStyles를 이용하여 전역 스타일링을 설정해보자! (TIL 231124)

💡 전역 스타일링 Global Styling

하나의 프로젝트를 만들다보면 여러 개의 컴포넌트에 동일하게 적용해야 하는 스타일이 존재한다.
이 때 css를 통해 이를 구현할 수도 있지만, createGlobalStyles를 통해서도 전역 스타일링을 구현할 수 있다.

이를 통해 styled-components에서 margin, padding, font-family 같은 global 한 속성을 적용시킬 수 있다.

styled-components 설치

npm install styled-components

💡 전역 스타일링 적용하기

createGlobalStyles를 import 해주고 백틱 사이에 스타일링 값을 적어주면 된다.
이 때 createGlobalStyles 후에 따옴표가 아닌 백틱(`)을 써야함!

import { createGlobalStyles } from 'styled-components'

const GlobalStyles = createGlobalStyle`
	//내용
`

이후 해당 styled-component를 App.tsx 에 import 하여 적용하고자 하는 컴포넌트의 외곽에 적어주면 전역 스타일링이 적용된다.

import GlobalStyles from './style/global';

function App() {
  return (
    <>
      <GlobalStyle/>
        <div className="App">
          <div>Test !!</div>
        </div>
    </>
  );
}

---

💡 styled-reset

styled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지 이다.

브라우저에는 기본적으로 적용되어 있는 스타일이 있다.
이 것으로 인해 원하지 않는 margin이나 padding을 겪은 경우가 많을 것이다. (일단 나부터...)
따라서 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다!
또 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징을 위해서이다.
-> 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함!

크로스 브라우징: 웹 제작시에 모든 브라우저에서 깨지지 않고 의도한대로 나오게 하는 호환성 작업

styled-reset 설치

npm install styled-reset
yarn add styled-reset

💡 {reset} 적용하기

GlobalStyles 컴포넌트의 맨 앞에 ${reset}을 추가한다.

import { createGlobalStyles } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
	${reset}
	body {
		background-color: rgb(0,0,0)
	}
`

[내용 참조] https://velog.io/@daymoon_/React-styled-reset