[React] ThemeProvider

ThemeProvider는 React에서 styled-components를 이용하여 스타일을 관리할 때에 다크모드와 같은 테마 전환 기능을 쉽게 사용하기 위해 사용됩니다.

---

사용법

App.js

// JSX
import { ThemeProvider } from 'styled-components';

const theme = {
    colors: {
      	primary: '#0070f3',
      	secondary: '#1db954',
    },
    border: {
      	main: '#101010',
    },
};

function App() {
	return (
        <ThemeProvider theme={theme}>
            <Wrap />
        </ThemeProvider>
    );
}

• ThemeProvider를 import합니다.
• styled-components에서 사용할 변수를 정의합니다. (theme)
• ThemeProvider를 사용할 컴포넌트를 ThemeProvider 태그로 감싸줍니다.

위와 같이 작성할 시 아래와 같이 Wrap 컴포넌트에서 theme객체를 참조할 수 있습니다.

Wrap.jsx

// JSX
const Button = styled.button`
	background-color: ${({ theme }) => theme.colors.primary};
	background-color: ${props => props.theme.colors.primary};
`;

function Wrap(props) {
	~~~
}

• ({ theme })을 사용하여 접근 가능하며 props로도 접근 가능합니다.

---

다크모드 구현하기

App.js

// JSX
import { ThemeProvider } from 'styled-components';
import { light, dark } from './style/theme';

function App() {
    const [ isdark, setIsdark ] = useState(false);
    const DarkToggle = () => {
		if (isdark){
        	setIsdark(false);
        } else {
        	setIsdark(true);
        }

    return(
    	<ThemeProvider theme={isdark ? dark : light}>
            <Wrap />
        </ThemeProvider>
    );
};

./style/theme.jsx

// JSX
export const light = {
	isdark: false,
	colors: {
      	primary: 'black',
      	secondary: '#AAAAAA',
    },
    border: {
      	main: '#101010',
    },
};

export const dark = {
  	isdark: true,
	colors: {
      	primary: 'white',
      	secondary: '#eeeeee',
    },
    border: {
      	main: '#C1C1C1',
    },
};

• 편한 관리를 위해 사용할 변수를 './style/theme'에서 따로 정의해줍니다.
  ※ light와 dark에 대응되는 변수가 있어야합니다.
• ThemeProvider을 사용하는 컴포넌트에서 state로 현재 테마를 설정해줍니다.
• 현재 설정된 테마에 따라 ThemeProvider의 theme속성에 알맞은 객체를 부여합니다. theme={isdark ? dark : light}>

• 위와 같이 isdark를 변경하는 버튼을 사용해 페이지의 스타일링을 전체적으로 변경할 수 있습니다.

---

주의사항

ThemeProvider는 context 기능처럼 감싸진 컴포넌트 모두에서 객체에 접근 가능합니다.
다만, styled-components에서만 사용이 가능하며 아래와 같이 컴포넌트 작성 내부에서는 사용할 수 없습니다.

잘못된 사용 방법

// JSX
function Wrap(props) {
	<Component
    	className = {({ theme }) => theme.isdark ? 'dark' : 'light'}
    />
}