컴포넌트 Unmount 시에 효과주기

[punchdrunkard]

개요

• 목표 : 컴포넌트가 Unmount 될 때, 서서히 사라지는 효과를 준다.

구현

• 아래 useDelayUnmount의 구현을 요약하면,
• 컴포넌트의 mount, unmount 상태를 해당 훅에 넘겨주면, 해당 훅의 동작에 의하여 mount, unmount 동작이 delay를 가지고 실행된다.
• 따라서 unmount 시에 효과를 주기 위해서 컴포넌트의 show 상태를 해당 훅에 넘겨주면 된다.

// isMounted : 효과를 줄 컴포넌트의 마운트 상태
// delayTime : 사라질 때 걸리는 시간
const useDelayUnmount = (isMounted: boolean, delayTime: number) => {
  const [shouldRender, setShouldRender] = useState(false)

  useEffect(() => {
    let timeoutId: NodeJS.Timeout

    if (isMounted && !shouldRender) {
      setShouldRender(true)
    } else if (!isMounted && shouldRender) {
		// delayTime 이후에 컴포넌트를 unmount한다.
      timeoutId = setTimeout(() => setShouldRender(false), delayTime)
    }
	// useEffect의 cleanup 함수
    return () => clearTimeout(timeoutId)
  }, [isMounted, delayTime, shouldRender])

  return shouldRender
}

export default useDelayUnmount

예시

• 관련 코드 : https://github.com/dnd-side-project/dnd-8th-1-frontend/blob/develop/src/hooks/useDelayUnmount/index.tsx
• 관련 PR : [feat] - SidebarMenu 컴포넌트 구현  #47