소스 코드: https://github.com/soonitoon/React_Hooks

이 글은 Nomad Coder의 "실전형 리액트 Hooks 10개" 강의를 바탕으로 작성되었습니다.

2021년 3월 2일 자정

드디어 4편에 걸친 <리액트 후크 만들기> 포스팅의 끝이 보입니다.😄 지난 포스팅에 이어서 적어보겠습니다.

useAxios

useAxios는 Axios를 간편하게 사용할 수 있는 후크입니다. 사용할 Axios 인스턴스와 URL및 config를 매개변수로 전달하면 데이터 로딩 여부, 에러(만약 에러가 발생했다면), 얻어온 데이터, 그리고 요청을 다시 보낼 수 있는 refetch()를 객체 형태로 반환합니다.

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null,
  });
  const [trigger, setTrigger] = useState(0);
  if (!opts.url) {
    return;
  }
  const refetch = () => {
    setState({
      ...state,
      loading: true,
    });
    setTrigger(Date.now()); // 현재 시각으로 state를 업데이트해서 리렌더링
  };
  // trigger가 업데이트 될 때마다 실행
  useEffect(() => {
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data,
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [trigger]);
  return { ...state, refetch };
};

useAxios는 두 개의 state를 갖습니다.

• state
• trigger

state에는 최종적으로 반환할 객체를 저장합니다.

{
    loading: true,
    error: null,
    data: null,
}

loading은 로딩 여부를 부울형 값으로 저장하는 변수로써, 로딩중에는 true, 로딩이 끝나면 false 값을 갖습니다. 이는 데이터를 로딩할 때 로딩 화면을 사용자에게 보여줘야 하는 경우 유용하게 쓰일 수 있습니다.
error는 만약 요청에 에러가 발생하게 되면 그 에러 메시지가 저장되는 변수입니다. default 값은 false입니다.
data는 말 그대로 요청을 통해 가져온 데이터를 담는 변수입니다.

useEffect의 콜백 함수 내에서 Axios 인스턴스를 통해 해당 URL로 요청을 보내게 됩니다. 요청으로부터 가져온 데이터를 state에 저장된 객체에 담고, 만약 요청 과정에서 에러가 발생하게 되면 역시 error 메시지를 state의 error 변수에 저장합니다.
useEffect에는 콜백 함수와 함께 trigger state도 인자로 전달합니다. 이렇게 되면 trigger의 값이 바뀔 때마다 요청을 반복하게 됩니다.

이 trigger 값을 바꾸는 역할은 refetch()가 담당합니다. setTrigger(Date.new())를 통해서 trigger 값을 바꿔주게 되는데요, 바꿔주는 값을 현재 시각으로 세팅해서 간단한 코드로 매번 다른 값을 집어넣어줄 수 있습니다. 이 refetch() 함수를 리로딩 버튼과 연결하면 간편하게 리로딩 기능을 구현할 수 있습니다.

useNotification

useNotification은 사용자에게 브라우저 알림을 보낼 때 유용하게 사용할 수있는 함수입니다. 또한 사용자에게 알림 권한 요청까지 할 수 있습니다. 이것 역시 후크는 아니지만 만드는 과정에서 함수형 프로그래밍을 연습할 수 있었습니다.

// 알림 제목과 옵션(본문, 아이콘 등)을 인자로 받음
const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }
    // 알림 생성 함수
  const sandNotification = () => {
      // 알림이 사용자에 의해 차단되어있다면
    if (Notification.permission !== "granted") {
      // 알림 권한 요청을 보냄
      Notification.requestPermission().then((permission) => {
          // 다시 거절하면 실행 종료
        if (permission !== "granted") {
          return;
        } else {
          new Notification(title, options);
        }
      });
    } else {
      new Notification(title, options);
    }
  };
  return sandNotification;
};

useNotification은 매개변수 title과 options를 갖습니다. title은 말 그대로 알림에 띄울 제목이고, options는 Notification에 넘겨줄 알림 옵션을 담은 객체입니다.

그리고 useNotification 안에서 sandNotification 함수를 만들어주는데요, 이 함수는 알림 권한을 확인/요청하고 권한을 얻으면 알림을 보내는 역할을 합니다.
현재 권한 상태를 확인하고 만약 "granted" 상태가 아니라면 사용자에게 requestPermission 메소드를 통해 알림 권한을 요청합니다. 그렇게 보낸 요청에서도 사용자가 알림을 허락하지 않는다면 함수를 종료합니다. 처음부터 허용되어 있거나, 권한 요청 후에 사용자로부터 "granted" 상태를 얻으면 Notification 생성자로 알림을 보냅니다.

이번 포스팅은 useNotification 하나 밖에 없어서 굉장히 짧막한 글이 되었습니다.😂 다음 포스팅에서는 지금까지 만든 후크(와 비슷한 것들)를 npm에 배포하는 과정에 대해 작성하겠습니다.