[React] Context Api 사용해서 다크 모드 만들기

먼저 context api란? 

react에서는 componet와 componet간 데이터를 전송할 때 props를 사용한다.

부모 componet에서 자식 component로 props를 내림 유전(?) 해준다.

하지만 할머니 component에서 정의한 내용을 손자 component가 사용하고 싶을 수도 있다.

아니면 증조 할머니 component를 증손자 component가 참조하고 싶을 수 있다.

그럴 때 불필요하게 props를 전송하지 않도록 전역변수와 같이 context를 선언할 수 있고, 그를 통해 상태 관리 역시 가능하다.

 

공식 문서 : https://ko.reactjs.org/docs/context.html

Context – React

 

기본적인 사용법, 주요 개념 등은 공식 문서에서 너무 잘 설명하고 있기 때문에 원래 목적이었던 다크 모드 만들기로 넘어가겠다.

나는 먼저 dark 모드인지 light 모드인지 저장할 context를 하나 만들어서 각 component에서 dark 모드와 light 모드 각각의 스타일에 맞게 적용하는 방식으로 구현하였다.

 

context.js

import { createContext } from "react";

export const ThemeContext = createContext({
  theme: "",
  changeTheme: () => {},
});

index.js

import { ThemeContext } from "./context";

const App = () => {
	const [theme, setTheme] = useState("light");
	const changeTheme = () => {
    	setTheme(theme === "light" ? "dark" : "light");
	};
	~~
	return (
        <BrowserRouter>
            <ThemeContext.Provider value={{ theme, changeTheme }}>
                <Switch>
                    ~~~
                </Switch>
            </ThemeContext.Provider>
        </BrowserRouter>
    );
}

 

context.js를 따로 만들어서 사용하면 나중에 다른 context를 만들어서 적용할 때도 편하다.