useEffect를 내가 잘 활용하고 있는 것인지 그리고 어떤 경우에 사용할 수 있는지 문득 궁금해졌다.
실행 시점
useEffect의 정리함수(clean-up)는 기본적으로 마운트 해제 시 수행된다.
의존성 배열을 주면 useEffect 함수는 배열 내부의 값에 업데이트가 발생할 때 실행된다.
이에 대한 정리함수는 다음 effect 실행 전에 실행된다.
useEffect의 정리함수(clean-up)
useEffect에서 정리함수를 사용하는 경우가 있다.
리액트 문서에서는 외부 데이터에 구독을 설정해야 하는 경우를 예로들고 있다.
이런 경우에 메모리 누수가 발생하지 않도록 정리하는 것은 매우 중요하다고 한다.
useEffect의 정리함수는 (의존성 배열에 값이 없으면) 컴포넌트가 언마운트될 때 수행되며 이곳에서 구독 취소나 타이머 해제 등등과 같은 작업들을 해주어 메모리 누수를 방지할 수 있다.
fetch와 같은 비동기 작업이 있을 경우, 이미 언마운트된 컴포넌트의 특정 상태를 변경하려는 시도가 있을 수 있는데, 이는 불필요한 작업이며 리액트에서 경고창을 띄워줄 것이다.
이를 해결하기 위한 방법으로는 useEffect의 정리함수를 활용해 컴포넌트의 마운트 상태를 업데이트하고 이 상태를 활용해 불필요한 작업을 하지않도록 막을 수 있다.
🧸 여기서부턴 잡담 - ! 🧸
useEffect문서를 다시 한 번 보며 처음에 잘못 이해하고있었던 개념들을 다시 잡을 수 있었다.
역할에 맞지 않게 사용되거나 불필요하게 사용된 코드들을 보면서 좀 더 좋은 코드를 작성할 수 있게됐다.
