반응형
jotai 유틸 atomWithStorage 활용하여 session storage 적용 테스트
import { useAtom, atom } from 'jotai';
import { atomWithStorage, createJSONStorage } from 'jotai/utils';
// session storage 적용
const darkModeAtom = atomWithStorage(
'darkMode',
false,
createJSONStorage(() => sessionStorage),
);
const [darkMode, setDarkMode] = useAtom(darkModeAtom);
return (
<div className={styles.study}>
<div>
<h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
<button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>
</div>
);
'Front-end 개발 > JAVASCRIPT' 카테고리의 다른 글
javascript 휴대폰 번호 하이픈 (-) 포맷 처리 (0) | 2023.01.11 |
---|---|
HTML문서 소스에서 원하는 HTML만 추출하는 기능 테스트 (DOMParser, parser.parseFromString 활용) (0) | 2023.01.11 |
react-query 목록 추가 (POST) 및 수정 (PUT) 테스트 (0) | 2023.01.11 |
react-query 목록 호출 (GET) 및 재 호출 테스트 (0) | 2023.01.11 |
Delete `␍` prettier/prettier 에러 발생 시 eslintrc.json 수정 (0) | 2023.01.11 |