컴포넌트 언마운트 시 타이머 정리

"컴포넌트 언마운트 시 타이머 정리”라는 문구는 React 컴포넌트가 사라지거나 더 이상 렌더링되지 않을 때, 이전에 설정된 타이머나 기타 리소스를 적절하게 해제하는 과정을 의미합니다.

 

상세 설명:

• 컴포넌트 언마운트(Component Unmount):

• React 컴포넌트가 더 이상 화면에 표시되지 않거나, 부모 컴포넌트가 언마운트될 때 발생하는 이벤트입니다. 이 경우, 해당 컴포넌트는 “언마운트” 상태가 됩니다. 예를 들어, 조건부 렌더링을 통해 컴포넌트를 제거하거나 페이지 전환 시 컴포넌트가 교체될 때 발생합니다.

 

• 타이머 정리(Clearing Timer):

• setTimeout이나 setInterval 같은 타이머를 설정한 경우, 타이머가 계속 동작하다가 컴포넌트가 언마운트되면 불필요한 코드가 계속 실행될 수 있습니다. 이는 메모리 누수나 예기치 않은 동작을 일으킬 수 있습니다. • 타이머 정리는 컴포넌트가 언마운트되기 전에 clearTimeout이나 clearInterval을 호출하여 더 이상 타이머가 동작하지 않도록 하는 과정입니다.

 

useEffect(() => {
  const timer = setTimeout(() => {
    setVisible(false);
  }, time);

  // 컴포넌트 언마운트 시 타이머 정리
  return () => clearTimeout(timer);
}, [time]);

위 코드에서:

 

• setTimeout으로 설정된 타이머는 3초 후에 visible 상태를 false로 변경합니다.

• 하지만, 컴포넌트가 그 3초 안에 언마운트되면 setTimeout이 계속 실행될 수 있습니다.

• useEffect에서 반환된 함수 (clearTimeout(timer))는 컴포넌트가 언마운트될 때 자동으로 호출되어 타이머를 취소합니다. 이렇게 하면 컴포넌트가 사라진 후에도 타이머가 동작하지 않도록 하고, 리소스를 효율적으로 관리할 수 있습니다.

 

이 과정이 “컴포넌트 언마운트 시 타이머 정리”입니다.