Q1: Custom Hook이란 무엇인가요?
A1: Custom Hook은 React 컴포넌트에서 재사용 가능한 로직을 함수 형태로 분리한 것으로, `use`로 시작하는 이름을 가진 함수입니다. 상태 관리, 사이드 이펙트 처리 등 공통 기능을 추출해 여러 컴포넌트에서 활용할 수 있습니다.

Q2: Custom Hook을 만드는 기본 문법은 어떻게 되나요?
A2: 함수 이름은 반드시 `use`로 시작해야 하며, React의 기본 Hook (예: useState, useEffect 등)을 내부에서 호출할 수 있습니다. 예를 들어:
```javascript
import { useState, useEffect } from 'react';

function useCustomHook() {
const [value, setValue] = useState(initialValue);

useEffect(() => {
// 부수효과 처리
}, []);

return [value, setValue];
}
```

Q3: Custom Hook을 만드는 이유는 무엇인가요?
A3: 중복된 상태 관리 로직이나 다른 비즈니스 로직을 여러 컴포넌트에서 공유하기 위해서입니다. 코드 재사용성을 높이고, 컴포넌트 코드를 더 깔끔하게 유지할 수 있습니다.

Q4: Custom Hook 내에서 다른 Hook들을 자유롭게 사용할 수 있나요?
A4: 네, Custom Hook 안에서는 React 기본 Hook이나 다른 Custom Hook들을 조건 없이 사용할 수 있습니다. 단, Hook 사용 규칙(최상위 호출, 조건문 내 사용 금지)을 준수해야 합니다.

Q5: Custom Hook에 매개변수를 전달할 수 있나요?
A5: 네, 일반 함수처럼 인자를 받아 내부 로직에 활용할 수 있습니다. 예를 들어, API 호출 URL을 인자로 받아 데이터를 가져오는 Hook을 구현할 수 있습니다.

Q6: Custom Hook을 사용하는 방법은 무엇인가요?
A6: 일반 Hook과 동일하게 컴포넌트 최상위에서 호출합니다. 예:
```javascript
function MyComponent() {
const [value, setValue] = useCustomHook(initialValue); // ...
}
```

Q7: Custom Hook에서 상태나 값을 반환할 때 배열과 객체 중 어떤 것을 사용해야 하나요?
A7: 상황에 따라 다르지만, 상태가 한 두 개라면 배열 형태로 반환하여, 배열 비구조화 할당을 사용할 수 있고, 관련된 상태가 많거나 이름이 필요한 경우 객체를 반환해 가독성을 높일 수 있습니다.

Q8: Custom Hook을 디버깅할 때 주의할 점은 무엇인가요?
A8: React DevTools에서는 Custom Hook 내부의 상태 변화를 직접 볼 수 없지만, Hook 호출 위치와 상태 변화를 추적해 문제를 디버깅할 수 있습니다. 또한, Hook 규칙 위반 여부(조건문 내 사용 등)를 항상 확인해야 합니다.

Q9: Custom Hook의 이름 규칙은 무엇인가요?
A9: 반드시 `use` 접두어로 시작해야 합니다. 이는 React가 Hook으로 인식하고 Hook 규칙을 적용하기 위한 필수 규칙입니다.

Q10: Custom Hook에서 비동기 작업을 할 때 주의할 점은 무엇인가요?
A10: useEffect 내부에 비동기 함수를 정의하고 호출해야 하며, 컴포넌트 언마운트 시 상태 업데이트를 방지하는 클린업 코드를 작성하는 것이 좋습니다. 예:
```javascript
function useDataFetcher(url) {
const [data, setData] = useState(null);

useEffect(() => {
let isMounted = true;
async function fetchData() {
const response = await fetch(url);
const result = await response.json();
if (isMounted) setData(result);
}
fetchData();
return () => { isMounted = false; };
}, [url]);

return data;
}
```

React에서 Custom Hook을 만드는 것은 재사용 가능한 로직을 캡슐화하여 코드의 가독성과 유지보수성을 높이는 좋은 방법입니다.

Custom Hook은 일반적인 Hook과 마찬가지로 `use`로 시작하는 함수로 정의되며, React의 상태 관리 및 생명주기 기능을 활용할 수 있습니다.

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

1. Custom Hook의 기본 구조 Custom Hook은 일반 함수와 유사하게 정의되지만, React의 Hook 규칙을 따라야 합니다.

즉, React 컴포넌트 또는 다른 Hook의 최상위에서 호출되어야 합니다.

```javascript import { useState, useEffect } from 'react'; function useCustomHook() { const [state, setState] = useState(initialValue); useEffect(() => { // Side effect logic return () => { // Cleanup logic }; }, [dependencies]); return [state, setState]; } ```

2. Custom Hook의 예제 예를 들어, API에서 데이터를 가져오는 Custom Hook을 만들어 보겠습니다.

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

```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 (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } ```

3. Custom Hook 사용하기 이제 위에서 만든 `useFetch` Hook을 React 컴포넌트에서 사용할 수 있습니다.

```javascript import React from 'react'; import useFetch from './useFetch'; function App() { const { data, loading, error } = useFetch('https://api.example.com/data'); if (loading) return

Loading...

; if (error) return

Error: {error.message}

; return (

Data

{JSON.stringify(data, null, 

2)}

); } export default App; ```

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

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

- 테스트 용이성 : Custom Hook을 독립적으로 테스트할 수 있습니다.



5. Custom Hook의 규칙 - Custom Hook은 항상 `use`로 시작해야 합니다.

- React의 Hook 규칙을 따라야 하며, 조건부로 호출해서는 안 됩니다.

- 다른 Hook을 호출할 수 있으며, 상태 및 생명주기 기능을 사용할 수 있습니다.



6. Custom Hook은 React 애플리케이션에서 코드의 재사용성과 유지보수성을 높이는 강력한 도구입니다.

위의 예제와 설명을 통해 Custom Hook을 만드는 방법을 이해하고, 필요에 따라 다양한 로직을 캡슐화하여 사용할 수 있습니다.

Custom Hook을 활용하여 더 깔끔하고 효율적인 React 애플리케이션을 개발해 보세요!