📖 TIL - 나의 첫 Custom Hook 너로 정했다.. 로컬 스토리지 : 상태 관리의 정석과 그 과정

✨ Custom Hook 개선 과정

1. 처음 작성한 Hook (잘못된 버전)

const useLocalStorage = (initialState) => {
  const getLocalStorage = (key) => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialState;
    } catch (error) {
      console.error(error);
    }
  };
  
  const setLocalStorage = (key, data) => {
    try {
      if ((key, data)) window.localStorage.setItem(key, JSON.stringify(data));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [getLocalStorage, setLocalStorage];
};

2. 개선된 Hook (올바른 버전)

const useLocalStorage = (key, initialState) => {
  const [localStg, setLocalStg] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialState;
    } catch (error) {
      console.error(error);
      return initialState;
    }
  });

  useEffect(() => {
    if (localStg !== undefined)
      window.localStorage.setItem(key, JSON.stringify(localStg));
  }, [key, localStg]);

  return [localStg, setLocalStg];
};

🔍 문제 발견과 해결 과정

1. 첫 시도: Add 로직에서 직접 localStorage 설정

const addHandler = (e) => {
  e.stopPropagation();
  if (selectedPokemon.some((e) => e.id === pokemon.id)) {
    return toast.warn("같은 포켓몬을 추가할 수 없습니다.👀");
  }
  if (selectedIdx >= 6) {
    return toast.error("더 이상 선택할 수 없습니다.😓");
  }
  dispatch(addPokemon({ ...pokemon }));
  setLocalStg(selectedPokemon)  // ❌ 문제 발생!
  toast.success(`아싸!! "${pokemon.korean_name}"을(를) 잡았다!💪`);
};

2. 발견한 문제점

• useState의 비동기적 특성으로 인해 즉시 값이 반영되지 않음
• localStorage에 기본값만 저장되고 실제 데이터는 저장되지 않음

3. 최종 해결책

const [, setLocalStg] = useLocalStorage('selectedPokemon', []);

useEffect(() => {
  setLocalStg(selectedPokemon)
}, [selectedPokemon, setLocalStg])

💡 튜터님과의 면담에서 얻은 인사이트

1. 로컬 스토리지 관리 방식

• Q: "로컬 스토리지를 훅으로 관리하는 게 일반적인가요?"
• A: "네, 매우 일반적인 패턴입니다."
  • 리듀서는 순수 함수여야 하므로 브라우저 API 호출이 어려움
  • 사이드 이펙트(useEffect 등)는 커스텀 훅에서 처리하는 것이 좋음

2. Custom Hook vs Redux

• Q: 리덕스를 사용할 때 커스텀 훅은 언제 활용하는 게 좋을까요?
• A: 전역 상태 관리가 필요 없을 때
  → 즉, 특정 컴포넌트 내부에서만 필요한 상태라면 굳이 리덕스를 사용할 필요가 없음.
  • Custom Hook 사용 케이스:
    • 브라우저 API 연동
    • 컴포넌트 특화 로직
    • 재사용 가능한 로직
  • Redux 사용 케이스:
    • 복잡한 전역 상태 관리
    • 예측 가능한 상태 흐름 필요 시
    • 대규모 애플리케이션

3. 현대의 상태 관리 트렌드

• Q: "혹시 그러면.. 실무에서 많이 선호하시는 상태관리는 어떤건가요?"
• A: "신규 프로젝트를 만들때는 리덕스를 잘 안쓰는 추세입니다. 대체 기술로 Zustand로 많이 쓰이는것 같아요"
  • 리덕스의 사용 빈도가 줄어드는 추세
  • 새로운 대안들이 부상
    • React Query: 서버 상태 관리
    • Zustand: 간단한 클라이언트 상태 관리
  • "필요한 만큼만" 라이브러리 사용하는 것이 트렌드

🎯 실무적 Best Practice

1. 상태 관리 도구 선택 기준

   • 프로젝트 규모
   • 팀의 친숙도
   • 유지보수 용이성

2. 로컬 스토리지 관리

   • Custom Hook으로 분리
   • useEffect로 동기화
   • 에러 처리 포함

3. 코드 구조화

   • 관심사 분리
   • 재사용성 고려
   • 테스트 용이성

⭐️ 핵심 배운 점

1. Custom Hook으로 브라우저 API 관리하는 것이 베스트 프랙티스
2. useState의 비동기적 특성 이해의 중요성
3. useEffect를 통한 적절한 동기화의 필요성
4. 현대 웹 개발에서의 상태 관리 트렌드 변화

🚀 앞으로의 학습 방향

• React Query, Zustand 등 모던 상태 관리 도구 학습
• Custom Hook 디자인 패턴 심화 학습