React Hooks 심층 탐구 (useEffect, useRef, useReducer) - React, 알고 쓰자 4일차

Deep Dive into React Hooks (useEffect, useRef, useReducer) - React Explained Day 4

import React, { useRef, useEffect } from 'react';
 
function TextInputWithFocusButton() {
  // ref 객체 생성
  const inputEl = useRef<HTMLInputElement>(null);
 
  const onButtonClick = () => {
    // .current 프로퍼티로 실제 DOM 요소에 접근하여 focus() 메서드 호출
    inputEl.current?.focus();
  };
 
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

import React, { useState, useEffect, useRef } from 'react';
 
function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null); // 타이머 ID 저장용 ref
 
  useEffect(() => {
    // 컴포넌트 마운트 시 타이머 시작
    intervalRef.current = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
 
    // 컴포넌트 언마운트 시 타이머 정리 (Cleanup 함수)
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []); // 빈 의존성 배열: 마운트 시 1회, 언마운트 시 1회 실행
 
  return (
    <div>
      <p>타이머: {seconds}초</p>
      <button onClick={() => clearInterval(intervalRef.current!)}>타이머 중지</button>
    </div>
  );
}

import React, { useReducer } from 'react';
 
// 1. 액션 타입 정의 (TypeScript 사용 시)
type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };
 
// 2. 초기 상태 정의
const initialState = { count: 0 };
 
// 3. Reducer 함수 정의
function reducer(state: typeof initialState, action: Action): typeof initialState {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      throw new Error('Unhandled action type');
  }
}
 
function Counter() {
  // 4. useReducer 사용
  const [state, dispatch] = useReducer(reducer, initialState);
 
  return (
    <div>
      <p>Count: {state.count}</p>
      {/* 5. Dispatch 함수로 액션 전달 */}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
    </div>
  );
}

import { useState, useCallback } from 'react';
 
// 커스텀 훅 정의
function useFormInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);
 
  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setValue(e.target.value);
  }, []); // useCallback으로 함수 재생성 방지
 
  const reset = useCallback(() => {
    setValue(initialValue);
  }, [initialValue]);
 
  // 훅은 상태 값과 이벤트 핸들러, 리셋 함수를 반환
  return {
    value,
    onChange: handleChange,
    reset
  };
}
 
// 컴포넌트에서 커스텀 훅 사용
function MyForm() {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
    nameInput.reset();
    emailInput.reset();
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="이름" {...nameInput} /> {/* 스프레드 연산자로 props 전달 */}
      <input type="email" placeholder="이메일" {...emailInput} />
      <button type="submit">제출</button>
    </form>
  );
}

import { useState, useEffect, useCallback } from 'react';
 
function useDarkMode(initialValue = false): [boolean, () => void] {
  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
    // 로컬 스토리지에서 값 읽어오거나 초기값 사용 (Lazy Initial State)
    try {
      const storedValue = window.localStorage.getItem('darkMode');
      return storedValue ? JSON.parse(storedValue) : initialValue;
    } catch (error) {
      console.error("Error reading localStorage key 'darkMode':", error);
      return initialValue;
    }
  });
 
  // 다크 모드 상태 변경 시 로컬 스토리지 업데이트 및 body 클래스 변경
  useEffect(() => {
    try {
      window.localStorage.setItem('darkMode', JSON.stringify(isDarkMode));
      if (isDarkMode) {
        document.body.classList.add('dark-mode');
      } else {
        document.body.classList.remove('dark-mode');
      }
    } catch (error) {
       console.error("Error writing to localStorage key 'darkMode':", error);
    }
  }, [isDarkMode]);
 
  const toggleDarkMode = useCallback(() => {
    setIsDarkMode(prevMode => !prevMode);
  }, []);
 
  return [isDarkMode, toggleDarkMode];
}
 
// 컴포넌트에서 사용
function Settings() {
  const [isDark, toggleDark] = useDarkMode();
 
  return (
    <div>
      <p>현재 모드: {isDark ? '다크 모드' : '라이트 모드'}</p>
      <button onClick={toggleDark}>모드 전환</button>
    </div>
  );
}