사용자 지정 반응 후크: useNetworkState

시리즈의 마지막 에피소드에서는 로컬 스토리지 관리를 단순화하기 위해 후크를 구현했습니다. 오늘 에피소드에서는 사용자 네트워크 상태 관찰을 단순화하는 후크(useNetworkState )를 만듭니다.

Motivation

Implementation

Usage

Conclusion

Support Me

동기 부여

제대로 작동하려면 온라인 상태여야 하는 애플리케이션을 구축한다고 가정해 보겠습니다. 사용자의 연결이 끊어지면 네트워크 연결을 확인하라는 토스트 메시지를 표시하려고 합니다. React 앱에서 이 작업을 수행하려면 다음과 같이 진행할 수 있습니다.

const App = () => {
  const [isOnline, setIsOnline] = useState(window.navigator.onLine);

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
    };
    const handleOffline = () => {
      setIsOnline(false);
    };
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return (
    <div>
      <h1>My Awesome App</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
        saepe, sunt, similique vitae illo.
      </p>
      {!isOnline && (
        <div className="toast">
          You are offline. Please check your connectivity and try again.
        </div>
      )}
    </div>
  );
};

이것은 잘 작동하지만 이것은 이미 많은 코드이며 무엇보다도 useEffect 후크 내부에 많은 논리가 있습니다. 우리의 목표는 네트워크 상태 변경을 수신하기 위해 전체 앱에서 재사용할 수 있는 사용자 지정 후크 내에서 이 논리를 추상화하는 후크useNetworkState를 정의하는 것입니다. 이렇게 하면 App 구성 요소 내부의 코드도 줄어들어 다른 논리(클릭 리스너, 양식 제출, 키보드 리스너...)를 추가하면 빠르게 길어질 수 있습니다.

구현

항상 그렇듯이 후크의 인터페이스(사용 방법)에 대해 생각해 봅시다. 우리의 경우에는 다음과 같이 간단한 것을 가질 수 있습니다.

const isOnline = useNetworkState()

꽤 직설적 인. 이 후크는 네트워크 상태와 동기화하기 위해 그에 따라 업데이트되는 단일 부울 값을 반환합니다.

우리는 useEffect 구성 요소의 App 후크에 작성한 논리만 추출하여 이미 후크 구현에 뛰어들 수 있습니다. 결국 후크는 다음과 같이 표시됩니다.

const useNetworkState = () => {
  const [isOnline, setIsOnline] = useBoolean(window.navigator.onLine);

  useEffect(() => {
    window.addEventListener('online', setIsOnline.on);
    window.addEventListener('offline', setIsOnline.off);

    return () => {
      window.removeEventListener('online', setIsOnline.on);
      window.removeEventListener('offline', setIsOnline.off);
    };
  }, []);

  return isOnline;
};

잠깐, 도대체 useBoolean가 뭐야? 이 후크는 존재하지 않습니다... 🤨

네 말이 맞아. 그러나 첫 번째 에피소드부터 이 시리즈를 따라왔다면 이 후크는 우리가 구현한 첫 번째 사용자 정의 후크이기 때문에 무언가를 상기시킬 수 있습니다! 도중에 이 시리즈를 발견했다면 문제 없습니다. 로 이동하면 useBoolean 후크에 대한 내 기사로 이동합니다.

Note: if you don't want to use the useBoolean hook, you can be satisfied with the native useState one, and useNetworkState would be the following:

const useNetworkState = () => {
  const [isOnline, setIsOnline] = useState(window.navigator.onLine);

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
    };
    const handleOffline = () => {
      setIsOnline(false);
    };
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
};

용법

App 구성 요소로 돌아가서 코드를 대폭 단순화할 수 있습니다(직접 참조).

const App = () => {
  const isOnline = useNetworkState()

  return (
    <div>
      <h1>My Awesome App</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
        saepe, sunt, similique vitae illo.
      </p>
      {!isOnline && (
        <div className="toast">
          You are offline. Please check your connectivity and try again.
        </div>
      )}
    </div>
  );
};

예, 예. 한 줄. 굉장하죠? 😎

모든 논리는 이제 구성 요소 외부에서 추상화되어 중요한 사항에만 초점을 맞춥니다. 이렇게 함으로써 우리는 SOC(Separation of Concerns) 설계 원칙 — 추가 정보here을 따르고 있습니다.

결론

이 후크가 귀하의 프로젝트에 유용하기를 바랍니다. 질문이 있으시면 의견 섹션에서 자유롭게 질문하십시오. 지금은 저를 읽어 주셔서 감사합니다. 다음에 새로운 사용자 지정 후크를 위해 뵙겠습니다. 🤗


소스 코드는 CodeSanbox에서 사용할 수 있습니다.

지원 해줘

저를 지원하고 싶으시면 다음 링크를 클릭하여 저에게 커피를 사주실 수 있습니다.