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

Q1: 리액트 네이티브에서 커스텀 훅(Custom Hook)이란 무엇인가요?
A1: 커스텀 훅은 리액트 훅(useState, useEffect 등)을 조합하여 재사용 가능한 로직을 만드는 함수입니다. 컴포넌트 내에서 반복되는 상태 관리나 사이드 이펙트 로직을 분리해 코드의 재사용성과 가독성을 높여줍니다.

Q2: 커스텀 훅을 만드는 기본 문법은 어떻게 되나요?
A2: 커스텀 훅은 'use'로 시작하는 함수명으로 정의합니다. 예를 들어:
```javascript
import { useState, useEffect } from 'react';

function useCustomHook() {
const [state, setState] = useState(initialValue);

useEffect(() => {
// 사이드 이펙트 처리
}, []);

return [state, setState]; // 또는 객체 반환 가능
}
```

Q3: 리액트 네이티브에서 커스텀 훅 작성 시 주의할 점이 있나요?
A3: 일반 리액트와 동일하게 훅 규칙을 따라야 합니다. 즉, 훅은 컴포넌트 또는 다른 훅 내에서만 호출해야 하며, 조건문이나 반복문 안에서 훅을 호출하면 안 됩니다. 네이티브 API 호출 시 비동기 처리가 필요하면 적절히 useEffect 혹은 async 함수를 써야 합니다.

Q4: 예시로 네트워크 상태를 감지하는 커스텀 훅을 만들어볼 수 있나요?
A4: 네, 예시는 다음과 같습니다:
```javascript
import { useState, useEffect } from 'react';
import NetInfo from '@react-native-community/netinfo';

function useNetworkStatus() {
const [isConnected, setIsConnected] = useState(null);

useEffect(() => {
const unsubscribe = NetInfo.addEventListener(state => {
setIsConnected(state.isConnected);
});
return () => unsubscribe();
}, []);

return isConnected;
}
```
이 훅은 앱 내에서 네트워크 연결 상태를 간단히 사용할 수 있게 해줍니다.

Q5: 커스텀 훅을 컴포넌트에서 어떻게 사용하나요?
A5: 함수 컴포넌트 내부에서 일반 훅처럼 호출하고 반환값을 사용하면 됩니다.
```javascript
function MyComponent() {
const isConnected = useNetworkStatus();

return (
{isConnected ? '온라인' : '오프라인'}
);
}
```

Q6: 커스텀 훅이 리액트 네이티브의 특정 기능과 잘 맞나요?
A6: 네, 상태 관리, 애니메이션, 센서 데이터, 네트워크 상태, 위치 정보 등 반복되는 로직들을 커스텀 훅으로 효율적으로 관리할 수 있습니다. 이를 통해 코드 중복을 줄이고 유지 보수가 쉬워집니다.

Q7: 커스텀 훅 내에서 비동기 함수 사용법은?
A7: useEffect 내부에서 async 함수를 별도로 선언하고 호출해야 합니다. 예:
```javascript
useEffect(() => {
async function fetchData() {
const data = await fetch(...);
setState(data);
}
fetchData();
}, []);
```

요약하자면, 리액트 네이티브에서 커스텀 훅은 “use”로 시작하는 함수로, 훅들의 조합을 통해 재사용 가능한 상태 관리 및 로직을 캡슐화하는 방법입니다. 컴포넌트 내에서 일반 훅처럼 사용하며 상태나 사이드 이펙트를 관리하는 데 매우 편리합니다.

리액트 네이티브에서 커스텀 훅을 만드는 것은 코드의 재사용성을 높이고, 상태 관리 및 사이드 이펙트를 처리하는 데 유용합니다.

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

아래에서는 커스텀 훅을 만드는 방법에 대해 단계별로 설명하겠습니다.

1. 커스텀 훅의 기본 구조 커스텀 훅은 일반 함수와 비슷하지만, 리액트 훅을 사용할 수 있는 규칙을 따라야 합니다.

즉, 컴포넌트의 최상위에서 호출해야 하며, 조건부로 호출해서는 안 됩니다.

```javascript import { useState, useEffect } from 'react'; function useCustomHook() { const [state, setState] = useState(initialValue); useEffect(() => { // 사이드 이펙트 처리 return () => { // 정리 작업 }; }, [dependencies]); return [state, setState]; } ```

2. 커스텀 훅의 예시 여기서는 API 호출을 처리하는 커스텀 훅을 만들어 보겠습니다.

이 훅은 데이터를 가져오고 로딩 상태 및 에러 상태를 관리합니다.

```javascript import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } const result = await response.json(); setData(result); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } ```

3. 커스텀 훅 사용하기 이제 `useFetch` 훅을 리액트 네이티브 컴포넌트에서 사용할 수 있습니다.

```javascript import React from 'react'; import { View, Text, ActivityIndicator } from 'react-native'; import useFetch from './useFetch'; // 커스텀 훅 경로 const MyComponent = () => { const { data, loading, error } = useFetch('https://api.example.com/data'); if (loading) { return ; } if (error) { return Error: {error.message}; } return ( Data: {JSON.stringify(data)} ); }; export default MyComponent; ```

4. 커스텀 훅의 장점 - 재사용성 : 여러 컴포넌트에서 동일한 로직을 재사용할 수 있습니다.

- 가독성 : 복잡한 로직을 별도의 파일로 분리하여 코드의 가독성을 높입니다.

- 테스트 용이성 : 훅을 독립적으로 테스트할 수 있어, 컴포넌트 테스트를 간소화합니다.



5. 커스텀 훅의 패턴 커스텀 훅은 다양한 패턴으로 만들 수 있습니다.

예를 들어, 다음과 같은 패턴을 사용할 수 있습니다.

- 상태 관리 : 상태를 관리하는 훅을 만들어 여러 컴포넌트에서 공유할 수 있습니다.

- 이벤트 리스너 : 특정 이벤트를 처리하는 훅을 만들어 코드 중복을 줄일 수 있습니다.

- 폼 처리 : 폼의 입력값을 관리하고 검증하는 훅을 만들어 사용할 수 있습니다.



6. 리액트 네이티브에서 커스텀 훅은 코드의 재사용성을 높이고, 복잡한 로직을 관리하는 데 매우 유용합니다.

커스텀 훅을 만들 때는 리액트의 훅 규칙을 준수하고, 필요한 상태와 사이드 이펙트를 적절히 관리하는 것이 중요합니다.

이를 통해 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.