라이프사이클이란?
- 컴포넌트를 생성하는 방법에는 클래스형 컴포넌트, 함수형 컴포넌트가 있다.
- 클래스형 컴포넌트는 라이프 사이클 개념이 해당된다.
- 라이프 사이클이란 컴포넌트가 브라우저 상에 나타나고(mount), 업데이트 되고, 사라지게 될 때(unmount) 호출되는 메소드들을 합쳐서 지칭하는 말이다.
mount는 언제 쓰이는가?
- 받아온 props를 객체의 state로 설정해줄때
- REST API로 작업을 처리할 때
REST API란? - setInterval, setTimeout을 사용할 때
unmount는 언제 쓰이는가?
- 뒷정리 함수라고 생각하면 된다.
- clearInterval, clearTimeout
- 라이브러리 인스턴스 제거
인스턴스란?
event listener는 등록되면 반드시 해제되어야 한다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제한다. (componentWillUnmount에서) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까?
- Side Effect란, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 지칭한다.
ex) 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것들을 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다. - uesEffect(Effect 훅)은 리액트 클래스에서의 componentDidMount, componentDidUpdate, componentWillUnmount과 같은 목적을 하나의 API로 수행한다.
- useEffect는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는지 알려준다. React는 넘겨진 함수('effect')를 기억했다가, DOM update를 수행한 이후 불러낸다.
- default로 effects는 매번 렌더링될 때마다 실행된다. 그리고 함수를 리턴함으로써 어떻게 해당 effects를 clean up 할지 정할 수 있다.
- cleanup function은 앱의 퍼포먼스를 최적화해주며, 원하지 않는 움직임을 예방해준다.
- useEffect 역시 useState처럼 한 컴포넌트 안에서 여러번 사용될 수 있다.
- useEffect 훅은 생명주기별로 나누지 않고도 관련 조각들을 모아 정리할 수 있도록 도와준다.
- 이벤트 리스너는 DOM객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
- 이벤트 리스너를 이용하면 특정 DOM에 위에서 말한 JS 이벤트가 발생할 때 특정 함수를 호출한다.
- 이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다. 더 이상 해당 이벤트 리스너가 필요없다고 하면 반드시 추가된 이벤트 리스너를 삭제해주어야 한다.
- 함수형 컴포넌트에서는 각각의 라이프사이클 메소드를 useEffect 하나로 통일시킬 수 있다. 대신 dependency를 선언하여 시점을 구분한다. 빈 배열을 선언하면 최초 로드시에만 렌더링이 된다.
- dependency를 선언하지 않으면 컴포넌트가 렌더링될때마다 effect가 실행된다.
- useEFfect를 이용해서 최초 로드 시에 addEventListener를 사용하여 이벤트를 추가해주면 이벤트 감지가 시작된다.
- 이벤트를 등록하고 난 뒤 성능 저하를 방지하기 위해 컴포넌트가 언마운트 될 때 꼭 이벤트 등록을 해제해주어야 한다. 함수형 컴포넌트에서는 useEffect의 내부 함수의 return 값으로 removeEventListener를 통해 해제해주면 된다.
참조:
[useEffect] 컴포넌트 마운트 , 언마운트 제어
[React] Side Effect란?
Using the Effect Hook
Under the Hood of React useEffect Dependencies
함수형 컴포넌트에서 event listener 해제하기
Understanding React’s useEffect cleanup function
