Hook의 규칙과 Custom Hook 만들기

Hook의 규칙

(1) Hook은 무조건 최상위 레벨에서만 호출해야 한다.

최상위 레벨 : React 함수 컴포넌트의 최상위 레벨을 의미

-> 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook을 호출하면 안된다는 의미

-> hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함

 

(2) 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

• Hook은 React 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 Hook에서만 호출할 수 있음

 

eslint-plugin-react-hooks

: hook의 규칙을 따르도록 강제해주는 플러그인

-> 이 플러그인을 사용하면 react 컴포넌트가 Hook의 규칙을 따르는지 아닌지 분석할 수 있음

eslint : JavaScript 코드에서 발견되는 문제 패턴을 식별하기 위한 정적 코드 분석 도구

 

Custom Hook 만들기

: 여러 컴포넌트에서 반복적으로 사용되는 로직을 Hook으로 만들어 재사용하기 위함

 

Custom Hook 추출하기

: 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

-> 중복된 로직을 추출하여 커스텀 Hook으로 만듦

Custom Hook은 리액트 기능이 아닌 Hook의 디자인에서 자연스럽게 따르는 규칙

 

Custom Hook의 이름은 꼭 use로 시작해야 한다!!

여러 개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.

-> 각 Custom Hook 호출에 대해서 분리된 state를 얻게 된다!

각 Custom Hook의 호출 또한 완전히 독립적임