[React] 공식 문서 / Hook / 5. Hook 규칙

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

 

 

 

 

 

Hook은 다음 2가지 규칙을 따른다.

 

 

1. 최상위(at the top level)에서만 Hook 호출

반복문, 조건문, 중첩된 함수 내에서 실행X

 

조건부로 effect를 실행하길 원한다면 아래와 같이 조건문을 hook 내부에 넣을 수 있다.

 

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

 

제공된 lint 규칙을 활용하면 이 문제는 해결됨!

-> eslint-plugin-react-hooks

 

 

 

 

2. React 함수 컴포넌트 내에서만 Hook 호출

일반 JS에서 Hook 호출 X

 

직접 작성한 custom Hook 내에서는 훅 호출 가능

-> 다음 장에서 Custom Hook 공부하자! ^_^