[ React ] Custom Hook으로 로직을 재사용해보자.

참고사이트

• 리액트 공식 문서 - Custom Hook

 

 

 

⚙️ Custom Hook

앞서 게시글에서 다양한 Hook을 사용해왔다.

React에는 useState, useContext, useEffect와 같은 여러 내장 Hook이 함께 제공된다.

데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나 채팅방에 연결하는 등 좀 더 구체적인 목적을 위해 Hook이 있었으면 하는 경우가 있다.

React에서 이러한 Hook을 모두 지원할  수 없다.

그래서 어플리케이션 요구사항에 맞게 직접 자신만의 Hook을 만들 수 있다.

 

🧐 왜 사용할까?

• 재사용성이 높아 코드가 간결해진다.
• 내장 Hook을 사용할 수 있다.
• 독립적으로 동작한다.

 

📡 구성요소 간 논리 공유

네트워크에 크게 의존하는 앱이 있다고 상상해보자.

앱을 사용하는 동안 네트워크 연결이 끊어졌을 경우 사용자에게 경고를 보내고싶다면 어떻게 해야할까

 

1. 네트워크가 온라인인지 여부를 추적하는 상태
2. 전역에서 *online 및 *offline 이벤트를 구독하고 해당 상태를 업데이트한다.

이렇게하면 구성요소가 네트워크 상태와 동기화된 상태로 유지된다.

 

*online: 브라우저가 네트워크에 대한 액세스값이 true로 변경되면 이벤트가 시작된다.

*offline: 브라우저가 네트워크에 대한 액세스값이 상실하여 값이 false로 변경되면 이벤트가 시작된다.

출처 : M mdn web docs (mozilla)

 

그럼 window에 addEventListener를 통해 이벤트를 추가해보자.

 

🖥️ Code

문득 공식문서 예시를 따라해보다가 궁금점이 생겼다.

 

따라한 원본은 각자 코드를 넣어놓고 개발한 버전이다.

 

정확한 Custom Hook을 보고자하면 👷🏻‍♂️ 보일 떄까지 스크롤을 하면 된다.

 

코드 사용 시, MUI 환경을 설치가 필요하다.

 

MUI 사이트

MUI: The React component library you always wanted

 

📄 App.tsx

import "./App.css";
import { NetworkObserver } from "./NetworkObserver";
import { NetworkCommunication } from "./NetworkCommunication";

function App() {
  return (
    <>
      <div className="App">
        <NetworkObserver />
        <NetworkCommunication />
      </div>
    </>
  );
}

export default App;

 

📄NetworkObserver.tsx

import { useEffect, useState } from "react";
import WifiOutlinedIcon from "@mui/icons-material/WifiOutlined";
import WifiOffOutlinedIcon from "@mui/icons-material/WifiOffOutlined";

export function NetworkObserver() {
  const [online, setOnline] = useState<boolean>(true);

  useEffect(() => {
    function handleOnline() {
      setOnline(true);
    }
    function handleOffline() {
      setOnline(false);
    }

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.addEventListener("online", handleOnline);
      window.addEventListener("offline", handleOffline);
    };
  }, []);
  return (
    <div>
      {online ? (
        <>
          <WifiOutlinedIcon
            sx={{ color: "skyblue", verticalAlign: "bottom" }}
          />
          Connected
        </>
      ) : (
        <>
          <WifiOffOutlinedIcon sx={{ verticalAlign: "bottom" }} /> Disconnected
        </>
      )}
    </div>
  );
}

 

📄NetworkCommunication.tsx

import { useEffect, useState } from "react";

export function NetworkCommunication() {
  const [online, setOnline] = useState<boolean>(true);

  useEffect(() => {
    function handleOnline() {
      setOnline(true);
    }
    function handleOffline() {
      setOnline(false);
    }

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

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

  return <div>{online ? "Connected" : "DisConnected"}</div>;
}

우선 개발 서버를 열기 위해 인터넷이 접속 되어 있을 것이니 true를 기본값으로 두었다.

 

이제 본인 PC에서 Wi-Fi 연결을 해제하거나, 랜선을 뽑아보자.

window에 addEventListner를 통해 연결이 끊어지며 online 상태 값이 false로 변경되어 리-렌더링이 된다.

 

이제 App.tsx에서 두 컴포넌트를 호출해주면 되는데, 

이거말고

 

📄 App.tsx

import { NetworkObserver } from "./NetworkObserver";
import "./App.css";
import { NetworkCommunication } from "./NetworkCommunication";
import { useEffect, useState } from "react";

function App() {
  const [online, setOnline] = useState<boolean>(true);

  function handleOnline() {
    setOnline(true);
  }
  function handleOffline() {
    setOnline(false);
  }

  useEffect(() => {
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

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

  return (
    <>
      <div className="App">
        <NetworkObserver online={online} />
        <NetworkCommunication online={online} />
      </div>
    </>
  );
}

export default App;

 

📄NetworkObserver.tsx

import { useEffect, useState } from "react";
import WifiOutlinedIcon from "@mui/icons-material/WifiOutlined";
import WifiOffOutlinedIcon from "@mui/icons-material/WifiOffOutlined";

export function NetworkObserver({ online }) {
  return (
    <div>
      {online ? (
        <>
          <WifiOutlinedIcon
            sx={{ color: "skyblue", verticalAlign: "bottom" }}
          />
        </>
      ) : (
        <>
          <WifiOffOutlinedIcon sx={{ verticalAlign: "bottom" }} />
        </>
      )}
    </div>
  );
}

 

📄NetworkCommunication.tsx

export function NetworkCommunication({ online }) {
  return <div>{online ? "Connected" : "Disconnected"}</div>;
}

 

이렇게 props로 주면 될 거 간결해질 거 같아서 새로운 예제를 찾아봤다.

동작은 똑같이 잘 동작한다.

 

단순한 네트워크 연결이라 그런가 싶다가

 

🧐 계속 고민했다 이게 왜 예제로 있을까...

 

생각해낸 답은

최상단 State에서 네트워킹 값이 바뀌면 수 많은 prop을 넘겨받거나 Context 혹은 recoil로 값을 공유하여 값으로 변경할 수 있겠지만

Custom Hook 코드를 보고나서 Custom Hook이 좀 더 간결하고 괜찮을 거라 생각했다.

왜냐하면 React Hook은 컴포넌트 어디서든 호출이 가능하기 때문이다.

 

⚙️ CustomHook 제작

React Hook을 살펴보면 Hook의 이름들의 앞에 use가 붙어있는 것을 확인 할 수 있다.

 

파일을 생성할 때, 파일명을 use로 시작해서 생성하면 된다.

 

📄useNetwork.ts

import { useEffect, useState } from "react";

export function useNetwork() {
  const [isOnline, setIsOnline] = useState<boolean>(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

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

  return isOnline;
}

 

📄App.tsx

import "./App.css";
import { NetworkObserver } from "./NetworkObserver";
import { NetworkCommunication } from "./NetworkCommunication";

function App() {
  return (
    <>
      <div className="App">
        <NetworkObserver />
        <NetworkCommunication />
      </div>
    </>
  );
}

export default App;

 

📄NetworkObserver.tsx

import { useEffect, useState } from "react";
import WifiOutlinedIcon from "@mui/icons-material/WifiOutlined";
import WifiOffOutlinedIcon from "@mui/icons-material/WifiOffOutlined";
import { useNetwork } from "./useNetwork";

export function NetworkObserver() {
  const online = useNetwork();
  return (
    <div>
      {online ? (
        <>
          <WifiOutlinedIcon
            sx={{ color: "skyblue", verticalAlign: "bottom" }}
          />
        </>
      ) : (
        <>
          <WifiOffOutlinedIcon sx={{ verticalAlign: "bottom" }} />
        </>
      )}
    </div>
  );
}

 

📄NetworkCommunication.tsx

import { useNetwork } from "./useNetwork";

export function NetworkCommunication() {
  const online = useNetwork();
  return <div>{online ? "Connected" : "Disconnected"}</div>;
}

 

코드가 한결 간결해졌으며,

 

똑같이 잘 동작한다.