[React] Style Components - 5 다크모드, 라이트모드 (Themes)

 

1. theme적용

 

이번 포스팅에서는 style Component의 themes에 대해서 알아볼 것 이다.

 

theme 이란, 기본적으로 모든 색상들을 가지고 있는 object이고, 

모든 색깔을 하나의 Ojbect 안에 넣어놨기 때문에 매우 유용하다. 

왜냐하면 나중에 색깔을 바꿀 때 그 Component의 색상을 일일이 바꿔주는게 아니라 Ojbect만 바꿔주면 되기 떄문이다. 

우리가 다크모드를 구현한다고 하면, 50%는 Theme의 역할이라고 보면 되고, 나머지 50%는 local State Management라고 알고 있으면 된다. 

 

 

---

theme을 적용해보자

1. theme을 실행하기 위해선 index.jsx를 수정해줘야한다. (import ThemeProvider... )

 

================index.js================

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

//이렇게만 처리해주면 50%에 지나지 않는다.
const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};
//이렇게만 처리해주면 50%에 지나지 않는다.


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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals


================App.js================

import styled from "styled-components";

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

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

export default App;

================App.js================

위와 같은 코드를 적용하면 결국엔 50%에 지나지 않는다.

그럼 어떻게 Theme을 사용하는 것 일까?

위 코드를 보면 우리의  App이 ThemeProvider 안에 있는 것을 확인할 수 있는데

결과적으로 원한다면 우리의 component들이 색에 접근할 수 있다는 것 이다.

 

여기서 index.js에서 정의한 theme property 이름이 같아야 한다.

만약 property가 다르다면 문제가 생길 수 있는데

이렇게 오타를 냈을때 typescript를 사용하면 Typescript가 알려줄 것 이다.

 

다음 포스팅에는 typescript와 styled-components를 같이 사용하는 방법을 포스팅 할 예정이다.