[React] Hook의 규칙 및 custom Hook

Hook 규칙

1. Hook은 반드시 최상위에서 호출하도록 한다.

if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

다음과 같이 for 문이나 if 문 안에서 사용하게 되면 if문의 조건에 충족이 되지 않을 경우에 useEffect 자체를 건너뛰게 되므로 문제가 생기게 된다. 이것이 컴포넌트 최상위(the top of level)에서 Hook이 호출되어야만 하는 이유이다. 만약 조건부로 useEffect의 함수를 실행하기를 원한다면, 조건문을 Hook 내부에 넣을 수 있다.

2. Hook은

custom Hook

커스텀 훅의 쓰임

React에는 상태 관련 로직을 컴포넌트에서 공유하는 두 가지 전통적인 방법이 있는데 render props와 고차 컴포넌트를 이용하는 것이다. 이 때 props는 상태(state) 등을 컴포넌트에서 컴포넌트로 전달을 하는데 쓸 수 있고, 고차 컴포넌트는 컴포넌트를 하나 새로 만들어 로직을 재사용하는 데 사용한다.
Hook을 사용하면 트리에 컴포넌트를 더하지 않고 상태 관련 로직을 컴포넌트 간에 공유할 수 있게 된다.

커스텀 훅 만들 때 주의할 점

커스텀 Hook의 이름은 반드시 "use"로 시작되어야 한다. 이를 따르지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 React에서 Hook 규칙의 위반 여부를 자동으로 체크할 수 없다.