useEffect의 cleanup함수에 대해 알아보자 ❕ 지난 포스터와 같이 useEffect에서 cleanup 함수를 사용해야 할 때가 있다. cleanup 함수가 필요한 경우와 동작 과정이 어떻게 되는지 정리하려고 한다. 1. useEffect 란?useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록 하는 리액트 Hook이다. 컴포넌트가 mount, unmount, update됐을 때 특정 작업을 실행시킬 수 있다. 기본 형태는 useEffect(setup, dependencies?)로 사용되며, dependencies는 생략할 수 있다. dependencies에 빈 배열([ ])을 입력한 경우 컴포넌트가 처음 mount되었을 때 한번 호출되고,..
특정 영역인 div 외부를 클릭했을 때, 이를 감지해 div 영역을 숨겨보자 프로젝트에서 모달창이나 div를 닫기 위해 '취소' 및 '확인' 버튼을 생성해 모달창이 닫히도록 구현해놓았지만, 특정 영역 외부를 클릭했을 때 해당 영역이 자동으로 닫히면 사용성이 더 좋아질 것으로 보여 이 기능을 구현하게 되었다. 처음 훅으로 구현했다가 추후에 더 많은 영역에 탑재될 것으로 보여 리팩토링해서 컴포넌트로 만들어 사용했다. 이 과정을 정리했다. 1. 훅 구현 특정 영역 외부를 감지하고 이를 닫는 기능을 가진 커스텀 훅을 생성하고,사용할 컴포넌트에서 해당 훅을 불러와 사용해 볼 것이다. 1. 훅에서 구현할 내용특정 영역에 부여할 Ref를 생성한다. (이 영역 외부가 클릭되면 모달창이 닫히도록 한다)특정 영..
