setTimeout()
[React] 리액트에서 setTimeout 더 편하게 쓰기
[React] 리액트에서 setTimeout 더 편하게 쓰기
2024.05.28React에서 setTimeout 같은 타이머 API를 사용할 때 컴포넌트의 생명주기를 고려하지 않으면 메모리 누수나 예기치 않은 예외가 발생할 수 있다. 예를 들어 타이머를 설정한 후 컴포넌트가 언마운트돼도 타이머는 여전히 실행되고, 이후 타이머 콜백에서 언마운트된 컴포넌트의 상태를 업데이트하려고 하면 에러가 발생할 수 있다. 위 같은 상황을 방지하기 위해 useEffect의 클린업 함수에 타이머 해제 로직을 추가한다. 하지만 한 컴포넌트에서 여러 타이머를 관리해야 한다면 메모리 누수 뿐만 아니라 타이머를 관리하기 위한 로직 때문에 컴포넌트의 복잡성이 높아질 수 있다. 만약 별도의 커스텀 훅에서 타이머를 관리하고, 커스텀 훅이 언마운트 될 때 모든 타이머를 자동으로 해제한다면 해당 훅을 사용하는 곳에선..