React Hook이란?

 

 

React Hook이란?

React Hook은 클래스형 컴포넌트 없이도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 함수입니다. React 16.8에서 도입되었으며 함수형 컴포넌트에서도 상태 관리 및 부작용(side effects) 처리를 가능하게 합니다.

---

 

Hook을 사용하는 이유

1. 클래스형 컴포넌트의 복잡성을 줄임

기존에는 상태를 관리하려면 class 컴포넌트를 사용해야 했지만, Hook을 사용하면 function 컴포넌트에서도 상태 관리가 가능합니다.

// 기존의 클래스형 컴포넌트
class Counter extends React.Component {
  state = { count: 0 };

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

// Hook을 사용한 함수형 컴포넌트
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

 

2. 코드 재사용성 증가 (Custom Hook 활용 가능)

 

• 클래스형 컴포넌트에서는 HOC(Higher Order Component)나 Render Props를 사용해야 했지만,
• Hook을 이용하면 Custom Hook을 만들어 코드 재사용성을 높일 수 있음

---

 

React에서 자주 사용하는 기본 Hook

Hook	설명
useState	컴포넌트 상태(state) 관리
useEffect	생명주기(lifecycle) 관리 (마운트, 업데이트, 언마운트)
useContext	전역 상태 관리 (Context API 활용)
useReducer	복잡한 상태 로직 관리 (Redux 대체 가능)
useRef	DOM 요소 직접 접근 및 저장 (mutable 변수)
useMemo	성능 최적화를 위한 값 메모이제이션
useCallback	함수의 메모이제이션 (불필요한 렌더링 방지)

 

---

1. useState: 상태 관리 Hook

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

 

• useState(초기값) → count 상태 변수 생성
• setCount 함수를 이용하여 count 값을 업데이트

---

2. useEffect: 사이드 이펙트 관리 Hook

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Component Mounted or Updated!");

    return () => {
      console.log("Component Unmounted!");
    };
  }, [count]); // count가 변경될 때만 실행

  return (
    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
  );
}

 

 

• useEffect(콜백 함수, 의존성 배열) 형태로 사용
• 마운트/업데이트/언마운트 시 실행 가능

---

3. useRef: DOM 요소 직접 접근

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus(); // input 요소에 포커스
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus</button>
    </>
  );
}

 

• useRef는 DOM 요소를 직접 조작하거나, 상태를 저장할 때 유용

---

4. useMemo & useCallback: 성능 최적화

import { useState, useMemo } from "react";

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    console.log("Calculating...");
    return num * 2;
  }, [num]); // num이 변경될 때만 재계산

  return <p>Result: {result}</p>;
}

• useMemo를 사용하면 불필요한 재계산 방지

🔹 useCallback: 함수 메모이제이션

import { useState, useCallback } from "react";

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

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

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <>
      <p>Count: {count}</p>
      <Button onClick={handleClick} />
    </>
  );
}

• useCallback을 사용하면 불필요한 함수 재생성 방지

---

React Hook의 규칙

1. 반드시 함수형 컴포넌트 내부에서 사용해야 함

function MyComponent() {
  const [state, setState] = useState(0); // OK
}

if (someCondition) {
  const [state, setState] = useState(0); // 오류 발생 (조건문 안에서 사용 불가)
}

 

2. Hook은 최상위에서만 호출해야 함

• 반복문, 조건문, 중첩 함수 내부에서 호출 금지

3. React Hook 네이밍 규칙

• Custom Hook을 만들 경우 반드시 use로 시작해야 함

function useCustomHook() { ... } // OK
function customHook() { ... } // 오류 발생

 

---

결론

• React Hook은 함수형 컴포넌트에서도 상태 관리 및 생명주기 관리를 쉽게 할 수 있도록 도와줌
• 코드가 간결해지고 재사용성이 증가
• 성능 최적화(useMemo, useCallback) 및 DOM 조작(useRef)도 가능

 

 

 

 

#React #hook #함수형컴포넌트 #재사용성증가