useEffect와 생명주기 메서드 (+ clean-up 함수)

[ghdtjgus76]

useEffect 훅은 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각하면 됩니다.

useEffect는 함수형 컴포넌트에서도 클래스 컴포넌트의 생명주기 메서드를 사용할 수 있게 해주는데, useEffect에서 componentWillUnmount 메서드에 해당하는 기능이 clean-up 함수입니다.
clean-up 함수는 컴포넌트가 사라질 때 (unmount 시점), 특정 값이 변경되기 직전 (deps update 직전)에 실행할 작업을 실행할 수 있습니다.
clean-up 함수의 목적은, 선언될 당시의 과거 변수 값을 참조하고 있던 effect가 클린 업(정리)되고, 새로운 변수 값을 다시 참조하게 되는 것입니다.

useEffect의 clean-up 함수의 동작 순서는 다음과 같습니다.

1. props나 state가 업데이트
2. 컴포넌트 리렌더링
3. 이전 effect 클린 업
4. 새로운 effect 실행

그래서 만약 props.value가 10에서 20으로 업데이트되었다면,

1. props.value = 20
2. 컴포넌트 리렌더링
3. 이전 effect 클린 업 (props.value = 10)
4. 새로운 effect 실행 (props.value = 20)

위 예시에서도 알 수 있듯 useEffect를 사용할 때 state는 즉시 업데이트되지 않습니다.
useEffect를 사용하면 내부 익명 함수는 렌더링마다 새로 생성이 되는데, 여러 번 생성된 각각의 함수는 생성될 당시의 state 값을 바라봅니다.
즉, 클로저가 생성되었다는 뜻입니다.
useEffect에 전달한 함수는 리액트가 변경사항을 DOM에 전부 반영해서 렌더링을 끝낸 뒤에 실행해주는 함수입니다.
이 함수는 생성될 그 당시의 state 값을 그대로 기억하고 있습니다.

useEffect의 익명 함수는 컴포넌트 내부의 state, props를 렌더링 단위로 기억합니다.
이는 익명 함수가 생성될 당시의 상황을 기억하는 클로저의 특성 때문입니다.

참고 자료

https://velog.io/@sjoleee_/useEffect%EC%9D%98-cleanup%ED%95%A8%EC%88%98
https://velog.io/@effypark/useEffect-feat.-clean-up