REACT useContext을 이용한 darkmode 만들기

REACT useContext를 이용하여 props을 전역 변수로 만들어서 darkmode를 만들어보자

 

 

 

[기초단계]

1. styled-components를 이용할 것이므로 설치한다.

 터미널에서 yarn을 이용하여 설치한다.

yarn add styled-components

 

2. src폴더 내에 Components 폴더를 만들어서 세가지 js를 만든다.

앞글자는 대문자

 

3. 각각의 Components파일 내에 rsc + tab, enter를 누르면 함수형 컴포넌트가 만들어진다.

 

4. app.js에 세가지 Components를 연결한다.

 

5. 터미널에서  'yarn start'해서 확인

 

 

 

 

[실행단계]

1. 각각의 컴포넌트에 내용작성하고 styled-components로 꾸며준다.

시멘틱태그 사용할 경우 : const 변수이름 = styled.시멘틱태그이름` css내용 `;

시멘틱태그 사용 안 할 경우 : const 변수이름 = styled(이름)` css내용 `;

/////////////Header////////////////
import React from 'react';
import styled from 'styled-components';

const Header = () => {
    return (
        <HeaderWrapper>
            <h1>반갑습니다</h1>
        </HeaderWrapper>
    );
};

const HeaderWrapper = styled.header`
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Header;

////////////////Content////////////////
import React from 'react';
import styled from 'styled-components';

const Content = () => {
    return (
        <ContentWrapper>
            <p>좋은 하루 되세요</p>
        </ContentWrapper>
    );
};

const ContentWrapper = styled.section`
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Content;

/////////////Footer/////////////
import React from 'react';
import styled from 'styled-components';

const Footer = () => {
    return (
        <FooterWrapper>
            <button>darkmode</button>
        </FooterWrapper>
    );
};

const FooterWrapper = styled.footer`
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    button{
        height: 30px;
    }
`;

export default Footer;

Footer에는 버튼으로 darkmode를 제어할 것이므로 button태그가 추가되었다.

 

 

2. src내 Context폴더와 js파일을 만든다.

 

ThemeDarkmode내에 작성한다.

createContext를 연결하고 const 변수 = createContext(기본값)으로 작성한다.

import { createContext } from "react";

export const ThemeDarkmode = createContext(null);

 

3. app.js에서 전역 변수로 만들 값을 생성하고 지정한다.

Context폴더 내에 만든 파일을 import한다.

버튼에 따라 상태 값이 변할 것이므로 useState를 사용했고 그 변수를 전역 변수로 지정했다.

import React, {useState} from 'react';
import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
import { ThemeDarkmode } from './Context/ThemeDarkmode';

const App = () => {
  // 상태작성을 위한 useState, 적용 안되면 상단에서 import적용할 것
  const [isDark, setIsDark] = useState(false)
  return (
    //이름.Provieder value = {{전역변수}}
    <ThemeDarkmode.Provider value = {{isDark, setIsDark}}>
      <Header/>
      <Content/>
      <Footer/>
    </ThemeDarkmode.Provider>
  );
};

export default App;

 

4. 지정된 전역 변수를 각각의 Components파일에서 이용한다.

app.js에서 지정한 변수를 비구조 할당으로 가져올 수 있다.

Footer부분은 버튼으로 isDark의 값을 제어해야 하므로 변수를 두 개 가져왔고 나머지 Components는 제어하는 부분이 없기 때문에 값을 반영하는 isDark라는 변수 한 개만 가져왔다.

/////////////////Footer/////////////////
import React, { useContext } from 'react';
import styled from 'styled-components';
import { ThemeDarkmode } from './../Context/ThemeDarkmode';

const Footer = () => {
    // 비구조할당으로 값을 가져온다.
    // const {원하는 전역변수} = useContext(이름)
    const {isDark, setIsDark} = useContext(ThemeDarkmode)
    return (
        <FooterWrapper style={{
            backgroundColor : isDark ? "#333" : "#fff"
        }}>
            <button onClick={()=>setIsDark(!isDark)}>darkmode</button>
        </FooterWrapper>
    );
};
//button을 눌러 상태변환 해야 하므로 onClick이벤트에 setIsDark(!isDark)를 쓰면 isDark의 값이 토글된다.

const FooterWrapper = styled.footer`
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    button{
        height: 30px;
    }
`;

export default Footer;

///////////////Header///////////////
import React, { useContext } from 'react';
import styled from 'styled-components';
import { ThemeDarkmode } from './../Context/ThemeDarkmode';

const Header = () => {
    const {isDark} = useContext(ThemeDarkmode)
    return (
        <HeaderWrapper style={{
            backgroundColor : isDark ? "#333" : "#fff",
            color : isDark ? "#fff" : "#333"
        }}>
            <h1>반갑습니다</h1>
        </HeaderWrapper>
    );
};

const HeaderWrapper = styled.header`
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Header;

///////////////Content///////////////
import React, { useContext } from 'react';
import styled from 'styled-components';
import { ThemeDarkmode } from './../Context/ThemeDarkmode';

const Content = () => {
    const {isDark} = useContext(ThemeDarkmode)
    return (
        <ContentWrapper style={{
            backgroundColor : isDark ? "#333" : "#fff",
            color : isDark ? "#fff" : "#333"
        }}>
            <p>좋은 하루 되세요</p>
        </ContentWrapper>
    );
};

const ContentWrapper = styled.section`
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Content;

 

 

 

[결과 화면]

 

 

styled-components의 ThemeProvider로 만든 darkmode 만들기

https://flowerofashes.tistory.com/38

REACT styled-components 'ThemeProvider'를 이용한 darkmode만들기