useEffect의 동작원리
-
useEffect는 기본적으로 컴포넌트의 첫 번째 렌더링 이후에 실행되며, 그 이후의 모든 업데이트에서 수행된다. 따라서useEffect가 수행되는 시점에는 이미 DOM이 업데이트 되고 난 상태인 것이다.deps가 빈 배열이면 컴포넌트가 mount된 시점에 딱 한번만 실행됨deps를 전달하지 않으면 컴포넌트가 리렌더될 때마다 실행됨
-
React는 우리가
useEffect에 넘긴 함수(effect)를 기억하였다가 DOM을 업데이트한 이후에 실행한다. -
useEffect에 전달된 함수가 모든 렌더링에서 다르다. 리렌더링할 때마다 모두 이전과 다른 effect로 교체된다. 각각의 effect는 특정한 렌더링에 속한다. -
컴포넌트의 렌더링 안에 있는 모든 함수는 렌더가 호출될 때 정의된 props와 state 값을 잡아둔다.
useEffect는 리액트 트리 바깥에 있는 것들을 props와 state에 따라 동기화 할 수 있게 한다.
정리(clean-up)를 이용하는 Effects
- cleanup 함수는 effect 함수에서 리턴되는 함수이며, 컴포넌트가 unmount될때 실행된다.
컴포넌트 unmount ➡ cleanup 함수 실행 ➡ 컴포넌트 mount ➡ effect 실행
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);
// cleanup 함수
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
};
});❓ cleanup을 하는 이유?
-
DOM이 업데이트 된 후에 네트워크 요청을 보내거나, DOM을 변형하거나 로깅을 하는 등의 side effect는 cleanup이 필요하지 않다.
-
setInterval, setTimeout을 사용해 등록한 작업이나 effect에서 생성한 이벤트 리스너가 중복 생성되지 않도록 제거하거나, 구독을 취소하는 경우 필요하다.
-
리렌더링 되었을 때 React가 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect를 정리해주어야 한다.
🔗 Reference
프론트엔드