리액트 Custom Hook 작성 방법과 용도 FAQ

---

Q1: Custom Hook이란 무엇인가요?
A1: Custom Hook은 리액트에서 상태 관리나 로직 재사용을 위해 만든 함수로, 기본 Hook(useState, useEffect 등)을 조합하여 만든 사용자 정의 Hook입니다. 함수 이름이 반드시 `use`로 시작해야 하며, 컴포넌트 내에서 반복되는 로직을 캡슐화하여 재사용 가능하게 만듭니다.

---

Q2: Custom Hook을 왜 사용하나요?
A2: Custom Hook을 사용하면 여러 컴포넌트에서 동일한 로직을 중복 작성하지 않고 재사용할 수 있어 코드가 간결해지고 유지보수가 쉬워집니다. 또한, 관련 상태와 부수효과를 하나의 함수로 묶어 관리할 수 있습니다.

---

Q3: Custom Hook의 기본 작성법은 어떻게 되나요?
A3: Custom Hook은 일반 자바스크립트 함수처럼 작성하며, 함수명은 `use`로 시작해야 합니다. 내부에서 React Hook을 호출하여 상태와 효과를 다루고, 필요한 값을 반환합니다.

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

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

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

return [state, setState];
}
```

---

Q4: 간단한 Custom Hook 예제를 보여주세요.
A4: 윈도우 크기를 추적하는 Custom Hook 예시입니다.

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

function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});

useEffect(() => {
function handleResize() {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
}
window.addEventListener('resize', handleResize);

return () => window.removeEventListener('resize', handleResize);
}, []);

return size;
}
``` 컴포넌트에서 `const { width, height } = useWindowSize();`처럼 사용할 수 있습니다.

---

Q5: Custom Hook 내부에서 Hook 규칙을 지켜야 하나요?
A5: 네, Custom Hook도 리액트 Hook 규칙(최상위 호출, 조건부 호출 금지 등)을 지켜야 합니다. Hook은 항상 동일한 순서로 호출되어야 하므로 조건문이나 반복문 내에서 Hook을 호출하면 안 됩니다.

---

Q6: Custom Hook에서 상태와 부수효과를 동시에 관리해도 되나요?
A6: 네, Custom Hook에서는 useState, useEffect 등 다양한 Hook을 조합하여 상태 관리와 부수효과를 동시에 처리하는 것이 일반적입니다.

---

Q7: Custom Hook은 컴포넌트와 다른 점이 있나요?
A7: Custom Hook은 렌더링을 하지 않는 함수이고, 컴포넌트는 JSX를 반환하여 UI를 렌더링 합니다. Custom Hook은 상태와 로직만 캡슐화하여 컴포넌트가 아닌 곳에서 재사용하기 위함입니다.

---

Q8: Custom Hook을 만들 때 주의할 점이 있나요?
A8:
- `use`로 시작하는 이름을 반드시 붙여야 React가 Hook으로 인식합니다.
- Hook 규칙을 준수해야 합니다.
- 가능한 하나의 Custom Hook은 하나의 책임(상태 관리, API 호출 등)만 갖도록 설계하는 것이 유지보수에 좋습니다.
- 내부에서 사용하는 Hook과 반환하는 값이 명확해야 합니다.

---

Q9: Custom Hook에서 반환하는 값은 어떻게 하나요?
A9: 배열이나 객체 형태로 반환하며, 반환 값에는 상태 값, 상태 업데이트 함수, 또는 필요한 함수를 포함할 수 있습니다. 일반적으로는 배열을 사용하면 비구조화 할당으로 쉽게 사용할 수 있습니다.

```jsx
const [value, setValue] = useCustomHook();
```

또는 객체를 반환하여 명확성을 높일 수도 있습니다.

```jsx
return { value, setValue };
const { value, setValue } = useCustomHook();
```

---

Q10: Custom Hook은 어디에 위치시키는 것이 좋은가요?
A10: 보통 `src/hooks` 또는 `src/utils/hooks` 등의 별도 폴더에 위치시키고, 프로젝트 전반에서 재사용할 수 있도록 구조화합니다.

---

정리:
- Custom Hook은 반복되는 상태 및 로직을 재사용하기 위한 함수
- `use`로 시작하는 이름 권장
- Hook 규칙 준수 필수
- 상태, 부수효과 등 필요한 로직을 자유롭게 조합 가능
- 반환값은 배열 또는 객체로 전달하여 사용
- 코드 재사용성과 유지보수성 증대에 큰 도움이 됨

---

필요한 로직을 캡슐화하고 여러 컴포넌트에 공유할 때 Custom Hook 작성법을 활용해보세요!

리액트의 Custom Hook 작성 방법과 용도리액트에서는 재사용 가능한 로직을 만들기 위해 "Custom Hook"을 사용할 수 있습니다.

Custom Hook은 일반적인 Hook(예: `useState`, `useEffect`)과 같은 방식으로 작동하지만, 개발자가 필요에 따라 특정 기능을 캡슐화하여 재사용할 수 있도록 만들어진 함수입니다.

Custom Hook의 용도1. 코드 재사용 : 여러 컴포넌트에서 동일한 로직을 사용할 때, Custom Hook을 통해 중복 코드를 줄일 수 있습니다.

2. 상태 관리 : 복잡한 상태 로직을 관리하기 위해 Custom Hook을 사용하여 상태와 관련된 로직을 분리할 수 있습니다.

3. 비즈니스 로직 분리 : UI와 비즈니스 로직을 분리하여 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.

4. 테스트 용이성 : Custom Hook을 별도로 테스트할 수 있어, 컴포넌트 테스트를 보다 간편하게 진행할 수 있습니다.

Custom Hook 작성 방법1. Hook 이름 규칙 : Custom Hook의 이름은 항상 `use`로 시작해야 합니다.

예를 들어, `useFetchData`와 같은 이름을 사용할 수 있습니다.

2. 함수 정의 : Custom Hook은 일반 함수처럼 정의합니다.

내부에서 다른 Hook을 사용할 수 있습니다.

3. 리턴 값 : 필요한 상태나 함수를 리턴하여 컴포넌트에서 사용할 수 있도록 합니다.

# 예제: 데이터 Fetching을 위한 Custom Hook아래는 API에서 데이터를 가져오는 Custom Hook의 예제입니다.

```javascriptimport { 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 };}``` Custom Hook 사용하기위에서 정의한 `useFetch` Hook을 컴포넌트에서 사용하는 방법은 다음과 같습니다.

```javascriptimport 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 (

Fetched Data

{JSON.stringify(data, null, 

2)}

);}export default App;``` 결론Custom Hook은 리액트에서 코드의 재사용성을 높이고, 상태 관리 및 비즈니스 로직을 분리하는 데 매우 유용한 도구입니다.

필요할 때마다 Custom Hook을 만들어 사용하면, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.