styled componets - Themes

오늘의 한마디

테마 설정

프로젝트를 진행 했을때 Themes를 사용한적이 없었는데 다음 프로젝트에는
적극활용해서 해보려고한다!!

일단 간단하게 사용방법을 정리해보겠습니다.

//index.jsx
import React from 'react';
import React-dom from 'react-dom';
import { ThemeProvider } from 'styled-components';
import App from './App';

ReactDom.render(
	<React.ScritMode>
    	<ThemeProvider>
        	<App />
        </ThemeProvider>
    </React.ScritMode>
  	document.getElementById("root")
);

먼저 최상위 index 파일에서 styled-components에서
ThemeProvider 컴포넌트를 불러옵니다.
그런뒤 App컴포넌트를 감싸줍니다.

ThemeProvider?

이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 있는 모든 React 구성 요소에 테마를 제공합니다.
렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스할 수 있습니다.

//index.jsx
import React from 'react';
import React-dom from 'react-dom';
import { ThemeProvider } from 'styled-components';
import App from './App';

const darkTheme = {
	textColor : white;
}
// 객체형식으로 지정해둡니다.

ReactDom.render(
	<React.ScritMode>
    	<ThemeProvider theme={darkTheme}>
        	<App />
        </ThemeProvider>
    </React.ScritMode>
  	document.getElementById("root")
);

ThemeProvider 컴포넌트에 theme라는 props에 미리 만들어둔 데이터를 할당하여 보내줍니다.

컴포넌트에서 theme값 가져오기

const Box = styled.div`
	text-color: ${prop => prop.theme.textColor}
`
//...이하 생략

Theme는 미리 반복되는 메인컬러 메인텍스트 등을 설정해두면 정말 편리하게
코딩할 수 있을것이다~!! 적극 도입해서 프로젝트를 시작해봅시다~!!

그동안 너무 비효율적으로 짠것같은...

자 어느정도 기본 정리는 끝났습니다.
추가 정보 있을 시 꾸준히 업데이트 후 관리하겠습니다.
드디어 머리가 좀 정리가 되네요.