(React) 08. Custom hooks

김동우·2021년 8월 22일

React

wecode

목록 보기

31/32

잠깐! 시작하기 전에

이 글은 wecode에서 실제 공부하고, 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.

또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 포스팅이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.

설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.

글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.

서론

팀원들의 개발 속도를 올리고 싶다!
중복되는 로직을 한 줄로 줄이고만 싶다!

하는 사람들에게 딱 좋은 내용입니다.

예시는 fetch, async-await 로직입니다.

아무리 생각해도 이런 기능이 있었기에 React가 사랑스럽지 않았을까 생각이 드네요.

물론 utils 파일의 존재는 팀 프로젝트에 있어 필수적이라고 생각합니다.

React hooks는 그 이상의 무언가를 보여주고 있지 않을까? 하는 마음이 살짝 드네요.

사실 팀원들에게 이 hooks를 설명하고, 사용하게 하는 것이 가장 어려운 일인데, 이는 또 잘 이겨낼 수 있기를 바랍니다.

그럼 시작해보겠습니다.

hooks.js

import { useEffect, useState } from 'react';
import { KAKAO_LOGIN, REDIRECT_URI } from './config';

export const useFetch = (url, methodOptions) => {
  const [responseData, setResponseData] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const fetchUrl = async () => {
    try {
      const response = await fetch(url, methodOptions);

      if (!response.ok) {
        throw new Error(response.status);
      }

      const json = await response.json();
      setResponseData(json);
      setLoading(false);
    } catch (e) {
      setError(e);
    }
  };

  useEffect(() => {
    fetchUrl();
  }, []);

  return [responseData, loading, error];
};
// commonLogic - 범용성 넓음

//--------------------------------------------------------

export const useKakaoLogin = codeData => {
  const [userInfo, setUserInfo] = useState('');
  const [loading, setLoading] = useState(true);
  const [errorText, setErrorText] = useState('');

  const login = async () => {
    try {
      const kakaoTokenCall = await fetch(
        `https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${codeData}`
      );

      const kakaoToken = await kakaoTokenCall.json();

      const backEndUserInfoCall = await fetch(KAKAO_LOGIN, {
        method: 'POST',
        headers: { Authorization: kakaoToken.access_token },
      });

      const backEndUserInfo = await backEndUserInfoCall.json();

      setUserInfo(backEndUserInfo);
      setLoading(false);
    } catch (e) {
      setErrorText(e, 'error!');
    }
  };

  useEffect(() => {
    login();
  }, []);

  return [userInfo, loading, errorText];
};
// module화 기반 Logic - 범용성 거의 없음