useEffect

What is useEffect?

Hook은 함수형 컴포넌트가 클래스 컴포넌트의 lifecycle을 사용할 수 있도록 만들어진 함수들이다. 그중 useEffect는 리액트 useState 다음으로 가장 많이 보이는 Hook 인 것 같다.

useEffect는 다음 3개 lifecycle를 hook해준다.

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

componentDidMount과 componentDidUpdate는 컴포넌트가 새로 만들어질때(mount), state나 props이 바껴서 새로 업데이트 될 때(update), render() 다음 호출되는 lifecycle이고, componentWillUnmount는 컴포넌트가 화면에서 사라질 때 호출된다.

useEffect를 사용하면 mount/unmount/update 됬을 때 특정작업을 처리 할 수 있도록 도와준다.

주로 하는 작업

Mount 할때

• 외부 API 요청
• 라이브러리 사용
• props로 받은 값은 컴포넌트의 로컬 상태로 저장
• setInterval를 통한 반복작업 혹은 setTimeout을 통한 작업 예약

unMount 할때 (clean up 함수)

• setInterval,setTimeout을 사용하여 등록한 작업들 clear
• 라이브러리 인스턴스 제거

사용법

첫번째 parameter: useEffect가 호출되면 실행할 함수
두번째 parameter: 의존값이 들어간 배열 (dependency)

[ Dept에 값 안 넣고 빈 배열 ]

1. Mount 되었을 때 useEffect에 등록된 함수가 실행 된다. (componentDidMount)
2. clean up 함수가 존재할 때, clean up 내의 함수가 실행(componentWillUnMount)

[ Dept에 특정값 넣은 경우]

1.Mount 되었을 때 useEffect에 등록된 함수가 실행 된다. (componentDidMount)
2. 지정한 값이 update 할 때 호출(componentDidUpdate)

[ Dept 생략한 경우]

컴포넌트 리렌더링 될 때마다 useEffect에 등록된 호출
(기본적으로 dependency가 들어가는게 맞다.)