localStorage와 상태 동기화하기

처음에는 한곳에서 localStorage를 읽고 다른 곳에서 쓰려고 하지만, 두 작업이 서로 어긋날 수 있습니다. 저장을 잊은 상태 업데이트나 상태에 반영되지 않은 저장 값은 버그를 일으킵니다.

리액트 상태와 저장소를 항상 일치시키는 단일 기준이 필요합니다.

깔끔한 해결책은 useLocalStorage 훅으로 useState를 감싸 변경 사항을 자동으로 저장하는 것입니다. 이 훅은 useState와 마찬가지로 값과 설정 함수를 반환합니다.

사용하는 쪽에서는 일반 상태와 똑같이 사용하면서 별도의 작업 없이 영속성을 얻을 수 있습니다.

localStorage 읽기는 동기 작업이므로 모든 렌더링마다 수행해서는 안 됩니다. useState에 함수, 즉 지연 초기화 함수를 전달하면 마운트될 때 한 번만 읽습니다.

해당 함수 내부에서 저장된 값을 파싱하거나 제공된 기본값을 반환합니다.

초기 상태를 인수로 직접 계산하면 해당 표현식은 첫 번째 렌더링 이후 무시되는데도 모든 렌더링마다 실행됩니다. 함수를 사용하면 리액트가 한 번만 호출합니다.

localStorage를 읽을 때는 렌더링마다 반복되는 동기식 메인 스레드 작업을 방지할 수 있습니다.

업데이트를 저장하려면 값이 변경될 때마다 실행되는 useEffect를 추가하고 localStorage.setItem(key, JSON.stringify(value))를 호출하십시오.

의존성 배열에 값을 넣으면 모든 상태 변경 사항이 자동으로 저장소에 기록됩니다.

이전 값을 기반으로 설정할 때는 함수형 형식인 setValue(prev => prev + 1)을 사용하십시오. 이렇게 하면 캡처된 오래된 값이 기록되는 오래된 클로저 문제를 방지할 수 있습니다.

오래된 상태 스냅샷을 캡처할 수 있는 이벤트 처리기와 효과 내부에서는 특히 중요합니다.

키가 존재하지 않을 때 getItem은 null을 반환합니다. 초기화 함수는 이를 감지하고 널을 파싱하려 하지 말고 기본값으로 대체해야 합니다.

stored != null ? JSON.parse(stored) : defaultValue와 같은 검사를 사용하면 첫 방문도 자연스럽게 처리할 수 있습니다.

TypeScript에서는 훅을 제네릭으로 만들 수 있습니다. function useLocalStorage<T>(key: string, initial: T)와 같이 작성하면 값의 유형이 유지되어 사용하는 쪽에서 완전한 유형 안전성을 얻을 수 있습니다.

반환되는 튜플은 [T, Dispatch<SetStateAction<T>>]로 유형이 지정되며, useState와 일치합니다.

시간이 지나면 데이터 형태가 변경되고, 오래된 저장 값이 새로운 코드를 망가뜨릴 수 있습니다. 데이터와 함께 버전 키를 저장하면 오래된 형식을 감지할 수 있습니다.

예를 들어 { version: 2, data }를 저장하고 읽을 때 버전을 비교하십시오.

저장된 버전이 현재 버전과 일치하지 않으면 해당 값을 신뢰하지 말고 폐기하거나 이전하십시오. 가장 간단한 전략은 오래된 항목을 제거하고 기본값으로 대체하는 것입니다.

이렇게 하면 앱의 이전 버전에서 기록한 데이터로 인해 충돌이 발생하는 것을 방지할 수 있습니다.

완전한 useLocalStorage는 안전하게 읽고 파싱하는 지연 초기화 함수, 함수형 업데이트를 지원하는 설정 함수, 버전 관리를 적용해 저장소에 기록하는 useEffect를 결합합니다.

그 결과 새로 고침 후에도 유지되는 useState의 대체물로 그대로 바꾸어 사용할 수 있습니다.

상태 초기화에 대한 이해를 확인해 보십시오.

지연 초기화 함수를 사용하고, useEffect를 통해 변경 사항을 저장하며, 오래된 클로저를 방지하기 위해 함수형 업데이트를 사용하고, 널 값을 처리하는 useLocalStorage 훅을 만드는 방법을 배웠습니다.

또한 TypeScript 제네릭과 버전 관리를 사용해 오래된 데이터를 안전하게 삭제하는 방법도 살펴보았습니다.