01-19 코딩일기

Today Coding

오늘은 포트폴리오 전체 섹션에 Dark 모드를 적용 하려고 UseContext를 이용해 DarkmodeContext를 만들었다.

context 폴더에 useContext.js 를 만들고 안에 내용으론

import { createContext, useState } from "react";

export const DarkModeContext = createContext();
export const DarkModeProvider = (children) => {
const [ darkMode, setDarkMode ] = useState(false);
    
<DarkModeContext.Provider value={{darkMode , setDarkMode}}>
{children}
</DarkModeContext.Provider>} 

이렇게 전체를 감싸줄 Darkmode용 useContext를 제작하고
전체 영역을 감싸는 App.js에 감싸주었다.

Darkmode가 될 section으로는 dark_container 를 만들어 react_icons에 CiDark (달모양) 으로 div-span 태그를 만들어 posiotion: apsolute로 상단에 배치 시켰다.