localStorage 오남용: 위험하고 비효율적인 상태 관리 🔒

Why Wrong?

How to Fix?

// 🚨 안티패턴: localStorage에 민감 정보 및 복잡한 객체 직접 저장

import React, { useState, useEffect } from 'react';

function UserProfileEditor() {
  // 사용자 토큰을 localStorage에 직접 저장 (XSS 취약점 발생 가능)
  useEffect(() => {
    const token = 'very-sensitive-jwt-token-12345'; // 실제 환경에서는 로그인 시 받아옴
    localStorage.setItem('authToken', token);
    console.log('authToken 저장됨:', localStorage.getItem('authToken'));
  }, []);

  // 복잡한 사용자 프로필 객체를 localStorage에 직접 저장 (성능 및 유지보수 문제)
  const [userProfile, setUserProfile] = useState(() => {
    const savedProfile = localStorage.getItem('userProfile');
    // 문자열 -> 객체 변환 시 에러 처리 미흡
    return savedProfile ? JSON.parse(savedProfile) : {
      name: '',
      email: '',
      preferences: { theme: 'light', notifications: true }
    };
  });

  useEffect(() => {
    // 객체 -> 문자열 변환 시 성능 저하 및 에러 발생 가능성
    localStorage.setItem('userProfile', JSON.stringify(userProfile));
  }, [userProfile]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserProfile(prevProfile => ({ ...prevProfile, [name]: value }));
  };

  const handlePreferenceChange = (key, value) => {
    setUserProfile(prevProfile => ({
      ...prevProfile,
      preferences: { ...prevProfile.preferences, [key]: value }
    }));
  };

  return (
    <div>
      <h2>내 프로필 편집</h2>
      <input
        type="text"
        name="name"
        value={userProfile.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        type="email"
        name="email"
        value={userProfile.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <div>
        <label>
          테마:
          <select value={userProfile.preferences.theme} onChange={(e) => handlePreferenceChange('theme', e.target.value)}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          알림 받기:
          <input
            type="checkbox"
            checked={userProfile.preferences.notifications}
            onChange={(e) => handlePreferenceChange('notifications', e.target.checked)}
          />
        </label>
      </div>
      <p>저장된 토큰 (개발자 도구에서 확인 가능): {localStorage.getItem('authToken')}</p>
      <p>저장된 프로필 (개발자 도구에서 확인 가능): {localStorage.getItem('userProfile')}</p>
    </div>
  );
}

export default UserProfileEditor;

// ✅ 개선된 패턴: localStorage는 단순 설정에만 활용하고, 민감/복잡 데이터는 다른 저장소 고려

import React, { useState, useEffect } from 'react';
// 전역 상태 관리 라이브러리 (예: Zustand) 또는 Context API 사용을 가정
// import { useAuthStore } from './stores/authStore'; 
// import { useUserProfileStore } from './stores/userProfileStore';

function UserProfileEditor() {
  // 1. 사용자 토큰: localStorage에 직접 저장하지 않고, HTTP Only 쿠키나 서버 세션으로 관리
  // 클라이언트 JS에서 직접 접근 불가 (보안 강화)
  // const { token } = useAuthStore(); // 예시: 전역 상태 관리 라이브러리에서 토큰을 메모리에만 유지

  // 2. 복잡한 사용자 프로필: IndexedDB 또는 서버 DB에 저장
  // IndexedDB는 비동기 및 대용량 데이터 저장에 적합
  // const [userProfile, setUserProfile] = useUserProfileStore(); // 예시: 전역 상태 관리 라이브러리 + IndexedDB 연동

  // 예시를 위해 단순화된 로컬 상태 사용 (실제로는 전역 상태 관리 라이브러리 권장)
  const [userProfile, setUserProfile] = useState({
    name: '김개발',
    email: 'dev@example.com',
    preferences: { theme: 'light', notifications: true }
  });

  // 3. localStorage는 간단한 사용자 UI 설정 등 비민감 데이터에만 활용
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem('userTheme') || 'light';
  });

  useEffect(() => {
    localStorage.setItem('userTheme', theme);
    console.log('사용자 테마 설정 저장됨:', theme);
  }, [theme]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserProfile(prevProfile => ({ ...prevProfile, [name]: value }));
  };

  const handlePreferenceChange = (key, value) => {
    if (key === 'theme') {
      setTheme(value); // 테마는 localStorage로 관리
    } else {
      // 그 외의 프로필 설정은 userProfile 상태로 관리 (IndexedDB 또는 서버 동기화)
      setUserProfile(prevProfile => ({
        ...prevProfile,
        preferences: { ...prevProfile.preferences, [key]: value }
      }));
    }
  };

  return (
    <div>
      <h2>내 프로필 편집</h2>
      <input
        type="text"
        name="name"
        value={userProfile.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        type="email"
        name="email"
        value={userProfile.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <div>
        <label>
          테마:
          <select value={theme} onChange={(e) => handlePreferenceChange('theme', e.target.value)}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          알림 받기:
          <input
            type="checkbox"
            checked={userProfile.preferences.notifications}
            onChange={(e) => handlePreferenceChange('notifications', e.target.checked)}
          />
        </label>
      </div>
      {/* 토큰은 클라이언트 JS에서 직접 접근 불가하므로 표시하지 않음 */}
      {/* <p>저장된 토큰 (서버/HTTP Only 쿠키로 관리)</p> */}
      <p>저장된 테마 (localStorage): {localStorage.getItem('userTheme')}</p>
      <p>저장된 프로필 (IndexedDB 또는 서버 DB로 관리): {JSON.stringify(userProfile)}</p>
    </div>
  );
}

export default UserProfileEditor;