커스텀 훅은 React 에서 기본적으로 제공하는 기본적인 훅(useState, useEffect, useCallback, useMemo, useContext 등)과 비슷한 방식으로 작동하는 사용자 정의 hook 이다.
useState나 useEffect를 내장하여 기능을 확장하거나, 프로젝트 전체에서 반복적으로 사용되는 로직 등을 모듈화하여 여러 컴포넌트에서 재사용할 수 있도록 하는 것이 커스텀 훅의 목적이다.
[커스텀 훅을 쓸 때의 장점 ]
- 반복적으로 사용되는 로직의 코드 반복을 줄이고, 재사용성을 높일 수 있다.
:예를 들어 동일한 데이터를 여러 컴포넌트에서 사용해야 하는 경우, 데이터를 불러오는 로직을 커스텀훅으로 분리하면 된다.
- UI를 구성하는 부분과, 비즈니스 로직을 구성하는 부분이 분리되어 유지보수가 용이해지고 공동 작업에 유리해진다.
: 데이터를 요청하거나 수정작업하는 부분을 별도의 custom hook 파일로 분리하면 코드 분량 자체가 간결해져서 유지보수가 편하고 여러 사람이 동일한 코드를 반복해서 작성할 필요가 없어진다.
그리고 커스텀 훅을 작성하기 위해서는 몇가지 규칙이 있다.
1. 훅의 이름은 반드시 use로 시작해야한다.
const useMyHook = ()=>{
//커스텀 훅 안에서 useState,useEffect등을 사용하는 것도 가능하다!
return ..
}
2. 반복문이나, 조건문 안에서 사용해서는 안된다.
.
.
if(...){
useMyHook(); //조건에 위배됨
}
for(... of ..){
useMyHook() // 이것도 안 됨! error 발생
}올바른 방식으로 작성된 커스텀 훅은 리액트에서 useState 와 같이 리액트 훅으로 인식되기때문에
반복문과 조건문 안에서 사용할 경우 에러가 발생한다.
3. 커스텀 훅을 사용하는 각 컴포넌트는 독립적인 상태를 가진다. 커스텀 훅을 호출하는 컴포넌트마다 별도의 state가 생성되고, 그 state들은 서로 값을 공유하지 않는다.
그 예시로 간단한 카운터 커스텀 훅을 작성해봤다.
export const useMyCounter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return { count, increment, decrement };
};
/////////////////////////////////////////////////
const AComponent = () => {
const { count, increment, decrement } = useMyCounter();
return (
<div>
<span>값: {count}</span>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
const BComponent = () => {
const { count } = useMyCounter();
return (
<div>
<span>값: {count}</span>
</div>
);
};
이 카운터 훅을 A컴포넌트와 B컴포넌트에서 각각 사용하는 경우,
A 컴포넌트에서 버튼을 통해 값을 증가하거나 감소시켜도 B컴포넌트의 counter state에는 영향을 미치지 않는다.
커스텀 훅을 사용하면 좋은 예시의경우는 우선 아래 문서를 참고하면 좋다
(추후 카운터보다 더 좋은 예시를 첨부하겠음.. )
커스텀 Hook으로 로직 재사용하기 – React
The library for web and native user interfaces
ko.react.dev
또는 React-query 등 라이브러리를 통해 서버 상태를 커스텀 훅으로 관리하는 방법도 있다.
리액트 쿼리는 자체 커스텀 훅을 제공하는 상태관리 라이브러리로 주로 대규모 프로젝트에서의 api통신과 비동기 데이터 처리를 편리하게 해주는 도구이다.
useQueryClient 라는 훅을 통해 쿼리 객체를 선언하고,
useQuery로 데이터 fetch 작업을, useMutation로 데이터의 수정과 삭제, 생성 작업을 수행한다.
React Query와 Axios로 비즈니스 로직을 최적화 하는 방법 (feat. 성능최적화, 데이터 처리)
백오피스 시스템을 개발하면서 복잡한 기능 구현과 데이터 처리가 큰 도전과제였다. 특히 대용량 데이터를 효율적으로 관리하고, 비즈니스 로직을 유연하게 확장하며, 일관된 방식으로 유지해
house-of-ham.tistory.com
자세한 사용법은 이 글을 참고하길!
'react js' 카테고리의 다른 글
| TypeScript의 타입 추론에 대해 알아보자 (0) | 2024.11.11 |
|---|---|
| tailwind vs css in js(styled,emotion) 무슨 차이가 있을까? (0) | 2024.11.07 |
| interface와 type 알고 사용하자 (차이, 장단점) (0) | 2024.10.02 |
| Next.js : 요즘 회사들의 프레임워크 (SSG,SSR,ISR) (2) | 2024.09.24 |
| React Query와 Axios로 비즈니스 로직을 최적화 하는 방법 (feat. 성능최적화, 데이터 처리) (4) | 2024.09.11 |