리액트 함수형 / 클래스형 컴포넌트에 따른 이벤트 등록/해제
Isssue
- 어떤 이벤트를 등록하고 다른 컴포넌트로 이동
- 언마운트된 컴포넌트에 쓰였던 함수가 계속 실행되어 오류 발생
- 컴포넌트 마운트/언마운트시 이벤트 등록/해제 처리가 필요
함수형 컴포넌트
useEffect 를 통해 이벤트 등록/해제
반환된 매개변수는 마운트 직전 or 언마운트시 실행
return () => {
//마운트 직전 or 언마운트시 실행
}sample
/**
* useEffect 두번째 매개변수에 [] 빈배열을 넣으면
* 마운트시 : 첫번째 매개변수로 넣은 함수가 실행
* 언마운트시 : return 반환된 함수가 실행
**/
useEffect(() => {
// 마운트시 1번만 실행 (두 번째 매개변수로 []를 넣었으므로)
// 이벤트 바인딩
window.addEventListener('resize', handleFunc);
// 언마운트시 실행
return () => {
// console.log('unmount');
// 이벤트 해제
window.removeEventListener('resize', handleFunc);
}
}, []);setInterval 사용시
useEffect(() => {
// 클리어 해야하므로 useEffect 안에 정의
const interval = setInterval(()=>{
document.getElementById('dinor').classList.toggle('rotate-effect');
// console.log('repeat');
},3000)
// 언마운트시 실행
return () => {
// console.log('unmount');
clearInterval(interval);
}
}, []);클래스형 컴포넌트
componentDidmount, componentWillUnmount 시 등록/해제 처리 필요
class Hello extends React.Component {
// 마운트시 이벤트 등록
componentDidmount(){
window.addEventListener('resize', this.handleFunc);
}
// 언마운트시 이벤트 해제
componentWillUnmount(){
window.removeEventListener('resize', this.handleFunc);
}
handleFunc = () => {
//fnc...
}
}