[React] useEffect에서의 의존성(dependency)과 실행 흐름

 

useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. 

useEffect 란?

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 

 

근데 useEffect는 왜 Effect라는 이름을 가질까?  

 

Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ")

 

이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 

React의 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 라이프사이클 메소드가 부수 효과를 다루는 데 사용되었다.

그러나 함수 컴포넌트에서는 이러한 라이프사이클 메소드가 없기 때문에 useEffect가 도입되었고, 이를 통해 함수 컴포넌트에서도 부수 효과를 처리할 수 있게 되었다.

 

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

 

useEffect는 기본적으로 모든 렌더링(레이아웃, 페인팅 끝난 후)이 완료된 후에 수행된다.

 

첫 번째 인자로는 수행할 콜백 함수,

두 번째 인자로는 dependency 배열을 전달하면 해당 배열에 속한 요소들이 변경될 때만 콜백함수가 실행된다.

 

콜백 함수 내에서 return clean up 함수를 통해 UI에서 컴포넌트가 제거되기 전에 실행할 함수를 전달할 수 있다. 

---

(*짚고 넘어가는 컴포넌트의 라이프 사이클)

- mount: 컴포넌트가 생성됨.

- update: 컴포넌트가 재렌더링됨. (업데이트됨)

- unmount: 컴포넌트가 삭제됨. (제거됨)

 

 

useEffect 사용 예시

dependency가 없을 때

useEffect(() => {
    실행할 코드 
    consol.log('렌더링 될 때 마다 실행된다.');
});

컴포넌트가 mount / update 될 때마다 코드가 실행된다.

 

컴포넌트가 재렌더링될 때마다 코드를 실행하기 때문에 성능 저하를 일으킬 수 있다. 즉, 비효율적.

 

dependency가 빈 값일 때

useEffect(() => {
    실행할 코드 
    console.log("마운트 될 때만 실행된다.");
}, []);

컴포넌트가 mount 될 때 코드가 실행된다. 

 

컴포넌트가 생성될 때, localStorage에 값을 셋팅하거나 api를 불러오는 등의 액션을 할 수 있다.  

 

dependency가 조건(state)이 있을 때

useEffect(() => {
    실행할 코드 
    console.log("업데이트 될 때 실행된다.");
}, [state]);

컴포넌트가 mount 될 때 실행되고, 이후 해당 조건(state)이 변경될 때마다 코드가 실행된다.

 

*그렇다면 여기서 중요한 점

 

useEffect 안에서 사용하는 상태나 props가 있다면 deps 안에 넣어줘야한다. 

 

왜냐? 특정 상태나 props에 의존성을 두지 않으면, useEffect 처음에만 실행되고 그 이후에는 해당 값이 변경되어도 '실행할 코드'가 재실행되지 않는다. 

return 함수를 추가했을 때

useEffect(() => {
    return () => { 
    	실행할 코드
        console.log("언마운트 될 때만 실행된다.");
    }
}, []);

컴포넌트가 unmount될 때 실행된다.

 

return 함수를 추가한 예시

useEffect(() => {
	실행할 코드 1
    return () => { 실행할 코드 2 }
}, []);

dependency가 빈 값을 때, mount 시 '실행할 코드 1'이 실행되고 unmount 시 '실행할 코드 2'가 실행된다. 

 

*clean up function

dependency에 조건을 넣거나 / dependency가 없는 경우, useEffect 내의 함수가 실행되기 직전에 return 함수가 먼저 실행됨.

새로운 effect(= useEffect 내의 함수)를 실행하기 전에 이전 effect(= return 함수)를 clean up 해주기 때문에 

return 함수는 clean up function이라고 부른다. (* 여기엔 주로 타이머 제거나 api 요청 중단 등의 코드를 작성한다.)

 

clean up function을 사용하게 되면, 작동 순서는 ' re-render -> 이전 effect clean up -> effect ' 

useEffect(() => {
	실행할 코드 1
    return () => { 실행할 코드 2 }
}, [state]);

 

dependency에 조건(state)이 있을 때,

컴포넌트가 mount 될 때 '실행할 코드1'가 실행된 후 state가 update될 때마다 '실행할 코드2' -> '실행할 코드1' 순서로 실행된다.

 

useEffect(() => {
	실행할 코드 1
    return () => { 실행할 코드 2 }
});

 

dependency에 조건(state)이 없을 때,

컴포넌트가 mount 될 때 '실행할 코드1'가 실행된 후 컴포넌트가 update될 때마다 '실행할 코드2' -> '실행할 코드1' 순서로 실행된다.