팀 프로젝트

Refactoring

반복되는 코드 사용

theme 을 적용하는 과정에서 theme 에 맞춰 아이콘이나 스타일을 바꿔 끼우는 과정에서

const {theme}=useTheme()
(중략)
 <Image
            src={`/images/icons/${
              theme === 'baple'
                ? 'comment_select.svg'
                : 'CBicons/CBcomment_select.svg'
            }`}
            width={20}
            height={20}
            alt='comment icon'
            className='mr-2'
          />

이런 형태의 코드가 아주 많이 반복되게 되었다.
theme의 값을 읽고 그것이 'baple' 과 일치할 경우를 조건으로 삼아 삼항연산자를 사용한 것이다.

동일한 형태의 코드가 많이 등장하는만큼 조금이라도 코드를 정리하고 가독성을 향상시키기 위해 useTheme 과 관련된 부분을 훅으로 만들어 보았다.

//hooks>useCurrentTheme.ts
import { useTheme } from 'next-themes';

export const useCurrentTheme = () => {
  const { theme } = useTheme();
  const baple = theme === 'baple' ? true : false;
  return { baple };
};

커스텀 훅은 위와 같이 극히 간단한 형태이며 삼항 연산자를 사용할때 ===를 이용한 동등 연산을 거치지 않고 baple이라는 변수에 boolean 을 담아 baple 이라고 한번 적는 것 만으로 삼항 연산자를 쓸 수 있도록 만들었다.

막상 작업을 하고 나니 useMutation 을 커스텀훅에 담았을 때만큼 큰 차이는 나지 않는것 같지만 그래도 좋은 연습이 되었다.