✅ React 기초 강좌

🎯 학습 목표

• 커스텀 훅의 개념과 필요성을 이해한다.
• 반복되는 상태 관리 및 로직을 훅으로 분리한다.
• 실무에서 재사용 가능한 형태로 컴포넌트를 정리하는 감각을 익힌다.

✅ 커스텀 훅이란?

**커스텀 훅(Custom Hook)**은 use로 시작하는 함수이며, 내부적으로 기존 Hook(useState, useEffect 등)을 조합하여 만든 함수입니다.

• 일반 자바스크립트 함수처럼 작성되지만,
• useState, useEffect, useRef 등을 내부에서 자유롭게 사용할 수 있음
• 로직 재사용을 위해 사용됨 (UI는 포함 X)

🔁 왜 필요한가?

// 이름 입력 컴포넌트
const [name, setName] = useState('');
const handleNameChange = (e) => setName(e.target.value);

// 이메일 입력 컴포넌트
const [email, setEmail] = useState('');
const handleEmailChange = (e) => setEmail(e.target.value);

→ 반복되는 로직을 줄이고 싶을 때 커스텀 훅으로 추출합니다.

✅ 커스텀 Hook 기본 예제: useInput

📄 hooks/useInput.js

import { useState } from 'react';

function useInput(initialValue = '') {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return [value, onChange];
}

export default useInput;

📄 사용 예제 컴포넌트

import useInput from '../hooks/useInput';

function InputForm() {
  const [name, onNameChange] = useInput('');
  const [email, onEmailChange] = useInput('');

  return (
    <div>
      <h2>📨 사용자 정보 입력</h2>
      <input type="text" placeholder="이름" value={name} onChange={onNameChange} />
      <input type="email" placeholder="이메일" value={email} onChange={onEmailChange} />
      <p>이름: {name}</p>
      <p>이메일: {email}</p>
    </div>
  );
}

export default InputForm;

✅ 과제

🧩 1. useToggle이라는 커스텀 훅을 만들어보세요:

• true/false 값을 토글하는 상태 훅입니다.
• 반환 값은 [boolean, toggle함수] 형태입니다.

예시 사용:

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

<button onClick={toggleVisible}>
  {isVisible ? '숨기기' : '보이기'}
</button>