[myBudget] Styled-components 전역 스타일 적용하기

본격적으로 컴포넌트를 만들어 나가기 전에
css스타일을 리셋하고 글로벌로 사용할 값들을 정리했다.
스타일 관련 변수를 지정하는데는 두가지 방법이 있다.

css의 var()사용

: var 함수를 사용해 액세스

color: var(--blue) 의 형태로 사용

styled-components의 ThemeProvider 사용

: 리액트의 context API를 사용해 값을 하위 컴포넌트에 전달

color: ${({ theme }) => theme.color.blue}의 형태로 사용

어떤걸 사용하는게 나을지 고민스러움 전 바닐라 자바스크립트 프로젝트에서 SASS를 사용하면서 느꼈던 장점을 잘 가져갈 수 있는 방법을 선택하고 싶었다. SASS 사용시 느낀 장점?

• 전역 변수 사용
• 믹스인으로 조건문 활용
• 네스팅 문법 사용

리액트에서는 SASS 사용을 잘 안하나? 왜?

그렇다면 어떤 방법을 가져가는게 맞을까?

SSR, CSR 측면 성능 측면 코드작성의 용이성 측면 (가독성)

css variable 사용 시 변화가 필요한 컴포넌트만 리렌더 시킬 수 있다.
ThemeProvider는 모든 컴포넌트가 리렌더된다.
https://epicreact.dev/css-variables/

패키지 설치

css 초기화를 위해 styled-reset도 함께 설치한다.

npm install --save styled-components
npm install styled-reset

GlobalStyles 파일 추가

src/styles 디렉토리에 GlobalStyles.ts 파일을 추가해
아래 내용을 넣