React Hooks 2일차

#2.0 Introduction to useEffect

useEffect()는
componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다.
useEffect( sayHello, [ number ]);

1번째 인자-function으로서의 effct

• componentDidMount()와 기능이 비슷함

2번쨰 인자-deps (dependency) 배열형태

• useEffect()가 deps리스트에 있는 값이 변할 때만 실행되게 함
• componentDidUpdate()와 기능이 비슷함

---

#2.1 useTitle

---

#2.2 useClcik

reference는 component의 어떤 부분을 선택할 수 있는 방법이다.
모든 component는 reference prop을 가지고 있다.
useRef()는 document. getElementById() 와 같은 기능을 한다.
htmlTag에 ref={이름} 와 같이 사용한다.
reference는 {current: HTMLHeadingElement} 의 형식으로 값을 반환한다.
useEffect에서 return한 함수는 componentWillUnmount 때 호출된다.
참고로 useEffect에서 return한 함수를 cleanup function(클린업 함수)라고 부릅니다.
eventListener가 계속 추가되는 것을 막기 위해 useEffect의 두번째 인자에 [ ]를 넣는다.

---

#2.3 useConfirm & usePreventLeave

이것들은 useState나 useEffect를 사용하지 않기 때문에 hook이라 볼 수 없기도 하다. 하지만 함수형 프로그래밍을 위한 것이기 때문에 만든다.

useConfirm

usePreventLeave

---

#2.4 useBeforeLeave

eventListener에 mouseleave가 아닌 다른것을 넣어서 다른 Hook을 만들 수 있다.

---

#2.5 useFadeIn & useNetwork

useFadeIn

useNetwork