오늘의 목표

• [x] 블로그 메인페이지 중단, 하단의 구조를 만듦니다
• [ ] (시간있을 경우) 블로그 중단을 완성합니다
• [ ] (시간있을 경우) 블로그 하단을 진행합니다

오늘의 퀴즈

메인 페이지 중단에서 dark 모드 적용이 안되는 문제가 발생했습니다.원인이 무엇일까용

배경

isDarkTheme 을 로컬 스토리지에 저장을 해주었는데, 개인적으로 생각했을때에는 자동적으로 데려오려나했는데 생각해보니, 자연적으로 데려오지 않는게 당연했었던 것같은데서 문제가 생겨 난것 같음🤔

시도

//에러 당시에 작성한 노트
//isDarkTheme를 get을 자동적으로 하지 않는 문제 생각해보면 당연할수도?
  // 브라우저한테 만약 새로고침 되었을때 특정 상태롤 데려오라는 이야기를
  //해야하닉아 ???
  //일단  전체해서 사용하는  theme을 데려와서 변화가 되면  get으로 데려오는거로
  //진행하믄될듯ㅇㅇ

1.일단은 useEffect로 렌더링되면 데려오도록해봤지만, theme이 바뀌는거라새롭게 렌더링되지 않는다는 사실을 알게 되었슴니다

해결

2.그래서 이번에는 theme을 데려와서 theme을 구독해서,theme에서 변화가 일어나면 진행하는 방향으로 바꿔 보았는데 , 일단은 성공! 그런데 이게 원인이라 그런건지 아니면, 더 좋은 방법이 있을지 넘나 고민임니다

const isBrowser = typeof window !== "undefined";
  const [isDarkTheme, setIsDarkTheme] = React.useState(
    isBrowser && localStorage.getItem("theme")
  );

  const theme = useTheme(ThemeContext);
  React.useEffect(() => {
    setIsDarkTheme(isBrowser && localStorage.getItem("theme"));
  }, [theme]);