[React] UseEffect

UseEffect는 React Hooks 중에서 가장 중요한 hook이다.

 

UseEffect는 컴포넌트가 Mount, Update, Unmount 될 때 특정 작업을 실행하고 싶을 때 사용된다.

 

UseEffect는 2가지 형태가 있다.

 

별코딩님의 React Hooks에 취한다 강의

 

첫번째는 콜백함수만 존재하고 두번째는 배열을 두번째 인자로 받는다.

 

이 배열은 Deffendency Array라고 불린다.

 

배열이 없는 첫번째 형태는 그 컴포넌트가 렌더링 될때마다 실행된다.

 

두번째 형태는 컴포넌트가 화면에 첫 렌더링 될때 실행되고 value 배열이 바뀔 때만 실행된다.

 

---

첫번째 형태는 말 그대로 그 컴포넌트가 렌더링 될때마다 실행된다고 생각하면 된다.

 

두번째 형태의 경우는 한가지가 더 설명할 부분이 있는데 바로 배열이 비어있을 때이다.

 

배열이 비워져있을 경우에는 그 컴포넌트가 처음에 렌더링 됐을 때만 실행되고 다시는 실행되지 않는다.

 

이러한 3가지 경우를 생각하며 UseEffect를 사용해주면 된다.

 

---

 

마지막으로 이 컴포넌트가 Unmount 될때가 있는데 이 때는 Clean Up이라고 불리는 처리를 해준다.

 

그 컴포넌트라 Unmount 될때 실행될 동작을 useEffect의 return 값으로 지정해주면 된다.