[React] react-activation 과 주기적 Api 호출

컴포넌트가 변해도 데이터를 유지해야 할 상황이 생겼다. 

vue에서는 내부적으로 KeepAlive가 존재했는데 react는 존재하지않아 react-activation 이라는 라이브러리를 받아 사용하기로 하였다.

 

import KeepAlive from 'react-activation'

const DeviceListComponent = (props) => {

	if (state === 'live') {
		return <KeepAlive><AComponent /></KeepAlive>
	} else if (state === 'last') {
		return <KeepAlive><BComponent /></KeepAlive>
	}
}

 

위와같이 사용하여 AComponent와 BComponent 안에 데이터들은 유지시킬수 있게되었다.

 

KeepAlive를 사용하게 되면 

해당 클래스들로 내부 컴포넌트가 감싸지게 되는데, 빈 영역이라 하지만 퍼블리싱 받은 파일에서 레이아웃 배치가 꼬여 css를 조금 손보는거로 해결하였다.

 

해당 내부 컴포넌트중 하나는 주기적으로 N초마다 Api를 호출 하도록 해야하는데 KeepAlive로 인해 UnMount가 되지 않아 화면이 이동해도 api를 호출하여 에러가 발생하였다. 해결방법을 찾기로했다.

 

react-activation 에 내부 hook중 useUnactivate, useActivate 을 사용해보기로 하였다.

 

해당 hook들은 화면이 나타날때와 사라질때 호출되는 hook인데 번거롭게도 라이프 사이클상 저 두개의 hook에선 setState를 호출 할 수 없어 여러 방법을 고민하게되었다.

 

첫번째로 고민한 방법은

settimeout 함수 자체를 state에 담아 useUnactivate때 setState를 하지않고 claertimeout에 state를 그대로 담아 사용하였다. 이 방법으로 하니 컴포넌트 이동 후 정상적으로 함수호출이 중단되었는데, 다시 컴포넌트로 돌아올때 함수호출이 안되어 다른 방법을 쓰기로 하였다.

 

머리를 싸매던 중 사내 이사님께서 조언을 해주시기를 지역변수를 아예 전역변수로 빼서 선언 하라고 조언을 해주셨다.

 

let flag = true
let timer

const AComponent = () => {
...
}

이런 형식으로 구현하여 flag값을 컴포넌트 내부에서 변경시켜주었고 timer 객체에 호출메서드를 넣어

	useActivate(() => {
		flag = true
	})

	useUnactivate(() => {
		flag = false
	})

hook을 사용하였고, 또 다른 라이브러리를 추가하지않고 잘 해결하였다.