React19.1 - Hooks

Hunter Joe·2025년 4월 17일

이번 글에서는 각각의 Hooks를 다루지 않고 어떤 Hooks가 어떤 범주로 나눠져 있는지만을 다뤄 볼 것이다.

리액트 공식문서에서는 Hooks를 크게 7가지로 분류하고 있다.
1. State Hooks
2. Context Hooks
3. Ref Hooks
4. Effect Hooks
5. Performance Hooks
6. Other Hooks
7. Your own Hooks

📌 State Hooks

useState : 직접 업데이트 할 수 있는 상태 변수를 선언
useReducer : declares a state variable with the update logic inside a reducer function.
→ 상태 변수를 업데이트 로직과 함께 Reducer function 안에서 상태변수와 업데이트 로직을 함께 선언

상태는 컴포넌트가 사용자 입력과 같은 정보를 '기억'하도록 합니다.
컴포넌트는 현재 입력 값, 현재 이미지 등을 기억해야하는데 React에서 이러한 컴포넌트 별 메모리를 State라고 합니다.

컴포넌트를 새 데이터로 업데이트하려면 두 가지의 일이 발생해야 한다.
1). 렌더링 간에 데이터를 유지한다.
2). 새로운 데이터로 컴포넌트를 렌더링하도록 React를 Trigger한다(리렌더링)

📌 Context Hooks

useContext

Context는 멀리 떨어진 상위(부모) 컴포넌트로부터 props를 거치지 않고 직접 데이터를 받아올 수 있게 해준다.

📌 Ref Hooks

useRef
useImperativeHandle

Ref는 컴포넌트가 렌더링에 사용되지 않는 정보를 저장할 수 있다.
→ DOM 요소나 setTimeout의 ID 같은 값들을 저장

State와는 달리, Ref를 업데이트해도 컴포넌트는 리렌더링되지 않는다.
Ref는 말하자면 React의 규칙에서 잠시 벗어날 수 있는 “비상구” 같은 역할을 한다.
주로 브라우저의 내장 API처럼 React와 무관한 외부 시스템과 연동해야 할 때 유용하게 사용된다.

📌 Effect Hooks

useEffect : commonly used
useLayoutEffect : rarely used
useInsertionEffect: rarely used

Effect는 컴포넌트가 외부 시스템과 연결하거나, synchronize(동기화)할 수 있도록 해줍니다.
→ 네트워크 요청, 브라우저 DOM 조작, 애니메이션 처리, 다른 UI 라이브러리로 작성된 위젯 연동,
그 외의 React 외부에서 동작하는 코드들과 상호작용하는 작업들이 포함된다.

Effect는 React 패러다임에서 벗어날 수 있는 '비상구(escape hatch)'이다.
Effect를 애플리케이션의 데이터 흐름을 제어하는 용도로 사용하면 안된다.
외부 시스템과 상호작용하지 않는 경우라면 Effect가 굳이 필요하지 않을 수 있다.

React Paradigm
리액트의 패러다임은 다음과 같다.
"상태와 props를 기반으로 렌더링 결과만 선언적으로 기술하고
그 외의 side effect는 컴포넌트 바깥에서 관리하자"

선언형

순수 함수

단방향 데이터 흐름(Flux 패턴)

렌더링은 React 스스로

📌 Performance Hooks

useMemo
useCallbck
useTransition : React 18에서 등장한 우선순위를 참고(prioritize rendering)
useDeferredValue : React 18에서 등장한 우선순위를 참고(prioritize rendering)

React는 state나 props가 바뀌면 컴포넌트를 리렌더링함 리액트의(기본 동작)
→ 리렌더링은 비용이 큰 작업
특히 계산량이 많거나 UI가 복잡한 컴포넌트는 쓸데없이 자주 리렌더되면 성능이 떨어짐
→ "바뀌지 않았다면 다시 계산하지 말자!"라는 최적화 전략이 필수적

때로는, 화면이 실제로 업데이트돼야 하므로 리렌더링을 건너뛸 수 없을 때도 있다.
이런 경우, 동기적으로 즉시 처리돼야 하는 blocking update (입력창에 글자를 입력하는 동작)와
사용자 인터페이스를 막을 필요가 없는 non-blocking update (차트를 갱신하는 작업)를
서로 분리함으로써 성능을 개선할 수 있다.

NOTE

blocking update / non-blocking update
blocking update와 non-blocking update는 React 18 이후 등장한 렌더링 우선순위 개념

✅ 1. blocking update란?
사용자의 입력, 클릭, 포커스 등 즉각 반응이 필요한 작업

지금 바로 화면에 반영되야 되는 것들

이러한 업데이트가 늦어질 경우 버벅임/지연이 바로 체감
→ 동기적(synchronous) 렌더링이 필요하고 React가 최우선으로 처리함

✅ 2. non-blocking update란?

UI 업데이트는 필요하지만 바로 하지 않아도 되는 작업

화면 반응성과 관계없는 작업들
→ 이런 것들은 지연 실행이 가능함 우선순위를 낮출 수 있음