Custom Hooks 예시

import React, { useEffect } from 'react';
import useLocalStorage from './useLocalStorage';

export default function Test() {
  const [name, setName] = useLocalStorage('name', '');
  return (
    <input type='text' value={name} onChange={(e) => setName(e.target.value)} />
  );
}

 

import { useState, useEffect } from 'react';

const getSavedValue = (key: string, initialValue: string) => {
  const savedValue = JSON.parse(localStorage.getItem(key) as string);
  if (savedValue) return savedValue;
  return initialValue;
};

export default function useLocalStorage(
  key: string,
  initialValue: string
): [string, React.Dispatch<string>] {
  const [value, setValue] = useState<string>(() =>
    getSavedValue(key, initialValue)
  );

  useEffect(() => {
    console.log('MOUNTED');
  }, []);

  useEffect(() => {
    console.log('CHANGE');
    localStorage.setItem(key, JSON.stringify(value));
  }, [value, key]);
  return [value, setValue];
}