[ReactJS] Hooks(6)

useBeforeLeave

유저가 일정 역역을 떠날 때 발생하는 이벤트 훅이다. 'mouseleave'를 통해 마우스가 일정 영역을 벗어나면 이벤트를 발생시킨다. 위 코드는 <h1> 영역을 벗어나면 이벤트가 발생한다. 마우스가 떠났을 때의 event의 clientY 값보다 작을 때를 조건으로 삼았다. 즉, 마우스가 <h1> 상단으로 벗어날 때만 이벤트가 실행된다.

useFadeIn

컴포넌트 내에서 스타일을 입힌다. useRef로 요소를 가져오고, 기본적으로 가져온 요소와 'opacity: 0'을 리턴한다. 페이지가 렌더링되면 현재 요소에 'transition'으로 'opacity'와 'ease-in-out'을 각각 몇 초간 실행하고, 'opacity'를 1로 만든다. useFadeIn()의 인자로는 'opacity' 만료시간과 'ease-in-out' 지연시간을 줬다.

<h1> 태그는 'opacity'가 1초 동안 변하고, 2초 후에 나타난다. <p> 태그는 'opacity' 5초, 'ease-in-out' 5초를 준 상태다. 필요하다면 다른 css를 추가하면 된다.

useNetwork

인터넷 연결을 감지하는 훅으로, navigator.online을 감지해 현재 인터넷 상태를 알려준다. window의 event 중 'online'과 'offline'이 있어 해당 상태일 때의 함수를 적용할 수 있다. 인터넷 연결을 잠시 끊으면 offline이벤트가 실행되면서 Online이 Offline으로 바뀐다.