프론트엔드 개발에서의 훅(hook)과 상태 관리에 대한 모든 것

훅 (hook)

함수형 컴포넌트에서 상태, 생명주기, 공통 로직을 쓸 수 있에 해주는 함수 규칙

 

"상태에 접근하는 방법"을 의미

 

쉽게 말해 "필요한 기능을 꺼내 쓰는 손잡이"로서 어딘가에 저장된 "상태"를 꺼내어주는 방법임

 

프로그래밍 관점에서는 "React 렌더링 흐름에 참여 하는 함수"를 의미

React와 어떻게 연결되느냐가 중요함

 

 

 

 

 

상태 (state)

프론트엔드에서 지금 이 순간의 값을 의미

앱이나 화면이 어떤 상황인지 알려주는 값으로, 

버튼이 눌렸는지, 로그인을 했는지, 로딩중인지 등을 의미하는 값

 

"변하면 화면도 같이 바뀌어야 하는 값"을 의미

 

 

 

 

 

훅과 상태의 연관

상태는 "값"으로써 React는 훅을 통해 값을 가져올 수 있다

 

 

 

 

 

React가 기본으로 제공하는 훅의 종류

- 상태 / 생명 주기

useState (상태 생성)

useEffect (시작 / 변경 / 정리)

useRef (값 기억, DOM 접근)

useReducer (복잡한 상태 로직)

 

- 성능 관련

useMemo (계산 결과 기억)

useCallback (함수 기억)

 

- Context / 외부 연결

useContext (전역 값 읽기)

useSyncExternalStore (외부 store 연결)

 

=> 훅은 커스텀으로도 만들 수 있음 (use로 시작하면서 React의 훅 규칙을 지키면됨)

 

 

 

 

 

상태 관리

상태를 어디에 두고, 어떻게 바꾸고, 누가 쓰게 할 지를 정하는 것

 

- 어디에 둘지

컴포넌트 안?

전역 (store)?

서버에서 가져와서?

 

- 어떻게 바꿀지

직접 변경?

함수로만 변경?

규칙 (불변성, 액션 등)?

 

- 누가 쓰는지

한 컴포넌트만?

여러 화면?

앱 전체?

 

 

 

 

 

React의 대표적인 상태 관리 라이브러리

useState / useReducer

React 기본 훅

 

- 상태 위치

컴포넌트 내부

 

- 접근 방식

훅

 

- 장점

간단하고 학습 비용이 낮음

 

- 단점

상태의 전역 공유가 어려움

 

- 사용시기

단일 컴포넌트 상태

소규모 앱

 

 

Context API

React 내장 전역 상태

 

- 상태 위치

Context

 

- 접근 방식

useContext 훅

 

- 장점

전역 공유 가능

라이브러리 불필요

 

- 단점

큰 상태나 자주 바뀌는 상태는 렌더링 성능 저하

 

- 사용시기

소규모 앱

설정 / 테마 / 로그인 등 자주 바뀌지 않는 상태 관리

 

 

Redux

전통적 전역 상태 관리

Redux Toolkit으로 옮겨짐

 

- 상태 위치

Store

 

- 접근 방식

connect

useSelector

useDispatch

 

- 장점

구조가 명확함

미들웨어가 풍부함

 

- 단점

보일러 플레이트가 강함 (동일하게 작성해야하는 코드가 많음)

학습 난이도가 높음

 

- 사용 시기

대규모 앱

복잡한 상태 흐름

 

 

Redux Toolkit

Redux의 공식 개선판

 

- 상태 위치

Store

 

- 접근 방식

useSelector

useDispatch

 

- 장점

보일러 플레이트 감소 (동

표준화

 

- 단점

여전히 러닝 커브가 있음

 

- 사용 시기

중규모 앱

화면 단위 상태

 

 

Recoil

Atom 기반 상태 관리

 

- 상태 위치

Atom

 

- 접근 방식

useRecoilState

useRecoilValue

 

- 장점

최소 단위 상태 관리

화면 최적화

 

- 단점

생태계가 작음

유지보수 및 활성 개발이 중단됨

React19와 호환되지 않음

 

- 사용 시기

중소규모 앱

화면 단위 상태

 

 

Jotai

최소 단위 Atom 상태 관리 라이브러리

 

- 상태 위치

Atom

 

- 접근 방식

useAtom

 

- 장점

단순함

훅 중심 최적화

 

- 단점

생태계가 작음

도구 부족

 

- 사용 시기

중소규모 앱

훅 중심 설계

 

 

Zustand

Store + Hook 기반 상태 관리 라이브러리

 

- 상태 위치

Store

 

- 접근 방식

커스텀 훅

 

- 장점

사용법 단순

React 훅과 자연스럽게 연동됨

 

- 단점

복잡한 구조에서는 설계 필요

 

- 사용 시기

중소~대규모 앱

빠른 개발

 

 

MobX

옵저버 패턴 기반 상태 관리 라이브러리

 

- 상태 위치

Observable

 

- 접근 방식

observer

useLocalObservable

 

- 장점

반응형

자동 렌더링  최적화

 

- 단점

규칙이 헷갈리고 디버깅이 어려움

 

- 사용 시기

상태가 많고 반응형이 중요한 앱