Clean-up function

프로젝트를 작업 하면서 프로젝트를 계속 사용하고 있으면 속도가 느려지는 버그를 확인 했다. 처음에는 크롬이 또 말썽을 부리는구나 생각해 브라우저를 닫거나 캐쉬도 주기적으로 제거하고 안 쓰는 코드도 지웠다 하지만 속도 변화는 없었고 라이트 하우스로 속도 측정을 했지만 문제점은 발견 하지 못했다. 콘솔에 react-action에 표시된 store에 데이터를 확인해 보니깐  안쓰는 데이터가 엄청 쌓여 있던고 알고 보니깐 리플레쉬하면 리덕스가 비워지는 현상만 믿고 리덕스를 주기적으로 비우는 작업을 하지않아서 생기는 오류 였다. 버그를 발견하고 리덕스에 스토어 마다 스토어 state를 리셋하는 action를 만들어서 컴퍼넌트가 없어지면 리셋하게 useEffect에 return에 걸어서 스토어를 주기적으로 비우니깐 어플리케이션에 속도 항상에 도움이 되었습니다. 참고 했던 블로그에 글를 가지고 왔다. 

 

 

• useEffect의 return 값으로 clean up 함수 (기존의 effect를 해지) 작성
• 메모리 누수가 발생하지 않도록 하기 위함

• 일반적으로 clean up이 필요하지 않는 effect (네트워크 리퀘스트, DOM 수동 조작, 로깅 등)은 return 값을 명시하지 않음

• 정리(clean-up)가 필요한 Effects
  • 이벤트 리스너가 계속 추가되는 경우
  • 외부 데이터를 fetch하는 경우
    : 빈 배열을 인자로 넣음으로써 해결할 수도있지만, 의존성이 있는 경우 사용할 수 없음

• 빈 배열로도 메모리 누수가 해결되지 않는 경우
  • 예시) toggle 기능으로 컴포넌트가 계속 새로 렌더링 되는 경우, 불필요한 이벤트 리스너가 계속 생성될 수 있다. clean up 함수를 반환하여 이전 effect를 정리하도록 하게 해야 한다.

    useEffect(() => {
      window.addEventListener("resize", checkSize);

      return () => {
        window.removeEventListener("resize", checkSize); //다음 useEffect 호출시 실행됨
      };
    }, []);

• effect를 정리(clean-up)하는 시점
  • 리액트는 컴포넌트가 마운트(실제 DOM삽입) 해제되는 때에 정리 함수를 실행한다.
  • 즉, 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect를 정리한다.

그 외

• useEffect는 여러 번 사용가능하기 때문에 관련 로직끼리 묶을 수 있음 (Hook의 동기)
• 여러 state가 있을때 각 state에 따라 컴포넌트의 일부가 렌더링되게 할 수 있음

참고 블로그 - https://velog.io/@swimme/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%ED%9B%84-effect-useEffect