#2.7 Themes

본 포스팅은 노마드코더의 ReactJs 마스터 클래스 강의를 수강하고 작성되었습니다.

우리가 다크모드를 구현한다고 하면, 50%는 theme의 역할 & 나머지 50%는 local Estate Manangement

본 포스팅에서는 theme을 먼저 배운다.

📌 theme이란

• 기본적으로 모든 색상들을 가지고 있는 object
• 모든 색들을 하나의 object 안에 넣어서 아주 유용함
• ∵ 나중에 색을 바꿀 때, 해당 object만 바꿔주면 됨 (component의 색을 일일이 바꾸는게 X)

📌 theme 실행시키기

1. theme을 실행시키기 위해서는 index.js로 가야한다.
2. ThemeProvider이라는 것을 styled-components로부터 import한다.
3. App을 ThemeProvider로 감싸준다.
4. ThemeProvider는 prop 1개를 필요로 한다.
   -> theme이라는 prop이다.
5. 우리의 App이 ThemePorivder 안에 有 때문에, 원한다면 우리의 component들이 색에 접근할 수 有
   • 예를 들어서, App.js에서 styled-components 내에서 다음과 같이 접근할 수 있다.

		const Title = styled.h1`
			color: ${(props) => props.theme.textColor};
		`;

아래는 index.js의 전체 코드이다.

import React from "react";
import ReactDOM from "react-dom";
import {ThemeProvider} from "styled-components";
import App from "./App";

//theme에 어떤 색을 사용할 것인지를 구체적으로 결정
const darkTheme = {
  textColor:"whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor:"#111",
  backgroundColor: "whitesmoke",
};


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

∴ index.js에서 동일한 속성 명(textColor, backgroundColor...) 등을 사용하고, ThemeProvider의 theme에 이를 작성함으로써, 그 태그안에 있는 모든 것들이 props로 색을 변경할 수 있게 되는 것!

∴ components들은 그냥 theme에서 가져오는 것 이므로, components들을 바꿔줄 필요 X

❗❗dark/light mode를 가지고 싶다면, property들의 이름이 똑같아야함! ❗❗