리액트 공부하기 - custom hooks? 그냥 함수 차이?

custom hooks를 공부하며 헷갈리게 된 또 기본 개념- 

짜잔~ 자꾸 등장하는 기초 개념.

 

다시 짚고 갑시다.

---

우선 훅(hook)이 뭘까.

 

리액트(React)에서 **훅(Hook)**은 함수형 컴포넌트에서 **상태(state)**나 라이프사이클(lifecycle) 같은 리액트 기능을 사용할 수 있게 해주는 특별한 함수야.
예전에는 클래스형 컴포넌트에서만 상태 관리나 라이프사이클 처리를 할 수 있었는데, 훅이 도입되면서 함수형 컴포넌트에서도 똑같은 기능을 사용할 수 있게 된 것

 

___ : 이 부분이 핵심!

---

내가 만드는 훅스라.. 뭔가 그냥 컴포넌트랑 다를게 없잖아 ? 싶었다.

 

아주 좋은 질문이야, Jane!
"그냥 컴포넌트로 만드는 거랑 커스텀 훅으로 만드는 거랑 무슨 차이냐?" 차이를 간단하게 정리해볼게.

 

핵심 차이: 컴포넌트는 UI를 반환하고, 커스텀 훅은 상태나 로직만 반환해

구분	커스텀 훅 (Custom Hook)	컴포넌트 (Component)
목적	로직 재사용	UI + 로직 처리
반환값	값, 상태, 함수 (JS 객체/배열)	JSX (UI)
예시	useLocalStorage, useWindowSize	<UserProfile />, <Button />
사용할 때	상태나 effect 등을 여러 컴포넌트에서 재사용하고 싶을 때	UI 구조를 나눌 때
UI 포함 여부	❌ 없음 (로직만 있음)	✅ UI 있음

 

1. 커스텀 훅

// useTimer.js
import { useEffect, useState } from "react";

function useTimer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return seconds;
}

function TimerText() {
  const seconds = useTimer();
  return <div>경과 시간: {seconds}초</div>;
}

2. 컴포넌트만 사용

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>경과 시간: {seconds}초</div>;
}

 

• useTimer는 UI 없이 로직만 담고 있어서 다른 컴포넌트에서 재사용 가능해.
• TimerComponent는 UI와 로직이 합쳐져 있어서 재사용성이 떨어져.

 

컴포넌트는 UI 조각이고, 커스텀 훅은 재사용 가능한 로직 조각이야.

 

---

그러면.. 내가 만드는 함수랑은 다를게 없잖아? 또 싶었다.

많은 사람들이 이 부분에서 헷갈려—“그냥 내가 만든 일반 함수와 커스텀 훅이 뭐가 다르지?”
결론부터 말하면, 커스텀 훅은 "React 훅을 사용할 수 있는 특별한 함수"야.

핵심 차이 요약

구분	일반 함수	커스텀 훅
목적	일반적인 계산이나 로직 처리	React의 상태 관리, 사이드 이펙트 재사용
내부에서 useState, useEffect 등 사용 가능?	❌ 불가능	✅ 가능
함수 이름 규칙	아무 이름이나 가능	반드시 use로 시작해야 함
React의 렌더링 흐름에 연결됨?	❌ 아님	✅ 렌더링 흐름과 연결됨 (Hook 규칙 따라야 함)

 

 예제로 비교

1. 일반 함수

function getCurrentTime() {
  return new Date().toLocaleTimeString();
}

• 그냥 시간을 계산해서 리턴해주는 함수야.
• 상태 관리(useState)나 생명주기 처리(useEffect)는 못 함.

2. 커스텀 훅

import { useState, useEffect } from "react";

function useCurrentTime() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return time;
}

• 내부에 React 훅(useState, useEffect) 사용 가능
• 리렌더링에 맞춰 작동하고, React 생명주기를 따름
• 다른 컴포넌트에서 쉽게 재사용 가능

 

왜 일반 함수로 안 되는 걸까?

React는 훅을 사용할 때 컴포넌트 함수나 커스텀 훅 내부에서만 호출해야 해.
이건 Hook 규칙이야.

// ❌ 이렇게 하면 에러남
function myFunction() {
  const [count, setCount] = useState(0); // ← 일반 함수라 안 됨
}

// ✅ 이렇게는 됨
function useMyCustomHook() {
  const [count, setCount] = useState(0); // 훅 내부니까 OK
  return count;
}

 

 정리

커스텀 훅 = 리액트 훅을 사용할 수 있는 "재사용 가능한 로직 함수"
일반 함수 = 그냥 계산/처리용 함수, 리액트 훅은 못 씀

 

 

그래. 개념은 이해 했어.. 조금 더 쉽게 이해 해볼 수 있는 단어가 있을까?

🎣 훅 (Hook): 낚싯대 (feat. 물고기)

 

React에서 **훅(Hook)**은 마치 낚싯대와 같아요.

• 컴포넌트(Component)는 연못가에 앉아있는 사람이라고 생각해 보세요.
• **물고기(데이터, 상태, 외부와의 소통 등)**는 연못 안에 있어요.

사람(컴포넌트)이 물고기(데이터)를 잡으려면 맨손으로는 힘들겠죠? 이때 **낚싯대(훅)**를 사용합니다.

• useState 훅: "내 낚싯대로 연못에서 특별한 종류의 물고기('카운터 숫자'나 '입력된 이름' 같은) 한 마리만 딱 잡아줘! 그리고 그 물고기 상태가 바뀌면 나한테 알려줘." 라고 React에게 요청하는 거예요. useState 훅을 쓸 때마다 React는 그 컴포넌트만의 독립적인 물고기 한 마리를 관리해 줍니다.
• useEffect 훅: "낚싯대 던져놓고 기다리고 있다가, 특정 물고기가 잡히거나 특정 상황(컴포넌트가 처음 나타날 때, 사라질 때 등)이 되면 '알림'을 줘. 그럼 내가 그 알림을 받아서 뭔가 추가 작업을 할게!" 하고 React에게 시키는 거죠.
• 커스텀 훅: 이건 나만의 특수 낚싯대를 만드는 것과 같아요. 예를 들어, "물고기를 잡으면 자동으로 크기를 재고 이름을 붙여주는 낚싯대" 같은 거죠. 한 번 만들어 두면, 연못가 다른 사람들도 이 특수 낚싯대를 빌려 가서 똑같은 방식으로 물고기를 잡을 수 있어요.

핵심: 낚싯대(훅)는 연못(React 내부)과 연결되어 있어서 물고기(상태, 생명주기)를 조작하고 가져올 수 있게 해주는 특별한 도구예요. 이 낚싯대는 아무 데서나 휘두르면 안 되고(규칙), 연못가(컴포넌트)에서만 제대로 쓸 수 있어요.

 

---

🚶‍♀️ 일반 함수: 그냥 걷기 (또는 일반 도구)

반면에 일반 함수는 그냥 걷는 것이나 일반적인 도구와 같아요.

• addNumbers(a, b) 함수: "두 숫자 a와 b를 받아서 더한 값을 돌려줘!" 이건 그냥 발걸음을 옮겨서 두 지점 사이의 거리를 측정하는 것과 같아요. React 연못이나 물고기와는 직접적인 관련이 없어요.
• formatName(firstName, lastName) 함수: "이름과 성을 받아서 '이름 성' 형식으로 예쁘게 만들어줘!" 이건 그냥 손으로 연필을 잡고 글씨를 쓰는 것과 같아요. 이 행동 자체가 React의 상태를 바꾸거나 생명 주기를 건드리지는 않아요.

핵심: 일반 함수는 React 연못과 상관없이 독립적으로 존재하며, 정해진 일을 수행하는 자유로운 동작이나 범용 도구입니다. 어디서든 필요할 때 사용할 수 있고, 특별한 규칙에 얽매이지 않아요.

---

정리:

• 훅(Hook) = 낚싯대: React의 **내부 시스템(연못)**과 연결되어 **상태(물고기)**를 관리하고, 컴포넌트의 **생명 주기(연못가 상황)**에 반응할 수 있게 해주는 특별한 도구입니다. 사용 규칙이 있습니다.
• 일반 함수 = 걷기 / 일반 도구: React와 직접적인 관계없이, 주어진 작업을 수행하는 범용적인 동작이나 도구입니다. 사용 규칙이 자유롭습니다.