React에서 LocalStorage 사용에 대한 빠른 예

이 예에서는 LocalStorage를 사용하여 React에서 항목의 상태를 저장하는 방법을 빠르게 보여줍니다.

바닐라 대 반응에서의 사용

Vanilla javascript와 비교하여 React에서 localStorage를 사용하는 것의 차이점은 두 개의 React 후크를 사용해야 한다는 것입니다.
나는 당신이 이것들이 무엇인지 이미 알고 있다고 가정하지만 당신이 모르는 경우 아래 링크를 방문할 수 있습니다.
useState
useEffect

예시

항목의 상태를 '켜짐'과 '꺼짐' 사이에서 전환하고 해당 상태를 브라우저에 저장하려고 합니다. 내가 그것에 대해 갈 방법은 다음과 같습니다.

<button onClick={() => changeOn(!isOn)}>

const [isOn, setisOn] = useState(localStorage.getItem('Status') === 'true');

useEffect(()=> {
    localStorage.setItem('Status', JSON.stringify(isOn));
}, [isOn])

function changeOn(status){
    setisOn(status);
}

그게 다야!
여전히 혼란스러우시다면 의견을 통해 제 해결책을 설명해 드리겠습니다.

행운을 빕니다!