[01.31] 글로벌 스타일, 스타일드컴포넌트, 테마

💥 글로벌 스타일

global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링 적용

 

💥 왜 일관된 스타일링을 위해서 이런 작업이 필요할까?

1) user agent stylesheet 로 표시되는 브라우저의 기본 스타일이 차이를 만든다

2) 브라우저 간의 스타일 차이를 극복하기 위해 사용

 

💥 다양한 해결책

1) 에릭마이어의 reset css

2) normalize.css

3) sanitize.css

 

💥 스타일드컴포넌트

최근 가장 많이 사용되는 css-in-js 중 하나이다.

 

💥 css-in-js의 필요성

1) 전역 충돌

2) 의존성 관리 어려움

3) 불필요한 코드, 오버라이딩

4) 압축

5) 상태 공유 어려움

6) 순서와 명시도

7) 캡슐화

 

💥 테마(Theme) 사용의 이유

1) UI, UX의 일관성 유지

2) 유지보수가 용이

3) 확장성

4) 재사용성

5) 사용자 정의

 

💥 Theme Switcher with Context API

1) 사용자는 토글 UI를 통해 웹사이트의 색상 테마를 바꿀 수 있다.

2) 색상 테마는 전역상태로 존재한다

3) 사용자가 선택한 테마는 로컬스토리지에 저장한다.

 

💥 실습

요즘 어플들을 사용하다보면 '다크모드', '일반모드' 를 자주 보게된다.

실제로 보면서 저건 진짜 따로따로 파일을 만들어서 관리하려나? 하는 생각도 들었다.

언제 한 번 저런 유형의 어플을 clone 해보고 싶기도 했다.

근데 이번 수업에서 다행히 비슷한 유형을 듣게 되어서 좀 재밌었다.

theme.ts 의 파일에 light 버전과 dark 버전의 스타일링을 간단하게 적었다.

그리고 역시나 export 해서 다른 파일에서도 사용할 수 있게 해주었다.

themeContext.tsx 파일에선 프로젝트의 모든 테마에 대한 내용이 들어있다.

theme.ts 에서 css를 수정을 하면 바로 적용이 되는 순환구조 를 만든 것이다.

버튼을 누르면 light 버전에서 dark 버전으로, dark 버전에서 light 버전으로 바뀌는 toggleTheme도 만들어보았다.

그리고 격리를 해놓으면 나중에 편하게 쓸 수 있기 때문에 ThemeContext.Provider를 제공하고 스타일드 컴포넌트의 themeprovider랑 globalstyle 까지 한 번에 모아놓았다.

원래 이렇게 light 한 테마였지만, 가장 위에 있는 light 버튼을 누르면?

이렇게 dark 한 테마로 변하게 된다.

물론 버튼에도 light 글자가 dark로 변하게 된다.