custom hooks

React는 useState, useEffect와 같이 내재하고 있는 hook이 존재합니다. 이미 정의되어 있는 hook 외에도 다른 기능을 수행하거나, 반복되는 로직을 묶어 하나의 컴포넌트로 생성하고 싶은 경우 custom hook을 생성하여 사용할 수 있습니다.

custom hooks 사용하는 이유

1. 컴포넌트 간 로직을 공유할 수 있기 때문에 코드와 로직이 간결해지고, 가독성이 좋아집니다.
2. 불필요한 반복을 줄이고, 재사용성을 높일 수 있습니다.
3. 유지보수에 용이합니다.

결국에는 개발 생산성을 높이고 버그를 줄일 수 있게 됩니다.

custom hook 사용 규칙

1. Hook의 이름은 항상 use로 시작하고, use뒤에는 대문자로 시작해야 합니다.(ex. useState, useEffect)
2. 가능하다면 하나의 custom hook에는 하나의 기능만을 구현하는 것이 좋습니다.
3. custom hook이 다른 훅이나 상태에 의존할 경우, 의존성 배열을 올바르게 설정하여 해당 hook이 다시 렌더링 되는 조건을 명시적으로 지정해야 합니다.

아래의 예제코드를 보며 학습해봅시다.

fetch를 사용하여 user 데이터를 받아오는 경우를 생각해봅시다.

• custom hook을 사용하지 않는 경우

import { useState, useEffect } from 'react'

export default App() {
	const [userData, setUserData] = useState([]); // user 데이터
	const url = 'http://ozcoding/12345';
	
	useEffect(() => {
		fetch(url)
			.then(res => res.json())
			.then(data => setUserData(data))
	}, [])

fetch를 이용하여 데이터를 받아오는 custom hook을 작성해보겠습니다.

보통 custom hook은 여러 개를 만들기 때문에 폴더를 만들고 그 안에서 관리합니다. hooks 폴더를 생성하고 폴더 내부에 파일을 생성해주세요.

• useFetchData

import { useState, useEffect } from 'react'

export default function useFetchData(url) { 
	const [value, setValue] = useState([]);
	
	useEffect(() => {
		fetch(url)
			.then(res => res.json())
			.then(data => setValue(data))
	}, [url]) // 의존성 배열에 url이 변경되는 경우에만 로직을 실행하도록 설정
	
	return value; // 변경된 value 값을 return
	
}

• custom hook 적용하여 데이터 통신하기

import { useState, useEffect } from 'react'
import useFetchData from './hooks/useFetchData';

export default App() {
	const user = useFetchData('http://ozcoding/12345');
	
	return (
		<>
			{/* user 데이터 */}
		</>
	);
}

custom hook 적용 후를 확인해보면, 컴포넌트의 로직이 hook을 사용하기 전보다 더욱 간결해진 것을 볼 수 있습니다.

생성한 useFetchData를 활용하여, 또 다른 데이터 통신에서도 간단한 로직을 통해 데이터를 받아올 수 있습니다. custom hook은 우리가 state 그 자체가 아닌 state 저장 로직을 공유하도록 해줍니다. 같은 Hook을 호출하더라도 각각의 Hook 호출은 완전히 독립되어 있습니다.