리액트 네이티브에서 커스텀 훅을 활용하는 방법은 무엇인가요?

_____

리액트 네이티브에서 커스텀 훅 활용 방법 FAQ

Q1: 커스텀 훅(Custom Hook)란 무엇인가요?
A1: 커스텀 훅은 리액트 훅(useState, useEffect 등)을 조합하여 재사용 가능한 로직을 함수 형태로 만든 것입니다. 함수 이름은 반드시 `use`로 시작해야 하며, 컴포넌트 간 상태 관리나 사이드 이펙트 처리를 효율적으로 분리해줍니다.

Q2: 리액트 네이티브에서 커스텀 훅을 사용하는 이유는?
A2: 코드의 중복을 줄이고, 상태 관리 로직을 분리하여 유지보수성을 높이며, 테스트하기 쉽도록 도와줍니다. 특히 네이티브 API 호출, 비동기 작업, 폼 상태 관리 등 반복되는 로직을 깔끔하게 모듈화할 때 유용합니다.

Q3: 간단한 커스텀 훅 예시를 보여줄 수 있나요?
A3: 예를 들어 'useToggle'이라는 훅은 boolean 상태를 토글하는 기능을 합니다.

```jsx
import { useState, useCallback } from 'react';

export function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue(v => !v), []);
return [value, toggle];
}
```

컴포넌트 내에서 아래처럼 사용합니다.

```jsx
const [isOn, toggleIsOn] = useToggle(false);
```

Q4: 커스텀 훅에서 useEffect를 어떻게 활용하나요?
A4: 네트워크 요청, 이벤트 리스너 등록/해제, 백그라운드 작업 등 부수효과를 처리할 때 `useEffect`를 사용합니다.

```jsx
import { useState, useEffect } from 'react';
import { BackHandler } from 'react-native';

export function useBackHandler(handler) {
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', handler);
return () => BackHandler.removeEventListener('hardwareBackPress', handler);
}, [handler]);
}
```

Q5: 상태 관리 라이브러리 없이 커스텀 훅으로 전역 상태를 관리할 수 있나요?
A5: 단순한 전역 상태는 React의 Context API와 커스텀 훅을 결합해 관리할 수 있습니다. 예를 들어, Context를 만들어 Provider로 감싸고, 커스텀 훅을 통해 접근하면 됩니다.

```jsx
import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {

const [user, setUser] = useState(null);
const login = (userData) => setUser(userData);
const logout = () => setUser(null);

return (

{children}

);
}

export function useAuth() {
return useContext(AuthContext);
}
```

Q6: 커스텀 훅에서 네이티브 모듈이나 API를 호출하는 예시가 있나요?
A6: 예를 들어, 위치 정보를 가져오는 훅입니다.

```jsx
import { useState, useEffect } from 'react';
import Geolocation from '@react-native-community/geolocation';

export function useCurrentLocation() {
const [location, setLocation] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
Geolocation.getCurrentPosition(
pos => setLocation(pos.coords),
err => setError(err.message),
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);
}, []);

return { location, error };
}
```

Q7: 커스텀 훅 작성 시 주의할 점은 무엇인가요?
A7:
- 훅 이름은 반드시 `use`로 시작해야 합니다.
- 컴포넌트나 다른 훅 안에서만 호출되어야 하며 조건문 안에서 호출하면 안 됩니다.
- 상태나 사이드 이펙트가 없는 경우 훅을 굳이 만들지 않아도 됩니다.
- 의존성 배열 관리에 신경 써야하며, 무한 루프 등 부작용이 없도록 주의합니다.

Q8: 커스텀 훅을 테스트할 수 있나요?
A8: 네, `@testing-library/react-hooks` 같은 패키지를 사용해 훅을 독립적으로 테스트할 수 있습니다. 이는 훅 내부 로직에 집중한 단위 테스트를 작성할 때 유용합니다.

---

요약하자면, 리액트 네이티브에서 커스텀 훅은 재사용 가능한 상태관리 및 사이드 이펙트 로직을 분리하는 도구로, 네이티브 기능 연동, 상태 공유, 비동기 처리 등에 활용하기 좋습니다.

리액트 네이티브에서 네이티브 모듈을 만드는 방법은 무엇인가요?

리액트 네이티브에서 MobX를 사용하는 방법은 무엇인가요?

리액트 네이티브에서 커스텀 훅(Custom Hook)은 리액트의 훅 기능을 활용하여 코드의 재사용성을 높이고, 상태 관리 및 사이드 이펙트를 보다 간편하게 처리할 수 있는 방법입니다.

커스텀 훅은 일반적으로 `use`로 시작하는 함수로 정의되며, 리액트의 내장 훅을 조합하여 특정 기능을 캡슐화합니다.

아래에서는 커스텀 훅을 만드는 방법과 활용 사례를 자세히 설명하겠습니다.

1. 커스텀 훅의 기본 구조 커스텀 훅은 일반적인 자바스크립트 함수와 유사하게 정의되지만, 리액트 훅을 사용할 수 있는 규칙을 따라야 합니다.

즉, 커스텀 훅은 리액트 컴포넌트의 최상위 레벨에서 호출되어야 하며, 조건부로 호출해서는 안 됩니다.

```javascript import { useState, useEffect } from 'react'; function useCustomHook(initialValue) { const [value, setValue] = useState(initialValue); useEffect(() => { // 사이드 이펙트 처리 console.log('Value changed:', value); }, [value]); const resetValue = () => setValue(initialValue); return [value, setValue, resetValue]; } ```

2. 커스텀 훅 사용하기 커스텀 훅을 정의한 후, 이를 리액트 컴포넌트에서 사용할 수 있습니다.

아래는 `useCustomHook`을 사용하는 예시입니다.

```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import useCustomHook from './useCustomHook'; // 커스텀 훅 임포트 const MyComponent = () => { const [value, setValue, resetValue] = useCustomHook(0); return ( Current Value: {value}

작성자: 이다희 [비회원] | 작성일자: 1년 전
조회수: 172 | 댓글: 0 | 좋아요: 0 | 싫어요: 0

내용이 부정확하다면 싫어요를 클릭해주세요.

수정