ChatGpt를 사용하여 작업 중인 코드 개선하기

ChatGpt는 인공지능 챗봇입니다. 뛰어난 성능 때문에 전세계적으로 사용자 수가 급증하고 있습니다. 출시 두 달 만에 사용자 수 1억 명에 도달했으며, 이는 틱톡, 인스타그램보다 성장 속도가 훨씬 빠르다고 합니다.

 

그래서 현재 프로젝트에서 작업 중인 리액트 코드를 가져와 리팩터링을 시도했습니다.

아래의 코드는 브라우저의 넓이가 특정 넓이 이하인지 확인하여 boolean값을 반환해주는 커스텀 훅입니다.

import { useEffect, useState } from 'react';

export const useMobileView = (width: number) => {
  const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
    window.innerWidth < width,
  );

  const screenChange = (event) => {
    setIsCurrentMobileWidth(event.matches);
  };

  useEffect(() => {
    const mobileWidth = window.matchMedia(`screen and (max-width:${width}px)`);
    mobileWidth.addEventListener('change', screenChange);
    return () => mobileWidth.removeEventListener('change', screenChange);
  }, []);

  return { isCurrentMobileWidth };
};

만약, 현재 브라우저의 넓이가 991px 이하인지 확인하고 싶다면, 아래와 같이 사용할 수 있습니다.

useMobileView 훅을 선언하여 인자에 991를 넘겨주며, isCurrentMobileWidth 변수를 받아와서 값을 체크할 수 있습니다.

isCurrentMobileWidth 변수의 값은 현재 브라우저의 넓이가 991px 이하라면 true, 아니라면 false를 반환합니다.

const example = () => {
  const { isCurrentMobileWidth } = useMobileView(991);
  
  return <p>반환값: {isCurrentMobileWidth}</p>
}

다시 정리하자면 useEffect에 의해서 해당 컴포넌트가 마운트될 때, mobileWith 변수에 등록한 이벤트 리스너 의해 브라우저의 크기를 늘이거나 줄일 때 change 이벤트가 발생하여 screenChange 함수를 호출합니다. 해당 컴포넌트가 언마운트될 때는 등록했던 mobileWidth 이벤트리스너를 제거합니다.

  useEffect(() => {
    const mobileWidth = window.matchMedia(`screen and (max-width:${width}px)`);
    mobileWidth.addEventListener('change', screenChange);
    return () => mobileWidth.removeEventListener('change', screenChange);
  }, []);

이후 screenChange 함수에서는 현재 브라우저의 넓이가 특정 넓이(991px) 이하인지 계산하여 boolean값을 반환하여 isCurrentMobileWidth 상태값을 업데이트 합니다.

  const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
    window.innerWidth < width,
  );

  const screenChange = (event) => {
    setIsCurrentMobileWidth(event.matches);
  };

 

그렇다면, 본격적으로 ChatGpt를 사용하여 이 코드를 개선해보겠습니다. 아래는 ChatGpt가 위에서 사용했던 useMobileView 커스텀 훅 코드를 리팩터링한 결과입니다. 차이점이 바로 보이시나요? GPT는 자세하게 코드, 성능, 타입, 네이밍까지 다양하게 개선했습니다.

export const useMobileView = (width: number) => {
  const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
    () => window.innerWidth < width
  );

  useEffect(() => {
    const mobileWidth = window.matchMedia(`screen and (max-width:${width}px)`);
    const handleScreenChange = (event: MediaQueryListEvent) => {
      setIsCurrentMobileWidth(event.matches);
    };
    
    mobileWidth.addEventListener('change', handleScreenChange);
    return () => mobileWidth.removeEventListener('change', handleScreenChange);
  }, []);

  return { isCurrentMobileWidth };
};

첫번째로 수정한 코드는, isCurrentMobileWidth의 초기 상태를 콜백 함수를 사용하여 설정합니다. 이렇게 함으로써, 초기 렌더링 시점에 window.innerWidth가 변경되어도, 불필요하게 리렌더링이 발생하지 않습니다.

const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
	() => window.innerWidth < width
);

두번째로 수정한 코드는, screenChange 함수를 handleScreenChange으로 이름을 변경했으며, screenChange 함수의 매개변수 event에 대한 타입을 정의해주었습니다.

    const handleScreenChange = (event: MediaQueryListEvent) => {
      setIsCurrentMobileWidth(event.matches);
    };

 

이어서 아래는 ChatGpt에게 @param를 이용하여 주석추가를 요청했더니 훅, 파라미터, 반환값에 대한 설명을 추가했습니다.

/**
 * 화면 너비가 지정한 값보다 작은 경우를 체크하는 Hook
 * @param width 화면의 너비를 나타내는 숫자
 * @returns isCurrentMobileWidth: 현재 화면이 모바일 뷰인지 아닌지 여부를 나타내는 boolean 값
 */
 export const useMobileView = (width: number) => {
  const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
    () => window.innerWidth < width
  );

  useEffect(() => {
    const mobileWidth = window.matchMedia(`screen and (max-width:${width}px)`);
    const handleScreenChange = (event: MediaQueryListEvent) => {
      setIsCurrentMobileWidth(event.matches);
    };
    
    mobileWidth.addEventListener('change', handleScreenChange);
    return () => mobileWidth.removeEventListener('change', handleScreenChange);
  }, [width]);

  return { isCurrentMobileWidth };
};

내부 코드에 대한 설명도 보기 위해 디테일한 주석을 요청하였더니, 한줄씩 자세하게 설명을 해줬습니다. 

import { useEffect, useState } from 'react';

/**
 * 화면 너비가 지정한 값보다 작은 경우를 체크하는 Hook
 * @param width 화면의 너비를 나타내는 숫자
 * @returns isCurrentMobileWidth: 현재 화면이 모바일 뷰인지 아닌지 여부를 나타내는 boolean 값
 */
export const useMobileView = (width: number) => {
  // isCurrentMobileWidth: 현재 화면이 모바일 뷰인지 아닌지 여부를 나타냄
  const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState(
    // 콜백 함수를 사용하여 초기 상태를 설정해줍니다.
    // 이렇게 하면 초기 렌더링 시점에 window.innerWidth 값이 변경되어도, 불필요하게 리렌더링이 발생하지 않습니다.
    () => window.innerWidth < width
  );

  // 화면의 너비가 변경될 때마다 실행되는 함수
  const handleScreenChange = (event: MediaQueryListEvent) => {
    setIsCurrentMobileWidth(event.matches);
  };

  useEffect(() => {
    // 화면 너비가 지정한 값보다 작은지를 체크하는 MediaQueryList 객체를 생성합니다.
    const mobileWidth = window.matchMedia(`screen and (max-width:${width}px)`);

    // 화면 너비가 변경될 때마다 handleScreenChange 함수가 실행되도록 합니다.
    mobileWidth.addEventListener('change', handleScreenChange);

    // useEffect의 cleanup 함수에서 이벤트 리스너를 제거합니다.
    // 이렇게 하면 컴포넌트가 unmount될 때 이벤트 리스너가 삭제됩니다.
    return () => mobileWidth.removeEventListener('change', handleScreenChange);
  }, [width]);

  // 현재 화면의 모바일 뷰 여부를 반환합니다.
  return { isCurrentMobileWidth };
};

 

이렇게 ChatGpt를 통해 현재 작업 중인 코드를 개선해보고 주석 요청을 해보았는데, 깔끔한 코드와 구체적인 설명을 얻을 수 있었습니다. 이제는 ChatGpt를 다양하게 활용하여 수준 높은 작업을 처리할 수 있을 것 같습니다.