Hooks
-
커스텀훅과 함께 컴포넌트와 그 조작 로직을 추상화해보자!🍋 JavaScript 2023. 8. 20. 20:17
🍋 배경 아래 이미지와 같이 콘텐츠를 동적으로 바꿀 수 있고 & 보여주는 시점으로부터 3초 후 언마운트되는 스낵바를 개발하였다. 모든 스낵바 컴포넌트에 마운트 된 3초 후 언마운트되는 로직을 적용하는 것과 같이, 특정 컴포넌트에 반복적으로 적용할 로직이 있는 경우, 그 코드를 응집화 시킬 수 있는 방안에 대해 고민해보았다. 🍋 결과물 🍋 수정 전 다음은 스낵바 컴포넌트를 생성하고 사용하는 구문이다. content prop으로 내부 콘텐츠를 동적으로 받아올 수 있으며, 스낵바를 보여주고 싶을 때 Main 구문 내 activateSnackbar 함수를 호출하여, 그 시점으로부터 3초가 지난 시점에 스낵바가 자동으로 unmount 된다. // 스낵바 컴포넌트 선언 function Snackbar({conten..