React에서 Local Storage와 useRef()로 즐겨찾기 만들기.

안녕하세요 여러분!

요전에 작업을 하고 있었는데 구성 요소를 클릭할 때 localStorage에 저장되는 즐겨찾기 빌드에 대한 경험을 공유하면 좋을 것 같다고 생각했습니다.

즐기시기 바랍니다.

재료:

npm 패키지 react-use-localstorage

useRef

테마 UI

TypeScript

풀 하트 아이콘

빈 하트 아이콘

iconmonstr -> https://iconmonstr.com/에서 아이콘을 찾을 수 있습니다.

프로세스

아이디어는 Favourite.tsx 재사용 가능한 구성 요소를 만들어 프로젝트에서 원하는 곳에 추가할 수 있도록 하는 것입니다.

참고: npm 패키지는 localStorage API를 완전히 대체합니다.

아이디어는 개인 구성 요소를 클릭할 때마다 로컬 저장소에 추가된다는 것입니다.

세부:

id는 개별 소품을 가리킵니다. 제 경우에는 많은 사람들의 목록에서 각 사람의 고유한 id를 가리킵니다.

JSON.parse(storageItem)는 우리의 initialValue입니다.

setStorageItem는 기본적으로 현재 storageItem을 []로 푸시하는 함수입니다.

useLocalStorage에서 문자열을 수락하므로 JSON.stringify() 메서드를 사용하고 있습니다.

useRef()는 구성 요소를 다시 렌더링한 후 로컬 저장소에 저장한 항목 수를 기억하므로 완벽하게 작동합니다.

가 즐겨찾는 경우(IconButton을 클릭할 때) 해당 항목을 저장소로 밀어넣고 그렇지 않은 경우 제거합니다.

매번 인덱스 위치가 어느 위치에 있는지 항목을 클릭할 때마다 알지 못하기 때문에 indexOf()를 사용하고 있으며 splice 메서드로 제거합니다.

이제 를 클릭하고 즐겨찾기에 추가하면 전체 하트를 표시하고 그렇지 않으면 빈 하트를 표시합니다.

export interface FavouriteProps {
  id: string
}

export const Favourite = ({
  id,
}: FavouriteProps): JSX.Element | null => {
  const [storageItem, setStorageItem] = useLocalStorage(
    'DFX-favourites',
    JSON.stringify([]),
  )
  const storagedArray = useRef(JSON.parse(storageItem))
  const isFavourited = storagedArray.current.includes(id)

  const handleToggleFavourite = (): void => {
    if (!isFavourited) {
      storagedArray.current.push(id)
      setStorageItem(JSON.stringify(storagedArray.current))
    } else {
     const indexFavouritedId = storagedArray.current.indexOf(id)
      storagedArray.current.splice(indexFavouritedId, 1)
      setStorageItem(JSON.stringify(storagedArray.current))
    }
  }
  return (
    <IconButton
      onClick={handleToggleFavourite}
    >
      {isFavourited ? (
        'Add here your full heart icon'
      ) : (
        'Add here your empty heart icon'
      )}
    </IconButton>
  )
}

구성 요소를 전달하려는 코드에서:

<Favourite id={id} />