[React Hooks] Hooks (2)

0. useEffect

• useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate와 비슷하다.
• 이 모든 것과 동일한 function이다.
• react hooks로 작업할 때 중요하다.
• 다음 예시를 보자.

• useEffect는 ComponentDidMount, componentDidUpdate의 역할을 하기 때문에 시작하거나 버튼을 클릭할 때 콘솔에 hello가 찍힌다.
• useEffect의 첫번째 인자는 function으로서의 effect가 된다. 두번째 인자는 dependency이다.
• 만약 dependency(deps)가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다.
• 다음 dependency를 추가한 예시를 보자.

• 여기서 useEffect 두번째 인자 dependency로 [number]를 주었다. 그러면 number를 클릭할때만 콘솔에 hello가 출력되고 aNumber을 클릭했을 때는 출력되지 않는다.
• 이것만 기억하자! useEffect는 ComponentDidMount, ComponentWillUnMount, ComponentDidUpdate 이다!!

---

1. useTitle

• 이제 useEffect를 사용한 첫번째 hooks인 useTitle에 대하여 알아보겠다.
• 나의 문서의 제목을 업데이트 시켜주는 것을 담당하는 hooks를 작성해보자.

• 일단 App함수에서 useTitle에 "Loading..."이 인자로 들어가 있다. 이것이 initialTitle로 가고 title은 initialTitle로 초기 설정이 된다.
• 그 후 updateTitle함수를 정의한다.
• 보면 useEffect의 1번째 인자로 updateTitle이 들어가고, 2번째 인자인 dependency에 title이 들어가 있다. 이것은 title값에 영향을 끼치겠다는 뜻이다. 그리고 useTitle함수는 setTitle을 반환한다.
• 위 코드의 결과로는 처음에 title이 "Loading..."으로 되어 있다가 5초 후 "Home"으로 바뀌게 된다.

5초 후 title 변신!

||

||

V

---

2. useClick

• useClick을 보기 전에 reference에 대해 알고가자.
• reference는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법인데 document.getElementByID()와 비슷한 의미라고 보면 된다.
• react에 있는 모든 component는 reference element를 가지고 있다.
• useClick은 누군가 element를 클릭하는 시점을 발견한다.
• 다음 주석을 참고하여 코드를 보자.

• Hi를 클릭할때 콘솔에 다음과 같은 결과가 나온다.

---

3. useConfirm

• useConfirm은 사용자가 무언가를 하기전에 (확인)하는 것인데 사용자가 버튼을 클릭하는 작업 을 하면 (이벤트를 실행하기 전에) 메세지를 보여주는 것이다. 
• 예를 들면, 나가기를 뒤로가기 버튼을 눌렀을 때 "정말 나가시겠습니가?"라는 메세지를 보여주는 것이다.
• 취소 혹은 확인버튼이 나오며 선택되는 내용마다 다른 메세지를 띄워줄 수 있다.
• 코드와 결과화면은 다음과 같다.

---

4. usePreventLeave

• preventLeave는 보통 웹사이트에서 볼 수 있다. 내가 window창을 닫을 때 정말 나갈 것인지 물어보는 알림창을 띄워준다.
• 코드와 결과화면을 보겠다.

• Protect를 누르고 종료버튼을 클릭하면 위와 같은 화면이 뜨고 Unprotect를 다시 누르면 위와 같은 화면이 뜨지 않고 나가진다.

---

5. useBeforeLeave

• useBeforeLeave는 마우스가 화면을 벗어날 때 사용자가 정의한 함수를 호출하는 것이다.
• 마우스가 벗어나는 좌표를 알 수 있기 때문에 그것을 조정하여 사용하면 된다.
• 사용예시와 결과화면을 보자.

• clientY를 음수로 하였고 음수일 때 onBefore을 호출하는 코드이다. 위 코드는 마우스가 화면 위로 갈때마다 콘솔에 메세지를 띄워준다.