🚨 Warning: Prop `d` did not match.

🤔 발생 원인

Next.js를 사용할 때 즉, SSR을 하는 경우에 localstorage의 변수를 이용해서 svg를 렌더링할 때 발생하는 경고인 것 같습니다.

🙂 해결법

결국 SSR에서 localstorage에 접근하는 것이 문제이므로 클라이언트 측에서 렌더링 되도록 만들면 경고가 없어집니다.

아래 코드의 핵심은 useEffect()를 이용해서 클라이언트 측에서 렌더링 되고 나서 아이콘을 렌더링하도록 조건을 넣어준 것입니다.

• 예시 코드

const { theme, setTheme } = useTheme();

const [loaded, setLoaded] = useState(false);
useEffect(() => {
  setLoaded(true);
}, [setLoaded]);

// jsx부분... 나머지는 생략
<button
  type="button"
  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
  className="w-10 h-10 rounded-full hover:bg-zinc-400 dark:hover:bg-slate-200 inline-flex justify-center items-center dark:hover:text-black"
>
  {loaded ? (
    <Icon
      icon={theme === "dark" ? ICON.SUN : ICON.MOON}
      $fill
      className="w-7 h-7"
    />
  ) : (
    <Icon icon={ICON.MOON} $fill className="w-7 h-7" />
  )}
</button>