Context 활용하기
1. ThemeContext.js파일을 만들어 리액트 Context를 만든다.
이 Context는 light또는 dark라는 문자열을 가지는 ThemeContext이다.
여기에 테마값이 바뀔 때마다 body태그의 class를 바꿔서 배경색을 바꿀 것이다.
2. body 태그를 바꿀려면 _document.js파일에 가서 코드를 작성한다.
_documet.js에서는 useState와 같은 리액트 코드를 쓸 수 없다.그러므로 자바스크립트를 사용해서 body클래스를 바꿀 것이다.
3. _app.js에 ThemeProvider를 적용한다.
이 ThemeProvider에서는 useEffect 훅을 사용해서 테마값이 바뀔 때마다
document.body.classList.add(theme);을 작성한다.
body태그에 테마라는 클래스를 추가하는 것이다.
light 테마면 light라는 클래스가 추가되고 dark테마이면 dark 클래스가 추가된다.그리고 테마 값이 다시 바뀔때는
추가했던 테마 클래스를 제거해준다.
document.body.classList.remove(theme);
이 ThemeProvide로 감싼 모든 곳에서는
useTheme라는 훅을 사용해서
themeContext값을 받아오고그 값으로 theme값을 참조하거나 theme값을 변경할 수 있다.
4. setting.js파일로 가서 수정해보겠다.
const { theme, setTheme } = useTheme(); > 중괄호임
훅을 사용해서 Context의 값을 가져오고
이 값을 Dropdown이라는 컴포넌트에서 사용했다.사용자가 값을 선택할 때마다 setTheme의 Context값을 바꾸었다.
그리고 global.css를 작성해주었다.
5. 각 컴포넌트와 페이지에도 디자인 적용을 해야한다.
:global(.light) .button{ }class에서 정의한 light라는 클래스 이것을 다른 module.css에서 사용하려면
콜론 global이라는 문법을 사용해야한다.
이것은 module.css에서 제공하는 기능이다.
6. 확인하기
테마값을 바꿀 때마다 배경색과 글자색이 잘 바뀐다.
페이지를 이동하더라도 현재 테마값이 잘 유지된다.
