globalStyle? ThemeProvider?

안녕하세요 웹 YB 이윤지 입니다.

벌써 4주차네요! 합동 세미나도 당장 이번 주를 앞두고 있네요 ㅎㅎ

오늘은 구현 명세서에 제일 상단에 있던 ThemeProvider, GlobalStyle 에 대해서 알아볼까 합니다!

왜냐하면 제가 처음 봤거든요! (사실 뭔들 처음이 아닐까 싶지만)

사실 어떻게 사용해야되는지 물음표를 굉장히 많이 띄운 상태로 과제를 냅다 시작했기 때문에

정리하는 차원에서 이번 주차 아티클을 작성하게 되었습니다. 😊

 

1. globalStyle(전역 스타일링)

globalStyle 이란 우리가 만들고 있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미합니다.

 

그니까 한 마디로 모든 html 요소에 대해서 공통적인 스타일을 가지는 거죠.

예를 들어 

• 모든 li 태그에서 list-style 제거하기
• a 태그에서 text-decoration 제거하기
• button 태그에 cursor: pointer 지정하기

등이 있겠네요!

 

globalStyle의 장점은

일반적인 styled-components 는 자동으로 클래스 범위가 지정되어 다른 컴포넌트로부터 격리되지만,
createGlobalStyle 은 이러한 제한이 없어서 전역 스타일링이 가능하다!

 

내부 문법은 css와 동일합니다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  button {
    cursor: pointer;
  }
`;

export default GlobalStyle;

이런 식으로 적어주면 되겠죠!

 

프로젝트에 이 globalStyle 을 적용하는 방법은 쉽습니다.

GlobalStyle 을 import 하면 되거든요!

 

이렇게 전역 스타일링을 해주면 button 이나 input 마다 작성해야 할 코드도 줄고, 렌더링되는 모든 폰트에 제가 설정한 폰트가 적용되고.. 컴포넌트 스타일링에서 할 일이 많이 줄어듭니다.👍

 

2. ThemeProvider

ThemeProvider 을 구글링하면서 가장 많이 나왔던 예제는 바로 '다크모드' 인데요,

다크모드를 개발하려면 어떻게 해야할까요? 

const Container = styled.div<{mode: boolean}>`
  background-color: ${(props) => props.mode ? "#000000" : "#ffffff"};
`

 

방법 중 하나로 

방법 중 하나로  위와 같이 props로 전달 받은 mode를 기준으로 true면 검정색, false면 흰색으로 배경색을 지정해줄 수 있겠죠.

그런데 props로 전달해줘야하는 컴포넌트들이 100개가 넘어간다고 가정해보면...

끄악

혹은 디자이너가 '배경이 너무 어두운 느낌이라 값을 #464545로 바꿔주세요.' 라고 한다면?

100개가 넘어가는 컴포넌트들에 대해서 노가다를 열심히 해주면 되겠죠....😂😂

생각만해도 끔찍하죠? 그럴 때 쓰는 것이 바로 "ThemeProvider" 입니다.

 

👍ThemeProvider의 장점

• 일관된 디자인: 모든 컴포넌트에서 동일한 색상, 폰트, 간격 등의 스타일을 사용하므로 디자인에 일관성이 생긴다.
• 테마 관리 용이성: 테마를 한 곳에서 관리하므로 테마가 변경되거나 업데이트 되어야할 필요가 생기면 한 곳에서만 수정하면 된다. 따라서 여러 컴포넌트를 일일이 수정할 필요가 없어져 유지보수가 용이해진다.
• 컴포넌트 간 상태 공유: 사용자 설정에 따라 테마를 변경하고 모든 하위 컴포넌트에 적용할 수 있다.

사용법도 간단합니다. 

우선 theme.ts 파일을 만들어서 전역에서 사용되어질 변수들과 값을 세팅해주면 되는데요.

export const lightTheme = {
    color:{
        fontColor: "black",
        bgColor: "white",
        navBorder: "#D9D9D9",
        chatBorder: "#D9D9D9" 
    }
}

export const darkTheme = {
    color:{
        fontColor: "white",
        bgColor: "#555A5F",
        navBorder: "black",
        chatBorder: "#D9D9D9"
    }
}

이렇게 파일을 작성했으면 App.tsx 파일로 슈슝~!

 

import { darkTheme, lightTheme } from './stlyes/theme';
import { ThemeProvider } from 'styled-components';

function App() {
  const [themeMode, setThemeMode] = useRecoilState(themeState);
  let theme = themeMode ? lightTheme : darkTheme;
  
  return (
      <ThemeProvider theme={theme}>	// 테마 지정
        <BrowserRouter>
        </BrowserRouter>
      </ThemeProvider>
  );
}

 

앞서 만들었던 theme.ts 파일에서 만들었던 darkTheme, lightTheme 을 import 하고 rocoil 을 사용해서 상태 변화에 맞춰 theme props 에 전달합니다.

저 코드에서는 themeMode가 true 면 라이트, false면 다크를 props 로 넘겨주는 걸 확인 가능합니다.

 

const MainContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: ${props => props.theme.color.bgColor};
  color: ${props => props.theme.color.fontColor};
`;

 

그리고 앞서 만들었던 Theme를 위와 같은 방식으로 컴포넌트에 적용할 수 있는데요,

앞서 말했듯 MainContainer의 하위 컴포넌트들은 따로 색이나 테마를 지정해주지 않는 이상,

상위 컴포넌트인 MainContainer과 같은 테마가 적용되는 것을 확인할 수 있습니다.

 

ThemeProvider는 ContextAPI를 이용해 리액트 컴포넌트에게 Theme 속성을 전달할 수 있으며,
컴포넌트의 depth가 깊어지더라도 루트 위치에 ThemeProvider가 있다면
모든 렌더 트리의 자식에는 theme 속성을 가지게 된다.

 

 

이렇게 해서 GlobalStyle과 ThemeProvider의 기본 개념과 활용법을 살펴봤습니다!

 

간단히 요약하자면:

• GlobalStyle은 앱 전체에 기본 스타일을 적용하여 코드 중복을 줄이고 일관된 UI를 만들어준다
• ThemeProvider는 전역 테마 관리를 통해 컴포넌트의 일관성을 높이고, 유지보수를 쉽게 해준다.

가 되겠네요! 

 

ThemeProvider 은 간단한 예제인 "다크모드로 바꾸기" 가 가장 많이 보여서 저도 한 번 따라서 쳐봤는데, 확실히 스타일 관리가 훨씬 간편해지는 걸 체감할 수 있겠더라구요. 😊

코드도 훨씬 깔끔해지고, 스타일을 수정할 때 전역적으로 한 번에 변경할 수 있다는 것이 가장 큰 장점이라고 생각했습니다!

 

이렇게 ThemeProvider 과 GlobalStyle 을 사용하면 코드의 가독성, 그리고 유지보수가 훨 쉬워지는데요,

이제 곧 다가오는 합동 세미나에서도 어떻게 적용시킬지 생각해봐야겠어요!

그럼 다들 합동세미나 화이팅~!