커스텀 훅 만들기

import { useState, useCallback } from 'react';

function useToggle(initialValue = false) { // (1) 'use'로 시작하는 함수 이름
  const [value, setValue] = useState(initialValue); // (2) 내부에서 useState 훅 사용

  // (3) 상태를 토글하는 함수 정의 (useCallback으로 최적화)
  const toggle = useCallback(() => {
    setValue(prevValue => !prevValue);
  }, []); // 의존성 배열이 비어있으므로, 컴포넌트가 마운트될 때 한 번만 생성

  // (4) 외부에서 사용할 값과 함수를 배열 또는 객체로 반환
  return [value, toggle]; // 배열로 반환하는 것이 useState와 유사하여 일반적
}

export default useToggle;

import React from 'react';
import useToggle from '../hooks/useToggle'; // 커스텀 훅 불러오기

function ToggleExample() {
  const [isLightOn, toggleLight] = useToggle(true); // (1) useToggle 훅 사용
  const [isPanelOpen, togglePanel] = useToggle(false); // (2) 다른 상태에도 재사용

  return (
    <div style={{ border: '1px solid #FF8F00', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>useToggle 커스텀 훅 예제</h2>

      {/* 첫 번째 토글 */}
      <div style={{ marginBottom: '15px' }}>
        <p>전등 상태: {isLightOn ? '켜짐 💡' : '꺼짐 🌑'}</p>
        <button onClick={toggleLight} style={{ padding: '8px 15px', backgroundColor: '#ff8f00', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
          전등 {isLightOn ? '끄기' : '켜기'}
        </button>
      </div>

      {/* 두 번째 토글 (재사용) */}
      <div>
        <p>패널 {isPanelOpen ? '열림 ▼' : '닫힘 ▶'}</p>
        <button onClick={togglePanel} style={{ padding: '8px 15px', backgroundColor: '#ff8f00', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
          패널 {isPanelOpen ? '닫기' : '열기'}
        </button>
        {isPanelOpen && ( // isPanelOpen 상태에 따라 조건부 렌더링
          <div style={{ border: '1px dashed #ccc', padding: '10px', marginTop: '10px', backgroundColor: '#fffbe6' }}>
            <p>이것은 토글된 패널 내용입니다.</p>
          </div>
        )}
      </div>
    </div>
  );
}

export default ToggleExample;

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // (1) 초기 상태를 계산하는 함수 (지연 초기화)
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key); // 로컬 스토리지에서 값 가져오기
      // JSON 문자열이거나 일반 문자열일 수 있으므로 파싱 시도
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue; // 에러 발생 시 초기값 반환
    }
  });

  // (2) storedValue 또는 key가 변경될 때마다 로컬 스토리지 업데이트
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue)); // 값을 JSON 문자열로 저장
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]); // key나 storedValue가 변경될 때마다 실행

  // (3) useState와 유사하게 현재 값과 setter 함수 반환
  return [storedValue, setStoredValue];
}

export default useLocalStorage;

import React from 'react';
import useLocalStorage from '../hooks/useLocalStorage'; // 커스텀 훅 불러오기

function LocalStorageExample() {
  // useLocalStorage 훅을 사용하여 'userName'과 'userAge' 상태를 로컬 스토리지와 동기화
  const [userName, setUserName] = useLocalStorage('userName', '게스트');
  const [userAge, setUserAge] = useLocalStorage('userAge', 25);

  return (
    <div style={{ border: '1px solid #1abc9c', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>useLocalStorage 커스텀 훅 예제</h2>

      <div style={{ marginBottom: '15px' }}>
        <label>
          이름:
          <input
            type="text"
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
            style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
          />
        </label>
      </div>

      <div style={{ marginBottom: '15px' }}>
        <label>
          나이:
          <input
            type="number"
            value={userAge}
            onChange={(e) => setUserAge(Number(e.target.value))}
            style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
          />
        </label>
      </div>

      <p>
        저장된 이름: <span style={{ fontWeight: 'bold', color: '#16a085' }}>{userName}</span>
      </p>
      <p>
        저장된 나이: <span style={{ fontWeight: 'bold', color: '#16a085' }}>{userAge}</span>
      </p>
      <p style={{ fontSize: '14px', color: '#666' }}>
        브라우저를 닫았다가 다시 열어도 입력값이 유지됩니다. (로컬 스토리지 확인)
      </p>
    </div>
  );
}

export default LocalStorageExample;

import React from 'react';
import './App.css';
import ToggleExample from './components/ToggleExample';
import LocalStorageExample from './components/LocalStorageExample';

function App() {
  return (
    <div className="App">
      <h1>커스텀 훅 만들기</h1>
      <ToggleExample />
      <hr />
      <LocalStorageExample />
    </div>
  );
}

export default App;