eslint-plugin-react-hooks 패키지

eslint-plugin-react-hooks 패키지는 React의 훅(Hooks) 사용을 올바르게 유지하고 버그를 예방하기 위해 ESLint 규칙을 제공하는 플러그인이다.

이 패키지를 통해 useEffect, useMemo, useCallback등 React훅의 사용에서 발생할 수 있는 일반적인 문제를 잡아낼 수 있다.

 

주요 기능

1. react-hooks / rules-of-hooks :

• 목적 : 훅 사용 규칙 위반을 방지
• 내용 : React의 훅은 특정 규칙에 따라 사용되어야 한다. 예를 들어, 훅은 함수 컴포넌트나 커스텀 훅에서만 사용할 수 있고, 조건문이나 반복문 안에서 사용해선 안 된다.

예시 오류 :

if (condition) {
  useEffect(() => { /* ... */ }); // 오류 발생: 훅이 조건문 안에 사용됨
}

 

2. react-hooks/exhaustive-deps:

• 목적 : useEffect, useMemo, useCallback의 의존성 배열을 자동으로 검사해서 빠뜨린 의존성을 찾아내는 것
• 내용 : 의존성 배열을 정확히 지정하지 않으면 React가 의도대로 동작하지 않을 수 있다. 예를 들어, useEffect에서 사용된 변수나 함수가 의존성 배열에 빠지면 예기치 않은 결과가 발생할 수 있다.

예시 오류 :

useEffect(() => {
  console.log(data); // data를 사용했지만, 의존성 배열에 포함하지 않음
}, []); // 경고 발생: 의존성 배열에 data 추가 필요

 

사용 방법

eslint-plugin-react-hooks를 사용하려면 ESLint 설정 파일에 플러그인을 추가한다.

{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

이제 위 규칙에 따라 잘못된 훅 사용이나 빠뜨린 의존성이 있을 경우 ESLint가 오류나 경고를 보여준다.

eslint-plugin-react-hooks는 이러한 규칙을 통해 React훅을 안전하고 일관성 있게 사용할 수 있게 도와준다.