메인 콘텐츠로 건너뛰기
TILNOTEAI 노트
page thumbnail

React Hooks의 개념과 실전 활용

wislan
wislan
•조회수 10

Hooks의 등장 배경

React는 초기에 클래스형 컴포넌트를 사용했으나, 컴포넌트 간 로직 재사용이 어렵고, 상태 관리나 라이프사이클이 번거로웠습니다. 이 문제를 해결하기 위해 2018년에 Hooks가 도입되었습니다. Hooks를 사용하면 함수형 컴포넌트에서도 상태와 라이프사이클 기능을 훨씬 쉽게 활용할 수 있습니다.

React Hooks의 개념과 실전 활용 image 1

Hooks란 무엇인가?

Hooks는 함수형 컴포넌트에서 React의 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수입니다. 즉, 코드 구조를 더 간단하게 만들고 재사용성을 높여줍니다.

대표적인 기본 Hook 종류

대표적으로 많이 쓰는 기본 Hook에는 다음과 같은 것들이 있습니다.

  • useState

  • useEffect

  • useContext

  • useRef

  • useMemo

  • useCallback

이 각각은 상태 관리, 데이터 변경 감지, 컴포넌트 참조, 비용 절감 등에 특화된 기능을 제공합니다.

useState의 개념과 예시

useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해주는 Hook입니다.

import React, { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

위와 같은 방법으로 상태 값과 그 값을 갱신하는 함수를 사용할 수 있습니다.

useEffect의 개념과 예시

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해줍니다. 주로 데이터 가져오기, 이벤트 등록, 구독 등에서 사용됩니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `클릭 횟수: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>클릭!</button>;
}

커스텀 Hook이란?

커스텀 Hook은 여러 컴포넌트에서 반복적으로 사용하는 로직을 별도의 함수로 만들어 재사용하는 기능입니다. 프로그래머가 직접 필요한 기능을 구현할 수 있어 코드가 깔끔해집니다.

예시로, window 크기 변화를 감지하는 Hook을 직접 만들 수 있습니다.

import { useState, useEffect } from 'react';

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;
}

Hooks의 장점

  • 클래스형 컴포넌트 대비 코드가 더 간결함

  • 로직 재사용(커스텀 Hook)을 통해 중복 코드를 줄일 수 있음

  • 함수형 프로그래밍 방식으로 가독성과 유지보수성이 좋아짐

Hooks 사용시 주의할 점

Hooks는 반드시 컴포넌트의 최상위에서만 호출해야 하며, 조건문이나 반복문 안에서 호출해서는 안 됩니다. 또한, React 함수형 컴포넌트 또는 커스텀 Hook에서만 사용해야 합니다.

실전에서 Hooks 활용 예시

상태 관리, 데이터 비동기 처리, 사용자 인터랙션 추적 등 다양한 곳에 쓰입니다.

예를 들어 API에서 데이터를 받아오는 코드는 다음과 같습니다.

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData);
  }, [url]);

  return data;
}

Hooks의 단점

  • 너무 복잡한 로직은 Hook 내부에서 다루기 어려울 수 있음

  • 모든 상태 관리가 useState로 적합하지 않은 경우도 있음(예: 매우 복잡한 상태)

hooks를 처음 접하는 개발자를 위한 팁

처음에는 useState, useEffect만 익히고, 점차 useContext·useRef·커스텀 Hook으로 확장하는 것이 좋습니다. 공식 문서와 커뮤니티 예시를 많이 접해보세요.

Hooks로 더 나은 React 코드 만들기

Hooks로 함수형 컴포넌트를 만들면 코드가 짧아지고, 유지보수가 쉬워집니다. 반복되는 로직은 커스텀 Hook으로 추출하면 팀 코드의 품질도 올라갑니다. Hooks를 적극적으로 활용해보세요!

Hooks에서 상태와 상태 변화 분리란?

사용자의 질문처럼, Hooks의 핵심은 '상태'와 '상태 변화'를 분리해 관리하는 데 있습니다. 기존 클래스형 컴포넌트에서는 컴포넌트 내부에 상태와 그에 대한 변화를 한데 묶어서 처리했기 때문에, 코드가 복잡해지고 재사용도 어려웠습니다.

Hooks에서는 예를 들어 useState를 사용할 때,

  • 현재 상태 값(count)

  • 그 상태를 변경할 수 있는 함수(setCount)

이렇게 두 가지를 분리해서 제공합니다. 이를 통해 컴포넌트 내의 데이터(상태)와 그 데이터를 바꾸는 동작(상태 변화)이 명확히 구분됩니다.

이 분리 덕분에:

  • 코드의 역할이 명확해지고

  • 여러 컴포넌트에서 상태 변화 로직을 쉽게 재사용(커스텀 Hook 등)할 수 있으며

  • 테스트와 유지보수도 용이해집니다

정리하면, Hooks는 상태와 상태 변화를 '별도의 개념으로 생각하고 관리한다'라는 관점을 바탕으로, 함수형 프로그래밍의 장점을 React 개발에 녹여낸 도구라고 할 수 있습니다.

hooks 에서 렌더링을 처리하는가?

Hooks 자체는 렌더링을 직접 처리하지 않습니다. Hooks는 상태 관리나 사이드 이펙트(예: 데이터 불러오기, 이벤트 등록)와 같은 로직 구현을 돕는 함수이고, 상태가 바뀔 때 React가 컴포넌트를 다시 렌더링하는 구조입니다.

#React#함수형 컴포넌트#Hooks#상태 관리#커스텀 Hook