React Hook 정리 - useEffect

useEffect를 이해하기 위해서는 우선 아래의 케이스를 알아야 한다.

 

Mount : 화면에 첫 렌더링

Update : 재렌더링

Unmount : 화면에 사라질 때

 

useEffect는 위 3가지 상황에 특정 코드를 실행하고 싶을 때 사용된다.

기본적으로 인자를 콜백함수를 받는다. 따라서 우리가 원하는 작업은 콜백함수 내에 작성한다.

보통 아래 두 가지 케이스로 사용된다.

useEffect(() => {
	// TODO implement
});

위 케이스는 아규먼트로 콜백함수만 받는 경우,

useEffect(() => {
	// TODO implement
}, [value]);

두번째 케이스는 아규먼트로 콜백함수와 배열을 받는 형태이다. (Feat. Dependency Array)

 

1번 케이스는 페이지가 렌더링 될 때마다 실행된다.

2번 케이스는 첫번째 렌더링 이후 value 값이 변경될 때만 실행된다. 만약 value에 빈 배열을 넣을 경우에는 화면에 첫 렌더링 될 때에만 실행이 된다.

 

Clean Up 작업 (예: subscribe나 listener 등록을 해지 할때) 👉 useEffect의 return 값에 함수를 작성해준다.

useEffect(() => {
	// subscribe or regist
    return () => {
    	// Unsubscribe or Unregist
    }
}, []);