React Native에서 React hook은 어떻게 동작하나요?

Question

Accepted Answer

**Hook**(useState, useEffect, useContext 등)은 함수형 component에서 state와 부수 효과(side effect)를 관리하는 React 기능이며, React Native에서도 동일하게 동작합니다. 주요 hook을 이해하는 것은 React Native 컴포넌트 개발에 필수입니다.

## useState — state

```jsx
const [count, setCount] = useState(0);     // state + setter; 설정하면 다시 렌더링
const [user, setUser] = useState(null);
```

## useEffect — 부수 효과

```jsx
// useEffect는 렌더링 후 부수 효과(데이터 가져오기, 구독)를 실행함
useEffect(() => {
  fetchData();                  // 렌더링 후 실행
  // 선택적 CLEANUP (반환 함수) — 언마운트 시 / 재실행 전에 실행됨
  const sub = subscribe();
  return () => sub.unsubscribe();   // 정리 (누수 방지)
}, [dependency]);                    // 의존성 배열 → 언제 재실행할지
// → [] = 마운트 시 한 번; [dep] = dep 변경 시; 없음 = 매 렌더링마다
```

`useEffect`는 의존성 배열로 실행 시점을 제어하고 선택적 cleanup 함수(누수 방지에 중요)를 통해 부수 효과(데이터 가져오기, 구독, 타이머)를 처리합니다.

## 기타 주요 hook

```text
useContext → context 소비 (prop drilling 없이 공유 데이터)
useRef → 렌더링 간 유지되는 가변 참조 (예: component 참조,
  다시 렌더링 없이 값 저장)
useMemo → 비용이 큰 계산 값을 메모이제이션 (성능)
useCallback → 함수를 메모이제이션 (불필요한 재생성/재렌더링 방지)
useReducer → reducer로 복잡한 state 관리
CUSTOM HOOK → 재사용 가능한 stateful 로직 추출 (예: useFetch, useAuth)
```

## hook 규칙

```text
⚠️ hook은 component의 TOP LEVEL에서만 호출 (조건/반복/중첩 함수 안 아님)
⚠️ hook은 React component나 custom hook에서만 호출
→ 이 규칙들은 hook이 올바르게 동작하도록 보장함 (React는 호출 순서에 의존).
```

## 왜 중요한가

React hook을 이해하는 것은 React Native에 필수인데, **hook은 함수형 component에서 state와 부수 효과를 관리하는 표준 방법**이고 함수형 component가 최신 React Native 앱을 만드는 방식이므로 반드시 알아야 합니다.

Hook은 React Native에서 웹용 React와 동일하게 동작하므로 이 지식은 그대로 전이됩니다. **useState**(state 관리, 다시 렌더링 유발)는 변하는 데이터를 가진 어떤 component에든 기본입니다. **useEffect**는 특히 중요합니다. 의존성 배열로 실행 시점을 제어하고 **선택적 cleanup 함수**(구독 해제/정리로 누수를 방지하는 데 핵심)와 함께 **부수 효과**(데이터 가져오기, 구독, 타이머)를 처리합니다 — useEffect, 의존성 배열, cleanup을 이해하는 것은 필수입니다. 부수 효과(화면 로드 시 데이터 가져오기 등)는 흔하고 useEffect를 잘못 다루면 버그(잘못된 의존성으로 인한 무한 루프, cleanup 누락으로 인한 누수)를 일으키기 때문입니다.

**기타 주요 hook** — useContext(prop drilling 없이 공유 데이터 소비), useRef(지속되는 가변 참조), useMemo/useCallback(성능을 위한 메모이제이션), useReducer(복잡한 state), **custom hook**(useFetch나 useAuth 같은 재사용 가능한 stateful 로직 추출 — 코드 재사용을 위한 강력한 패턴) — 을 이해하면 실제 컴포넌트 개발 도구를 갖추게 됩니다.

**hook 규칙**(React가 호출 순서에 의존하므로 top level에서만, component/custom hook에서만 호출)을 이해하는 것은 미묘한 버그를 피하는 데 필수입니다.

Hook은 최신 함수형 React Native 컴포넌트에서 state와 부수 효과를 위한 표준 메커니즘이고(지식이 React에서 그대로 전이됨), 주요 hook(특히 useState와 cleanup이 있는 useEffect)과 규칙을 이해하는 것이 올바른 컴포넌트 개발에 필수이므로, React hook을 이해하는 것은 자주 적용되는 필수 React Native 지식입니다 — 최신 React Native 컴포넌트 개발의 기본이고, state와 부수 효과 관리의 중심이며, 웹 React에서 직접 전이되는 React Native 개발의 핵심 기술입니다.