[React] Hooks

React Hook을 알아보기 전에 Class Component 와 Functional Component 를 비교합니다.

 

Class Component vs Functional Component

• Class ComponentsetState() 함수를 통해 state를 업데이트합니다.
• Lifecycle methods 제공합니다.
• 생성자 ( constructor ) 에서 state를 정의합니다.
• Functional ComponentLifeCycle에 따른 기능 구현 불가합니다.
• Hook이 나오면서 useEffect,useState를 이용해 Mount, Update, Unmount 가 가능하게 됨
• 제공하는 기능은 한정적이지만 코드가 짧아지고 간단합니다.

Hook이란 ?

원하는 시점에 정해진 함수(state 관련 함수, Lifecycle 함수, 최적화 관련 함수) 를 실행되도록 만든 것 입니다. 이 때 실행되는 함수를 Hook 이라고 합니다.

 

1. Usestate 

2. useEffect

3. useMemo, useCallback, useRef

 

 

Hook 규칙

1. 최상위(at the Top Level)에서만 Hook을 호출해야 합니다, 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않아야 합니다.

<잘못된 예>
if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

<올바른 예>
useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  })

2. React 함수 컴포넌트에서만 Hook을 호출해야 합니다

Hook 규칙을 위한 참고 : ESLint 플러그인

https://ko.reactjs.org/docs/hooks-rules.html#eslint-plugin

Hook의 규칙 – React

// ESLint 설정 파일
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

Custom Hook

 

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

무엇을 인수로 받아야 하며 필요하다면 무엇을 반환해야 하는 지를 사용자가 결정할 수 있습니다.

 

Custom Hook의 이름은 꼭 use로 시작해야합니다. 특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 Hook 규칙의 위반 여부를 자동으로 체크할 수 없습니다.

 

같은 Hook을 사용하는 두개의 컴포넌트는 state를 공유하지 않습니다. 그 안의 state와 effect는 완전히 독립적입니다. 각각의 Hook에 대한 호출은 서로 분리(독립)된 state를 받습니다. Custom Hook을 직접적으로 호출하기 때문에 각각의 useState와 useEffect를 호출한 것입니다. 하나의 컴포넌트 안에서 useState와 useEffect를 여러 번 부를 수 있고 이들은 모두 완전히 독립적입니다.

 

https://ko.reactjs.org/docs/hooks-custom.html

자신만의 Hook 만들기 – React