[TIL : 230606]

🌊 TIL : 2023년 6월 6일  

 

오늘 한 것

 

• 비동기 복습
• 다크모드 react로 구현 후 타입스크립트 적용시켜보기

 

// ThemeContext.tsx

import React, { ReactNode, createContext, useEffect, useState } from 'react';

const ThemeContext = createContext({ isTheme: false, toggleTheme: () => {} });

interface ThemeProviderProps {
  children: ReactNode;
}

const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const [isTheme, setTheme] = useState(
    () =>
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
  );
  const toggleTheme = () => {
    setTheme((prev) => !prev);
  };

  useEffect(() => {
    if (isTheme) {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    }
  }, [isTheme]);

  return (
    <ThemeContext.Provider value={{ isTheme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

잘한 점

상황

다크모드 구현..?

액션

• context api, useEffect를 적재적소에 사용한 것 같다.
• tailwindcss를 사용하여 html 태그에 dark 태그가 있으면 darkmode css가 반영되도록 config 파일을 수정하였다.
• tailwindcss 공식문서를 참고하여 localstorage에 theme가 저장되어있거나 window.matchMedia('(prefers-color-scheme: dark)').matches를 사용하여 운영체제 테마를 확인하여 적용하는 것도 성공.. 사실 이전에 해봤던 거라 많이 어렵진 않았지만!! 가물가물해서 기억이 안 났는데 다시 한 번 찾아보며 공식문서를 읽어보는 시간을 가지게 되어 좋았다. 또 tailwindcss로 다크모드 구현해본건 처음인데 너무 편리하게 변경되서 좋은 것 같다.

칭찬

└(^o^ ))┐┌(( ^o^)┘♩

 

배운 점

배움

provider에 children 을 매개변수로 넘길 때 타입 에러가 출력이 됐다. 이거 어떻게 타입을 지정해야하지..? 단순히 내가 배운 boolean, number로 지정하는게 아닌 것 같은데.. 고민하다 검색하여 ReactNode로 추가하였다. 근데 이거 any타입처럼 너무 넓은 범위 아닌가 싶어서 찾아보았는데 ReactNode로 적으신 부분이 있어 그대로 사용하였다. 

https://react.vlpt.us/using-typescript/04-ts-context.html

4. TypeScript 와 Context API 활용하기 · GitBook

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context

Context | React TypeScript Cheatsheets

오늘 배움의 의미

react에서 생각해야할 type이 더 존재함을 알게 됐다. 

 

개선점

문제

사실 dom을 직접 조작하는 것이 react의 방향과 맞지 않는 것 같아 고민된다. 

원인

react는 직접적인 dom 조작을 지양하고 있는데 난 지금 직접적으로 건든 것이 되서.. 사실 올바른 코드가 맞을까? 하는 의문이 들기도 하다. 

조금 더 좋은 접근 방식이 있지 않을까 싶지만. 아직은 조금 어려운 것 같다.

 

생각해본 좋은 접근 방식은 html 태그에 dark 클래스를 추가하는 것이 아닌 app.tsx 파일 내부의 컴포넌트를 부를 때 컴포넌트에 상태를 추가해보는건 어떨까? 싶었는데 내가 현재 tailwind를 사용하고 있어 css 파일을 따로 둔 것이 아니니 어떻게 접근해야 할 지 고민이 되었다. 그래서 useEffect 안에서 theme 상태가 변경되면 html 태그에 dark 클래스를 추가하는 방식을 선택하게 되었는데 이 방법이 정말 괜찮은 방법일지?에 대한 고민은 조금 더 해봐야할 것 같다.

해결 방법

아직은 해결이 되지 않음 'ㅇ'