지난번에도 useEffect를 공부하긴 했었는데 아직 헷갈리는 부분이 있어서 다시 정리하면서 공부해보았다.

useEffect

useEffect는 컴포넌트가 화면에 렌더링, 리렌더링, 제거되는 상황에 특정 코드를 실행시켜주고 싶을 때 사용할 수 있다.

• Mount : 화면에 첫 렌더링 되었을 때
• UpDate : 화면이 재렌더링 되었을 때
• Unmount : 화면에서 제거될 때

기본 사용 방법

useEffect()

useEffet(()=>{})

useEffect는 기본적으로 함수 호출하는 것과 같은 형태로 사용할 수도 있지만, 기본적으로 인자로 콜백함수를 넣어 콜백함수 내부에 원하는 작업을 처리하도록 만들어 사용하는 방법을 많이 사용한다.

useEffect의 형태

useEffect(()=>{
	// 실행할 코드
});

▲ useEffect의 인자로 콜백함수만 받는 형태
컴포넌트가 렌더링 될 때마다 실행된다.
컴포넌트가 맨 처음 화면에 렌더링 될 때, 리렌더링 될 때 실행된다.

useEffect(()=>{
	// 실행할 코드
}, [ value ]);

▲ useEffect의 인자로 콜백함수와 두번째 인자로 배열을 받는 형태(dependency array)
컴포넌트가 처음 렌더링 됐을 때, value의 값이 변경되었을 때 실행된다.
두번째 인자로 빈 배열을 넣는 경우 컴포넌트가 처음 렌더링됐을 때만 실행된다.

clean-up

useEffect에서 어떤 서비스에 구독하는 코드가 있다면, 이후 구독을 해제하는 clean-up 작업이 필요하다.
예를 들어 타이머, 이벤트리스너를 등록했다면 이 코드를 제거해주는 정리 작업이 필요하다.

정리 작업을 처리할 때는 useEffect의 리턴 값으로 함수를 넣어주면 된다.

useEffect(()=>{
  	/* 타이머 생성 코드 */
	return () => {
      /* 타이머 제거 코드 */
    }
}, []);

함수를 리턴해주면 해당 컴포넌트가 unmount 되거나, 다음 렌더링시 useEffect 실행 전에 return 값으로 넣은 함수가 실행되게 된다.

---

참고 자료
useEffect 깔끔하게 마스터하기