리액트 커스텀 훅

[React.js] 커스텀 훅(Custom Hook)과 유틸 함수(util function)에 대해서

❗ 커스텀 훅(Custom Hook) React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 훅(useState, useEffect 등)을 이용하여 구현된다. 또한 JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다. 예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기..