1. ThemeProvider

darkmode / lightmode 등 theme을 일괄 적용할 수 있는 친구

• 반드시 theme={}를 채워줘야 한다

1.1 구현과정

• usState 이용: App.js에 버튼 조정하는 function 형성
• themeProvider: App.js에 전체 감싸기
• MyButton.js: APP.js에서 정보를 받아오기 - 또다른 버튼 만들기에도 활용 가능하게 {clickFun, name}로 만듦

1.2 코드

index.js

import React from 'react';
import ReactDOM from "react-dom"
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import { useState } from "react";
import styled from "styled-components";
import { ThemeProvider } from 'styled-components';
import MyButton from "./MyButton";

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};
`;

// 다크모드
const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};
const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

function App() {
  const [dark, setDark] = useState(false);
  const [mode, setMode] = useState(darkTheme);
  const [name, setName] = useState('darkTheme');

  const clickFun = () => {
    setDark(!dark);
    if(dark){
      setMode(lightTheme);
      setName('lightTheme');
    }else{
      setMode(darkTheme);
      setName('darkTheme');
    }
  }

  return (
    <ThemeProvider theme={mode}>
      <Wrapper as="header">
        <MyButton
        name={name}
        clickFun={clickFun}
        />
        <Title>삐용삐용</Title>
      </Wrapper>
    </ThemeProvider>
  )
}

export default App;

• <ThemeProvider theme={mode}></ThemeProvider> 로 모드 일괄 적용
• ⚠ 주의: useState를 통해 name, mode 안하면 자동변경 안됨 !!!

MyButton.js

import styled from "styled-components";

const Button = styled.button`
  border: none;
  padding: 15px 30px;
  border-radius: 15px;
  text-decoration: none;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  position: absolute;
  top: 30px;
  color: ${(props) => props.theme.textColor};
  background-color: ${(props) => props.theme.backgroundColor};
`;

function MyButton({clickFun, name}) {
  return (
    <Button onClick={clickFun}>{name}</Button>
  )
}

export default MyButton;

• 필수는 아니지만 그냥 버튼 따로 만들면 이쁘니까 새로운 페이지로 분리함
• props: App.js의 ThemeProvider 결과를 가져올 수 있음

1.3 결과

• 다크모드
  
• 라이트모드