styled-components의 ThemeProvider

오늘의집 클론코딩 프로젝트를 진행하는 도중에 mainColor를 전역 변수로 사용해야함을 느꼈다. 이전에 React Native 프로젝트에서는 Context API를 사용하여 전역 변수를 사용했고, 이번에는 Redux를 사용하여 상태 관리를 하기로 했기 때문에 처음에는 Redux에 전역 변수를 저장해야겠다고 생각했다. 그래서 Redux 내에 initialState에 변수를 선언해놓고 이것을 각 페이지에서 useSelector로 불러온 후, 해당 변수를 styled-components에 props로 전달해주었다. 페이지가 많아지다보니 이러한 작업이 번거롭다고 생각했고, 더 좋은 방법을 찾아보던 중에 styled-components에서 ThemeProvider라는 기능을 제공하고 있다는 것을 알게 되었다. ThemeProvider를 알기 전에 theme에 대해서 먼저 알아보자.

---

Theme이란?

먼저 프로젝트 전체에서 사용할 목적의 변수를 모아놓은 객체를 theme이라고 한다. theme을 만들기 위해서 theme.js라는 파일을 만든다. 나는 mainColor가 필요하므로 theme.js를 아래와 같이 작성했다.

const theme = {
  mainColor: '#35c4ef',
  hoverMainColor: '#74a9d4',
}

export default theme

mainColor는 보통 버튼 색상에 쓰이는데, 이 버튼에 마우스가 올려졌을 때 조금 더 진해지는 색을 표현하기 위해 hoverMainColor도 사용했다. 이제 이를 ThemeProvider를 사용하여 전체 파일에 적용시키면 된다.

---

그래서 ThemeProvider란?

theme을 전체 파일에 간단하게 적용할 수 있도록 styled-components에서 제공하는 방법이다. App.js의 가장 상위 컴포넌트를ThemeProvider로 감싸주면 된다.

import { ThemeProvider } from 'styled-components'
import theme from './theme'

const App = () => {
	return(
    	<ThemeProvider theme={theme}>
        	...
        </ThemeProvider>
    )
}

export default App

 

위와 같이 작성한 후, 사용하고자 하는 페이지의 styled-components에서 아래와 같이 불러쓰면 된다.

const Review = styled.span`
  font-weight: bold;
  font-size: 15px;
  color: ${(props) => props.theme.mainColor};
`