[React] Hooks ( useState, useEffect, useCallback )

React Hooks는 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 기능입니다. useState, useEffect, useCallback, useMemo, useContext, useRef, useLayoutEffect 가 있지만 대표적인 많이 쓰이는 훅으로 useState, useEffect, useCallback 등이 있습니다,

useState – 상태 관리 훅

• useState는 컴포넌트 내부에서 상태를 관리하는 훅입니다.
• 상태 값과 그 상태를 변경하는 함수를 반환합니다.
• 상태 값이 변경되면 해당 컴포넌트가 리렌더링 됩니다.

import { useState } from "react";

function Counter() {
  // count 상태 변수와, 상태를 변경하는 setCount 함수 생성
  const [count, setCount] = useState(0);

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

export default Counter;

 

1. useState(0) → count의 초기값을 0으로 설정
2. setCount 함수를 사용해 상태 변경 (setCount(count + 1))
3. 상태가 변경되면 컴포넌트가 다시 렌더링됨

useEffect – 부수 효과(side effect) 처리 훅

생성자와 소멸자 역할을 할 수 있는 느낌.

• useEffect는 컴포넌트가 렌더링될 때 실행되는 코드를 작성하는 훅입니다.
  • 의존성 배열을 [] (빈 배열)로 설정하면, 마운트될 때 단 한 번만 실행됩니다.
• 비동기 작업(데이터 가져오기, DOM 조작, 이벤트 리스너 등록 등)에 사용됩니다.
  • 컴포넌트가 화면에서 사라질 때(DOM에서 제거될 때) 컴포넌트가 삭제될 때 필요한 정리(clean-up) 작업을 수행
• 의존성 배열을 통해 실행 타이밍을 조절할 수 있습니다.
  • 의존성 배열이 업데이트되면 랜더링이 다시 될 때 return(cleanup)이 먼저실행됨
  • 예를 들어 의존성 배열이 있는 useEffect에 click이벤트가 있다면 배열의 상태가 변할 때마다 이벤트가 추가된다 이를 방지하기위해 return이 먼저 수행되기 때문에 해당 return에 이벤트를 빼주는 로직을 넣으면됨.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(" 타이머 시작!");

    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      console.log("🗑 타이머 정리됨!");
      clearInterval(interval); // 언마운트 시 타이머 정리
    };
  }, []);

  return <p> {count} 초 경과</p>;
}

export default Timer;

 

useCallback – 함수 메모이제이션 훅

리랜더링 될 때 마다 같은 함수를 생성하면 전혀 다른 메모리가 생기는 것 이기 때문 아주 비효율 적일 것이다.

그래서 해당 함수에 useCallback으로 감싸주면 아무리 랜더링 되어도 해당 함수는 여러 번 생성되지 않고 이전에 있던걸 재활용한다. 이를 메모가 제이션이라고 한다. 

예를 들어 카운터 버튼함수와 리셋버튼함수가 있다면 카운터 버튼을 계속 누르면 리셋버튼 또 한 계속 생길 것이다 불필요하다 리셋버튼은 어차피 한 번만 카운터를 0으로 만들면 된다 이때 사용할 수 있다. 

• useCallback은 함수를 메모이제이션하여 불필요한 재생성을 방지하는 훅입니다.
• 컴포넌트가 리렌더링 될 때마다 함수가 새로 생성되는 것을 방지하여 성능 최적화에 도움을 줍니다.
• 함수가 리렌더링될 때마다 새롭게 생성되면, 불필요한 성능 낭비가 발생할 수 있음

import { useState, useCallback } from "react";

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

  // useCallback 사용: 동일한 함수 객체를 유지
  const increase = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

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

export default Counter;

Hooks 사용 시 주의할 점

1. 조건문 안에서 훅을 호출하면 안 된다
   • React는 훅을 배열처럼 관리하여 순차적으로 실행
   • 조건문으로 훅이 실행될지 안 될지가 달라지면 실행 순서가 꼬여 오류 발생 가능

function Example({ condition }) {
  if (condition) {
    const [count, setCount] = useState(0); //  오류 발생 가능
  }
}