React Hooks

React Hooks

Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.

1. useState

상태를 관리하기 위한 Hook입니다.

const [state, setState] = useState(initialValue);

사용 예시:

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    // 로그인 로직...
    setIsLoggedIn(true);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">로그인</button>
    </form>
  );
}

2. useEffect

부수 효과(side effects)를 수행하기 위한 Hook입니다. 데이터 가져오기, 구독 설정, DOM 조작 등에 사용됩니다.

useEffect(() => {
  // 컴포넌트가 마운트되거나 업데이트될 때 실행되는 코드
  document.title = `카운트: ${count}`;

  // 선택적 정리(cleanup) 함수
  return () => {
    // 컴포넌트가 언마운트되거나 다음 효과가 실행되기 전에 실행
  };
}, [count]); // 의존성 배열: count가 변경될 때만 효과 실행

useEffect 사용 패턴:

1. 마운트/언마운트 시 실행 (의존성 배열이 빈 배열)
2. useEffect(() => { console.log('컴포넌트가 마운트되었습니다.'); return () => { console.log('컴포넌트가 언마운트되었습니다.'); }; }, []);
3. 특정 값 변경 시 실행
4. useEffect(() => { console.log(`username이 ${username}로 변경되었습니다.`); }, [username]);
5. API 데이터 가져오기
6. useEffect(() => { let isMounted = true; async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); if (isMounted) { setData(data); } } catch (error) { if (isMounted) { setError(error); } } finally { if (isMounted) { setLoading(false); } } } fetchData(); return () => { isMounted = false; }; }, []);

3. useContext

컴포넌트 트리를 통해 데이터를 전역적으로 공유할 수 있게 해주는 Hook입니다.

// 컨텍스트 생성
const ThemeContext = React.createContext('light');

// 부모 컴포넌트
function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={theme}>
      <div className="app">
        <Header />
        <MainContent />
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          테마 변경
        </button>
      </div>
    </ThemeContext.Provider>
  );
}

// 자식 컴포넌트
function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return (
    <button className={`button-${theme}`}>
      {theme} 모드 버튼
    </button>
  );
}