프론트엔드 보통 코딩

React Custom Hook - useLocalStorage

localStorage와 동기화되는 커스텀 훅을 만드세요

30분

100점

120개 테스트케이스

#3662

문제 설명

localStorage와 상태를 동기화하는 React 커스텀 훅 useLocalStorage를 구현하세요.

요구사항

useState와 비슷한 인터페이스
초기값을 localStorage에서 읽어옴
상태 변경 시 localStorage에 저장
JSON 직렬화/역직렬화 처리
SSR 환경 고려 (window 체크)

사용 예시

const [name, setName] = useLocalStorage("name", "Guest");
// name 변경 시 localStorage["name"]도 업데이트

예제 테스트케이스

예제 1

입력

67
318 765 -741 -337 232 -977 -210 -809 966 -599 -516 -90 -289 -553 876 -198 -369 23 -535 991 -254 -303 635 -230 926 -806 -570 892 842 -713 -145 636 -382 233 -858 870 -190 -67 -272 696 -965 357 437 139 -606 -825 156 329 -277 159 -75 -570 -782 -842 -922 -410 -72 -98 180 -762 149 -746 537 882 -324 -57 -843

출력

-6963

예제 2

입력

93
-517 -918 -334 -303 -668 385 -419 995 186 -722 873 379 732 663 515 -73 -379 -50 360 -181 359 -996 -212 816 -516 -647 -53 -728 807 389 -835 -481 522 -145 -319 923 433 -694 746 -898 54 511 76 -611 -727 -692 -539 300 293 -740 846 478 -632 -384 50 -927 506 700 145 351 184 -634 -924 79 -345 -893 982 -541 -379 -868 -96 83 686 246 -33 -604 10 -954 207 653 -985 714 66 -588 -563 -742 363 -970 831 -18 36 -988 746

출력

-7186

예제 3

입력

77
-49 -118 378 150 869 545 535 82 595 572 -11 272 498 282 846 -559 120 394 2 -3 -193 621 260 463 12 -352 -394 643 68 -6 -666 458 -454 -100 -565 -4 -256 763 -242 161 322 -638 848 420 228 61 -171 178 79 100 952 -919 -619 -515 -751 -722 -436 348 592 65 -510 -387 -712 138 315 681 -583 -639 760 234 323 -715 -564 764 996 -301 -491

출력

힌트

실행 버튼을 눌러 코드를 실행하세요.