[React Hooks] useState부터 커스텀 훅까지

728x90

React Hooks 

React 16.8부터 등장한 Hooks(훅)은 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 다룰 수 있게 해주며, 컴포넌트 구조를 더욱 직관적으로 바꿨습니다. 이 글에서는 자주 사용되는 기본 훅부터 커스텀 훅 제작까지 핵심 내용을 정리해드립니다.

 

---

1.  리액트 훅이란?

기존에는 컴포넌트의 상태나 라이프사이클을 제어하려면 클래스형 컴포넌트를 써야 했습니다. 하지만 React Hooks는 함수형 컴포넌트에서도 다음과 같은 기능을 제공해줍니다.

• 상태 관리 (useState)
• 컴포넌트 생명주기 대응 (useEffect)
• 외부 DOM 접근 (useRef)
• 성능 최적화 (useMemo, useCallback)
• 컨텍스트 사용 (useContext)
• .etc

 

---

2.  가장 많이 쓰는 기본 훅

a.  useState (상태 저장)

import { useState } from 'react';

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

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

• 초기값을 인자로 전달 (useState(0))
• 배열 구조 분해 할당으로 값과 업데이트 함수 반환

b.  useEffect (사이드 이펙트 처리)

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('타이머 작동 중');
    }, 1000);

    return () => clearInterval(id); // 컴포넌트 언마운트 시 정리
  }, []); // 빈 배열이면 마운트/언마운트 시 1회 실행
}

• API 호출, 이벤트 리스너, 타이머 설정 등 비동기 작업 처리에 사용
• 두 번째 인자인 의존성 배열이 중요

c.  useRef (DOM 참조 또는 값 저장)

import { useRef } from 'react';

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

  const onClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={onClick}>포커스</button>
    </div>
  );
}

• useRef는 DOM 접근 뿐 아니라 컴포넌트 간 값을 유지하는 용도로도 사용 가능

 

---

3. 성능 최적화 훅

a.  useMemo (연산 결과 캐싱)

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(data);
}, [data]);

• 의존값이 바뀔 때만 다시 계산, 불필요한 연산 방지

b.  useCallback (함수 캐싱)

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

자식 컴포넌트에 props로 함수를 전달할 때 메모이제이션

c.  useContext (전역 상태 공유)

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

• Context API를 손쉽게 사용 가능, Redux 없이도 전역 상태 공유 가능

 

---

4.  커스텀 훅 만들기

훅은 use로 시작하는 함수일 뿐입니다. 복잡한 로직을 재사용 가능하게 분리할 수 있습니다.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// 사용 예시
function MyComponent() {
  const width = useWindowWidth();
  return <div>현재 너비: {width}px</div>;
}

• 커스텀 훅은 가독성과 코드 재사용성을 높이는 데 큰 도움이 됩니다.

 

---

5.  마무리

훅, 잘 활용하고 계신가요?

리액트 훅은 단순한 함수 컴포넌트를 강력하고 유연한 UI 구성 요소로 바꿔줍니다. 각 훅의 사용 목적과 제약사항을 잘 이해하면, 더 깔끔하고 유지보수가 쉬운 리액트 앱을 만들 수 있습니다.

함께 보면 좋은 자료

블로그 글 :

[React Custom Hooks] 로직을 재사용하는 가장 React스러운 방법

[Advanced React Hooks] useReducer부터 useImperativeHandle까지

 

---