Hooks 기초

Hooks란?

Hooks는 함수형 컴포넌트에서 React의 다양한 기능을 사용할 수 있게 해주는 함수들입니다. 클래스 컴포넌트의 기능을 함수형 컴포넌트에서도 사용할 수 있게 해줍니다.

useState

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

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

useEffect

부수 효과(side effects)를 처리하기 위한 Hook입니다. 데이터 가져오기, 구독 설정, DOM 수동 조작 등을 처리할 수 있습니다.

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // API 호출 예시
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // 빈 배열: 컴포넌트 마운트 시에만 실행
}

useContext

Context API를 통한 데이터 공유를 위한 Hook입니다.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>테마 적용 버튼</button>;
}

useRef

DOM 요소에 직접 접근하거나 변경 가능한 값을 저장하기 위한 Hook입니다.

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>입력란 포커스</button>
    </>
  );
}

useMemo

계산 비용이 큰 값의 재사용을 위한 Hook입니다.

import { useMemo } from 'react';

function Example({ numbers }) {
  const total = useMemo(() => {
    return numbers.reduce((acc, cur) => acc + cur, 0);
  }, [numbers]); // numbers가 변경될 때만 재계산
}

useCallback

함수의 재사용을 위한 Hook입니다.

import { useCallback } from 'react';

function Example() {
  const handleClick = useCallback(() => {
    console.log('버튼 클릭');
  }, []); // 의존성 배열이 비어있으므로 함수가 재생성되지 않음
}

Custom Hooks

자주 사용되는 로직을 재사용 가능한 Hook으로 만들 수 있습니다.

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return [value, handleChange];
}

// 사용 예시
function NameForm() {
  const [name, handleName] = useInput('');
  return <input value={name} onChange={handleName} />;
}