포트폴리오 사이트를 다시 만드는 도중 생긴 문제
나중에 알고보니 굉장히 바보같은 실수를 한 거였지만 나름 밑거름이겠거니 하고 적어두기...ㅠㅠ
🧨 문제
다크모드의 state를 "dark" || "light"로 관리중인데, 다른 컴포넌트에서 이 값들로 조건부 랜더링을 시도하였으나 값에 따른 랜더링이 되지 않음.
버튼을 클릭할 때마다 콘솔에 darkModeValue를 출력해보니 dark만 출력되지만 새로고침 하면 light도 출력 됨.
🔎 원인 찾기
진짜 어이없고 말도 안되는 이유들이지만 당시엔 뭐가 문제인지 알 수가 없어서 이것저것 다 시도해 봄
1. string으로 저장한 것이 문제인가?
counter atom을 만든 후 값을 number로 저장, div 컴포넌트와 button 컴포넌트로 값을 출력하고 업데이트 해봤으나 문제없이 출력되고 업데이트 됨.
2. useAtomValue로 값만 가져와볼까?
변화 없음
3. atom만 만든게 문제인가?
atom을 만들 때 export const darkModeAtom = atom("dark"); 이런식으로 값만 지정해줬다. 찾다보니 atom에는 read-only atom, write-only atom, read-write atom 이렇게 세 종류가 있다길래 우선 잘 작동되는 counter atom을 read-write atom으로 바꿔봄.
export const counterAtom = atom(0);
export const handleCounterAtom = atom(
(get) => get(counterAtom),
(get, set) => {
set(counterAtom, get(counterAtom) + 1);
}
);생각한대로 아주 잘 작동 됨. 그러나 darkMode를 이렇게 만들었을땐 여전히 안 됨. 미쳐버림.
💡 해결(임시)
이 후 이런저런 시도를 해봤지만 고칠 수 없었다. 챗지피티한테 물어봐도 해결할 수 없음. 그러나 localStorage와 cookie 값이 연동되지 않아 그럴수도 있다는 얘길 듣고 설마 atomWithStorage 때문인가 의심했다.
atomWithStorage는 jotai가 기본 제공하는 메서드인데, localStorage와 상태를 연동시켜준다.
Next.js로 SSR 사용중이라 다크모드 값을 쿠키에 넣고 랜더링시 불러오려고 했다.
그리고나서 atom 상태와 localStorage를 동기화 시키려고 했는데...(사실 이거까진 의미없는 짓이었는데 별 생각 안하고 나중에 쓰겠거니~ 하고 넣어놨었다)
여튼 이 코드를 없애고 그냥 atom을 불러와서 사용하니 아주 잘 됨 ㅎ 어이업서;
🗝️ 진짜 원인
쿠키와 로컬스토리지가 문제가 아니었다. 그냥 사용법이 잘못되었던것. 진짜 너무 어이없는 실수였다.
우선 내가 참고했던 코드는 이것
import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'
const darkModeAtom = atomWithStorage('darkMode', false)
const Page = () => {
const [darkMode, setDarkMode] = useAtom(darkModeAtom)
return (
<>
<h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
<button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>
</>
)
}이것만 보고 darkModeAtom을 다크모드 전환 버튼 컴포넌트에 넣고 사용중이던것...
그러면서 atom.ts엔 const darkModeAtom = atom("dark");라고 넣어놨었고, 이걸 메인비주얼 컴포넌트에서 사용하고 있던것이다...
정리하자면
- ToggleThemeBtn 컴포넌트에서
atomWithStorage로 atom 생성- atom.ts에서
const darkModeAtom = atom("dark");로 새로운 atom 생성 후 이걸 MainVisual 컴포넌트에서 사용atomWithStorage로 만든 atom과 atom.ts에 만든 darkModeAtom은 전혀 다른 atom이므로 연동되지 않는 것이 당연
이거때문에 거의 반나절을 고민하면서 찾아봤는데 이런 어이없는 실수였다니
글을 적고 있던것 자체가 부끄러워지지만 만 명 중에 한 명 쯤은
비슷한 실수를 하지 않을까 하고...적어두기...ㅋ....
