✅ React 기초 강좌

📄 hooks/useToggle.js

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue((prev) => !prev);
  };

  return [value, toggle];
}

export default useToggle;

✅ 훅은 반드시 use로 시작해야 하며, 상태 관련 훅 (useState)을 내부에서 자유롭게 사용할 수 있습니다.

📄 components/ToggleBox.jsx

import useToggle from '../hooks/useToggle';

function ToggleBox() {
  const [isVisible, toggleVisible] = useToggle(false);

  return (
    <div>
      <h2>🔁 useToggle 훅 예제</h2>
      <button onClick={toggleVisible}>
        {isVisible ? '숨기기' : '보이기'}
      </button>

      {isVisible && (
        <div style={{ marginTop: '10px', padding: '10px', background: '#eee' }}>
          👋 이 박스는 보였다가 숨겨질 수 있어요!
        </div>
      )}
    </div>
  );
}

export default ToggleBox;

📄 App.jsx

import ToggleBox from './components/ToggleBox';

function App() {
  return (
    <div>
      <h1>🧠 커스텀 Hook 실습</h1>
      <ToggleBox />
    </div>
  );
}

export default App;

✅ 결과 예시

[보이기] 버튼 클릭 → 박스 등장
[숨기기] 버튼 클릭 → 박스 사라짐

이제 커스텀 훅을 통해 로직을 분리하고 재사용하는 방식을 익히셨습니다.

이런 패턴은 실무에서도 매우 자주 쓰이며, useInput, useToggle, useModal, useAuth 등 다양한 형태로 응용됩니다.

GitHub - heroyooi/react-app at ch3_3