커스텀훅과 함께 컴포넌트와 그 조작 로직을 추상화해보자!

🍋  배경

아래 이미지와 같이 콘텐츠를 동적으로 바꿀 수 있고 & 보여주는 시점으로부터 3초 후 언마운트되는 스낵바를 개발하였다. 

모든 스낵바 컴포넌트에 마운트 된 3초 후 언마운트되는 로직을 적용하는 것과 같이, 특정 컴포넌트에 반복적으로 적용할 로직이 있는 경우, 그 코드를 응집화 시킬 수 있는 방안에 대해 고민해보았다.

 

 

🍋  결과물

스낵바 예제

 

 

🍋  수정 전

다음은 스낵바 컴포넌트를 생성하고 사용하는 구문이다. content prop으로 내부 콘텐츠를 동적으로 받아올 수 있으며, 스낵바를 보여주고 싶을 때 Main 구문 내 activateSnackbar 함수를 호출하여, 그 시점으로부터 3초가 지난 시점에 스낵바가 자동으로 unmount 된다.

// 스낵바 컴포넌트 선언 
function Snackbar({content}: {content: string}){
    const transition = useTransition(isActive, {
        entering: { animation: `${slideIn} 0.5s ease-in-out forwards` },
        exiting: { animation: `${slideOut} 0.5s ease-in-out forwards` },
    });

	return (
		<HStack style={transition}>
			<CheckIcon/>
			{content}
		</HStack>
	)
}

// 스낵바 컴포넌트 사용
function Main(){
	const [showSnackbar, setShowSnackbar] = useState(true)

    function activateSnackbar() {
        setShowSnackbar(true);
        setTimeout(() => setShowSnackbar(false), 3000);
    }

	return (
		{showSnackbar && <Snackbar content="등록되었어요."/>}
	)
}

하지만

.

.

Main 컴포넌트 뿐 아닌 다른 컴포넌트에서 스낵바가 사용되고, 3초 후 사라지는 로직(activateSnackbar 함수)이 여러 번 사용된다면?

모든 snackbar를 3초가 아닌 5초 뒤에 사라지도록 변경한다면?

 

 

이와 같이 변경하거나 확장해야 할 코드가 있을 때 스낵바가 사용된 모든 부분을 다시 확인하고 추가/제거해야 한다는 문제가 있었고, 더욱 유연성 있는 코드를 만들기 위해, 바뀔 수 있는 부분은 찾아내고, 바뀌지 않는 부분을 분리시킬 수 있는 방법을 고민해 보았다. 

 

 

 

 

🍋  수정 후

// 스낵바 컴포넌트 선언 
function Snackbar({content}: {content: string}){
   const transition = useTransition(isActive, {
     entering: { animation: `${slideIn} 0.5s ease-in-out forwards` },
     exiting: { animation: `${slideOut} 0.5s ease-in-out forwards` },
   });

	return (
		<HStack style={transition}>
			<CheckIcon/>
			{content}
		</HStack>
	)
}

// useSnackbar.tsx

function useSnackbar(
  content: string,
): [boolean, () => void, () => JSX.Element] {
	const [showSnackbar, setShowSnackbar] = useState(true)

  function activateSnackbar() {
    setShowSnackbar(true);
    setTimeout(() => setShowSnackbar(false), 3000);
  }

  const Snackbar = () => <_Snackbar isActive={showSnackbar} content={content} />; // --- (1) 

  return [showSnackbar, activateSnackbar, Snackbar];
}

// 사용문 

import useSnackbar from "@/hooks/useSnackbar";

function Main(){
	const [showSnackbar, activateSnackbar, Snackbar] = useSnackbar("시간표에 추가되었습니다."); // Snackbar 내부 컨텐츠 

	return (
		{isActive && <Snackbar/> }
	)
}

 

스낵바 컴포넌트와 이를 조작하는 함수를 useSnackbar 훅에 응집하여 커스텀 훅을 생성하였다. 스낵바를 조작할 때 사용하는 다음의 간단한 인터페이스만을 제공하고, 

- 스낵바 렌더링 여부를 판단하는 상태값: showSnackbar
- 스낵바를 보여줄 시점에 호출할 함수: activateSnackbar
- 동적으로 전달한 content를 담은 스낵바 컴포넌트를 반환하는 함수: Snackbar

스낵바가 마운트 된 시점으로부터 3초 후 언마운트되는 복잡한 로직은 숨겨진 추상화/캡슐화 된 코드가 완성되었다!

 

🍋  정리

누군가는 이미 해보았던 고민일 수도, 적용하고 있는 방법일 수도 있지만...

같은 고민을 하는 분들에겐 꽤나 유용하게 쓸 수 있는 패턴이라고 생각합니다!

 

(다른 chakra ui가 지원하는 유틸리티 훅과 함께 사용해 본 예제입니당 https://github.com/Plan-A-project/Plan-A-client/issues/37)

 

 

🍋  2024-03-08

현재 시점에서 포스팅 방식처럼 컴포넌트 자체를 커스텀훅에서 반환하게 하는 방식에 여러 이슈가 발생하였습니다.

1. 커스텀 훅과 외부 컴포넌트의 결합도가 너무 높아, 유사한 로직의 커스텀 훅에도 디자인이 다른 컴포넌트 별 별도의 커스텀 훅을 만들어야했던 이슈.
2. 커스텀 훅 내부적으로 선언한 상태값(A)이 있고, 커스텀훅이 반환하는 컴포넌트(B)가 그 상태값(A)을 인자로 받는다면, A가 변경될 때, 커스텀 훅을 사용하는 부모 컴포넌트 & A를 인자로 받는 B에 리렌더링이 중복하여 발생하는 이슈.

위 이유로 현재는 HOC 패턴을 적용한 커스텀훅 컴포넌트 반환 방식은 더이상 채택하지 않은 채, 컴포넌트와 커스텀훅의 선언문을 분리하고, 커스텀훅이 반환한 props를 컴포넌트에 전달하는 방식을 채택하게 되었습니다.

추후 기회가 된다면 예제와 함께 정리해 보겠습니다.

(읽어주셔서 감사합니다. 꾸벅) 

 

 

 

 

참조

*https://www.patterns.dev/posts/provider-pattern*

*https://patterns-dev-kr.github.io/design-patterns/hoc-pattern/*

https://biggwang.github.io/2019/06/28/Design Patterns/[Design Patterns] 팩토리 패턴, 도대체 왜 쓰는거야-기본 이론편/