훅과 상태 관리

import React, { useState } from 'react';

const SimpleCounter: React.FC = () => {
  // 초기값 0을 통해 `count`는 `number` 타입으로 추론됩니다.
  const [count, setCount] = useState(0);

  // 초기값 'Hello'를 통해 `message`는 `string` 타입으로 추론됩니다.
  const [message, setMessage] = useState('Hello');

  const increment = () => setCount(count + 1);
  const updateMessage = (newMessage: string) => setMessage(newMessage);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <p>Message: {message}</p>
      <button onClick={() => updateMessage('New Message')}>Update Message</button>
    </div>
  );
};

export default SimpleCounter;

import React, { useState } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

const UserProfile: React.FC = () => {
  // `user`는 `User` 타입이거나 `null`일 수 있음을 명시합니다.
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const fetchUserProfile = async (userId: number) => {
    setIsLoading(true);
    setError(null); // 이전 에러 초기화
    try {
      // 가상 API 호출
      const response = await new Promise<User | null>((resolve) => {
        setTimeout(() => {
          if (userId === 1) {
            resolve({ id: 1, name: 'Alice', email: '[email protected]' });
          } else {
            // Reject를 통해 에러 시뮬레이션
            // throw new Error('User not found!');
            resolve(null); // 사용자 미존재 케이스
          }
        }, 1000);
      });

      if (response && response.id) { // 유효한 응답인지 확인
        setUser(response);
      } else {
        setError('User not found!');
        setUser(null);
      }
    } catch (err: any) {
      setError(err.message || 'Failed to fetch user.');
      setUser(null);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h2>User Profile</h2>
      <button onClick={() => fetchUserProfile(1)} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Fetch User 1'}
      </button>
      <button onClick={() => fetchUserProfile(99)} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Fetch User 99'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      {user ? (
        <div>
          <p>ID: {user.id}</p>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        !isLoading && !error && <p>Please fetch a user.</p>
      )}
    </div>
  );
};

export default UserProfile;

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

const DataFetcher: React.FC = () => {
  const [data, setData] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // 빈 의존성: 마운트 시 setup, 개발 Strict Mode에서는 추가 setup/cleanup 점검 가능
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        // 가상 API 호출 (Promise<string> 반환)
        const response = await new Promise<string>((resolve, reject) => {
          setTimeout(() => {
            const success = Math.random() > 0.3; // 70% 확률로 성공
            if (success) {
              resolve('Fetched data successfully!');
            } else {
              reject(new Error('Failed to fetch data!'));
            }
          }, 1500);
        });
        setData(response);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 클린업 함수: 컴포넌트 언마운트 시 또는 의존성 변경 전 호출
    return () => {
      console.log('Cleanup for DataFetcher (e.g., cancel subscriptions)');
      // 구독 해제, 타이머 클리어 등
    };
  }, []); // 빈 배열: 마운트 setup/언마운트 cleanup; 개발 Strict Mode에서는 추가 주기 가능

  if (loading) return <p>Loading data...</p>;
  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;

  return (
    <div>
      <h2>Fetched Data:</h2>
      <p>{data}</p>
    </div>
  );
};

export default DataFetcher;

import { useEffect, useState } from 'react';

export default function DataFetcherSafe({ shouldFail = false }: { shouldFail?: boolean }) {
  const [data, setData] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    setData(null);
    setError(null);
    const timer = setTimeout(() => {
      if (shouldFail) {
        setError('연습 실패');
      } else {
        setData('연습 성공');
      }
      setLoading(false);
    }, 500);
    return () => clearTimeout(timer);
  }, [shouldFail]);

  if (loading) return <p>Loading data...</p>;
  if (error !== null) return <p>Error: {error}</p>;
  return <p>{data}</p>;
}

import React, { createContext, useContext, useState, ReactNode } from 'react';

// 1. Context에 저장될 데이터의 타입 정의
interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

// 2. Context 생성: 초기값에 null을 허용하고 싶다면 제네릭에 null을 포함하고,
//    as 키워드로 타입 단언을 하거나, Provider 사용 시점의 초기값을 잘 설정해야 합니다.
//    가장 좋은 방법은 초기값을 최대한 실제 값과 유사하게 설정하거나,
//    Context를 사용하는 컴포넌트에서 null 체크를 하는 것입니다.
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 3. Context Provider 컴포넌트 생성
interface ThemeProviderProps {
  children: ReactNode;
}

const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // Provider value는 ThemeContextType 인터페이스를 만족해야 합니다.
  const contextValue: ThemeContextType = { theme, toggleTheme };

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

// 4. Context를 사용하는 컴포넌트
const ThemeToggleButton: React.FC = () => {
  const themeContext = useContext(ThemeContext);

  if (themeContext === undefined) {
    throw new Error('ThemeToggleButton must be used within a ThemeProvider');
  }

  const { theme, toggleTheme } = themeContext;

  return (
    <button
      onClick={toggleTheme}
      style={{
        background: theme === 'light' ? '#eee' : '#333',
        color: theme === 'light' ? '#333' : '#eee',
        border: '1px solid',
        padding: '10px 20px',
        cursor: 'pointer'
      }}
    >
      Toggle Theme ({theme})
    </button>
  );
};

// 5. App.tsx에서 사용 예시
const ThemeApp: React.FC = () => {
  return (
    <ThemeProvider>
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        <h2>Context API Example</h2>
        <ThemeToggleButton />
        <p>This paragraph will dynamically change theme if you apply styles.</p>
      </div>
    </ThemeProvider>
  );
};

export default ThemeApp;

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

const TextInputWithFocusButton: React.FC = () => {
  // input 엘리먼트에 접근하기 위한 ref. HTMLInputElement 또는 null이 될 수 있음을 명시.
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 컴포넌트 마운트 시 inputRef.current가 존재하면 자동으로 포커스
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // 마운트 setup; 개발 Strict Mode의 추가 점검 주기 가능

  const handleClick = () => {
    if (inputRef.current) {
      alert(`Current input value: ${inputRef.current.value}`);
      inputRef.current.focus(); // 버튼 클릭 후 다시 포커스
    }
  };

  return (
    <div>
      <h2>useRef Example</h2>
      <input type="text" ref={inputRef} placeholder="Focus me on mount" />
      <button onClick={handleClick}>Show Value & Focus</button>
    </div>
  );
};

export default TextInputWithFocusButton;

import { useState, useCallback } from 'react';

interface UseCounterOptions {
  initialValue?: number;
  max?: number;
  min?: number;
}

interface UseCounterReturn {
  count: number;
  increment: (step?: number) => void;
  decrement: (step?: number) => void;
  reset: () => void;
  setCount: React.Dispatch<React.SetStateAction<number>>; // useState의 setCount 함수 타입
}

const useCounter = (options?: UseCounterOptions): UseCounterReturn => {
  const { initialValue = 0, max, min } = options || {};
  const [count, setCount] = useState(initialValue);

  const increment = useCallback((step: number = 1) => {
    setCount(prevCount => {
      const newCount = prevCount + step;
      return max !== undefined ? Math.min(newCount, max) : newCount;
    });
  }, [max]); // max 값이 변경될 때만 increment 함수 재생성

  const decrement = useCallback((step: number = 1) => {
    setCount(prevCount => {
      const newCount = prevCount - step;
      return min !== undefined ? Math.max(newCount, min) : newCount;
    });
  }, [min]); // min 값이 변경될 때만 decrement 함수 재생성

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]); // initialValue가 변경될 때만 reset 함수 재생성

  return { count, increment, decrement, reset, setCount };
};

export default useCounter;

import React from 'react';
import useCounter from '../hooks/useCounter'; // 사용자 정의 훅 임포트

const CustomCounter: React.FC = () => {
  const { count, increment, decrement, reset } = useCounter({
    initialValue: 5,
    min: 0,
    max: 10
  });

  return (
    <div>
      <h2>Custom Counter ({count})</h2>
      <button onClick={() => increment()}>Increment</button>
      <button onClick={() => increment(2)}>Increment by 2</button>
      <button onClick={() => decrement()}>Decrement</button>
      <button onClick={() => decrement(3)}>Decrement by 3</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CustomCounter;