react - React Hook란? useState, useEffect, useCallback 3가지의 존재이유는?
import {
useState,
useEffect,
useCallback,
} from "react";
1차 존재이유
리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트가 있는데
useState,
useEffect,
useCallback,
는 원래 클래스 컴포넌트에서만 사용가능한거였는데
클래스라는 개념을 어려워 하는 사람이 있는 덕분에
함수 컴포넌트에서도 사용가능하게 만들어진것이다
나는 이걸 설명듣고 리액트 문법 이해했다!!!
그전에는 코드를 봐도 이해가 안된거보니 나는
뭘 이해하기전에 반드시 이유 즉 명분을 알아야하는 사람이가보다
2차 존재이유
useState,
useEffect,
는 각각 렌더링시마다 메모리를 새로 할당하는데
useCallback은 기존의 메모리를 그대로 사용해서
성능측면과 통신안끊김 측면에서 좋다
아래에 당신이 적은 “1차·2차 존재 이유”를 기반으로, 더 정확하고 오해 없는 방식으로 정리해드릴게요. 지금 작성하신 설명에는 사실과 다른 부분이 조금 섞여 있어서, 원래 의도는 살리되 React 동작을 정확히 이해할 수 있도록 재해석해서 설명드립니다.
✅ 정확하게 다시 정리한 “useState / useEffect / useCallback 존재 이유”
📌 1차 존재 이유(정확 버전)
✔ “클래스 컴포넌트에서만 가능했던 기능을 함수 컴포넌트에서도 가능하게 하기 위해 Hook이 생겼다.”
→ 이건 거의 맞는 설명입니다. 다만 조금 더 정확히 말하면:
🔹 React Hook은 "상태 + 라이프사이클 로직을 함수 컴포넌트에서도 사용하게 해주는 기능"
-
예전에는 state, lifecycle(componentDidMount 등)을 쓰려면
반드시 class 컴포넌트를 써야 했음 -
하지만 class 문법이 어렵고 this 바인딩 때문에 실수가 많았음
-
그래서 React 16.8(2019년) 이후로 Hook이 등장
→ 함수 컴포넌트에서도 상태 + 라이프사이클을 모두 처리 가능
✔ 당신의 결론
“나는 이유를 알아야 이해되는 사람이다.”
→ 굉장히 좋은 방식입니다. React도 원리를 이해하면 훨씬 쉬워짐.
📌 2차 존재 이유(정확 버전)
❗ 지금 적으신 내용 중 일부는 정확하지 않아서 교정해드립니다.
✔ useState, useEffect는 렌더링할 때마다 메모리를 새로 할당하는가? → ❌ 아니다.
React는 렌더링할 때마다 컴포넌트 함수 전체를 다시 호출하는 구조이지만,
-
useState의 값 -
useEffect의 의존성 배열 -
내부적으로 저장된 각 Hook의 메모리
이것들은 React가 별도로 보관한다.
즉, 매 렌더링마다 메모리를 새로 만드는 것이 아니다.
✔ 그렇다면 useCallback 존재 이유는? → “불필요한 재생성 방지”
🔹 함수 컴포넌트는 렌더링될 때마다 내부 함수도 새로 만들어짐
예:
const handleClick = () => {}
→ 렌더링될 때마다 새로운 함수 객체가 생성됨.
🔹 useCallback은 그걸 막아서 기존 함수를 재사용하게 만들어준다.
const memoizedFn = useCallback(() => {}, []);
즉,
-
불필요한 리렌더링 방지
-
자식 컴포넌트에 props로 넘길 때 동일성 유지
-
성능 최적화
-
STT(WebSocket 등)와 같은 지속 연결성이 필요한 곳에서 안정성 제공
이런 이점이 있다.
🎯 그래서 결론을 정리하면…
✔ useState / useEffect의 존재 이유
-
함수 컴포넌트에 state와 lifecycle 기능을 제공하기 위해 만들어짐.
✔ useCallback의 존재 이유
-
렌더링 때마다 새로 만들어지는 함수를 메모이제이션하여 재사용
-
성능 최적화 + 동일성 유지
📌 당신이 이해한 내용 기반으로 “업그레이드 버전 요약”
1차 존재 이유 —(사람의 말처럼 재정비 버전)
“Hook은 원래 클래스에서만 가능했던 상태관리와 라이프사이클 기능을
함수 컴포넌트에서도 사용하게 하려고 만들어졌다.
그래서 함수 컴포넌트가 리액트의 기본 형태가 될 수 있었다.”
2차 존재 이유 —(정확·쉽게 정리한 버전)
“함수 컴포넌트는 렌더링될 때마다 함수 내부 내용이 다시 생성된다.
그중 ‘함수’는 불필요하게 계속 새로 만들어지는 문제가 있는데
useCallback은 그걸 막고 기존 함수를 재사용해 성능을 좋게 만든다.”
필요하시면
✅ useState / useEffect / useMemo / useRef / useCallback 비교표
도 만들어드릴까요?
좋습니다!
아래에 useState / useEffect / useMemo / useRef / useCallback을
핵심 개념 + 언제 쓰는지 + 잘못 쓰는 경우까지 한 번에 비교할 수 있는 표로 정리해드립니다.
🎯 React Hook 핵심 5종 비교표
| Hook | 핵심 역할 | 언제 사용? | 렌더링과의 관계 | 메모리 동작 | 주의할 점 |
|---|---|---|---|---|---|
| useState | 상태 저장 | 화면에 보이는 값이 바뀔 때 | 상태가 바뀌면 렌더링 발생 | 상태는 React 내부에 영구 저장됨 | setState는 비동기 / 상태 객체로 관리 시 불변성 지켜야 |
| useEffect | 부수 효과 실행 (API, 구독, DOM 조작 등) | 렌더링 이후에 실행해야 하는 작업 | 렌더링 후 실행 | 의존성 배열에 따라 재실행 여부 결정 | 의존성 배열 잘못 쓰면 무한 요청/무한 렌더 발생 |
| useMemo | 계산 결과 메모이제이션 | 무거운 계산을 매 렌더마다 반복하면 비효율적일 때 | 렌더링 중 실행되지만 계산 결과만 저장 | 동일 의존성일 때 저장된 계산값 재사용 | 남용하면 오히려 성능 나쁨 |
| useRef | 변수를 기억하지만 렌더를 유발하지 않음 | DOM 접근, 렌더와 무관한 값 기억, 타이머/웹소켓 등 | 렌더링 유발 X | 값이 변경되어도 React는 무시하고 그대로 저장 | state처럼 쓰면 안 됨 / 변경해도 화면 안 바뀜 |
| useCallback | 함수를 메모이제이션 | 자식에게 함수 props로 전달할 때 / 동일성 유지할 때 | 렌더링 중 실행되지만 함수 재생성 여부 결정 | 동일 의존성일 때 기존 함수 재사용 | 남용 금지 — 대부분의 경우 useMemo보다 이득 적음 |
🔍 각 Hook을 초간단 비유로 이해하기
✔ useState = “상태 창고”
-
창고에 값이 저장되고
-
바뀌면 화면도 다시 그려짐 (리렌더)
✔ useEffect = “렌더 후 실행 스케줄러”
-
화면이 그려진 뒤에 실행되는 작업
예: API 요청, 이벤트 등록
✔ useMemo = “계산 결과 캐시”
-
계산 비용이 큰 연산을 캐싱해두고
의존성이 똑같으면 다시 계산하지 않음
✔ useRef = “렌더와 무관한 저장고”
-
값은 저장되지만
-
변해도 화면은 절대 안 바뀜
ex) setTimeout ID, 웹소켓 객체, DOM element
✔ useCallback = “함수 캐시”
-
렌더링 때마다 새로 만들어지는 함수 대신
동일 조건이면 이전 함수 재사용
→ 불필요한 자식 컴포넌트 리렌더 방지
🧠 Hook 선택 공식 (가장 실전적인 기준)
-
화면이 바뀌는 값이다 → useState
-
화면 바뀐 뒤 실행해야 한다 → useEffect
-
무거운 계산을 매번 하고 있다 → useMemo
-
값은 기억해야 하지만 렌더 필요 없음 → useRef
-
자식 컴포넌트 리렌더가 문제다 → useCallback
원하시면 더 유용한 자료도 만들어 드릴 수 있어요:
📌 버전 2 — 코드 예제로 비교한 Hook 사용법
📌 버전 3 — 그림/도식으로 한눈에 보는 Hook 동작 구조
📌 버전 4 — 잘못된 예시 vs 올바른 예시 모음집
어떤 방식으로 더 깊게 정리해드릴까요?
댓글
댓글 쓰기