[TIL] side effect, ReturnType<>, setTimeout

메인컨텐츠 랜덤 슬롯머신 구현화면

side effect :

React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컫는다.

→ 랜덤게임 슬롯을 돌릴때 settimeout 을 사용하여 순서대로 0.8, 1.6, 2.4초에 false를 하기로결정했다.
초기에 useEffect에다가 쓰지않고 js 코드를 쓸수있는곳에 함수를 만들어 settimeout을 사용했는데 이때 문제는 동작하는데는 문제가 없지만 만약 시간이 다되어 끝나기전에 해당 컴포넌트를 닫아아버리면(unmount) 해당 settimout에서 state를 업데이트할때 닫혀진 컴포넌트 state 업데이트에 대한 에러가 발생하게된다. 초기한번만 발생하고 새로고침전까진 안뜨긴하지만 어쨋든 이러한 unmount 될시 실행되던 event들을 끝내기위해서 useEffect으로 ComponentWillUnmount 부분에 clearTimout을 해주기로했다.

→또한 타입스크립트를 사용하기때문에 setTimout을 담는 변수에 대한 타입을 선언해줘야한다(이유는 if 안에서 선언하면 var 아닌이상 {} 스코프범위인 지역변수로 인지해서 return() ⇒ 부분에서 못 읽는다. 따라서 if문 밖에다가 let으로 선언해주면 타입을 선언하라고 에러가뜬다).

선언하는타입은 구글링을 통해 찾을수있는데 이때 ReturnType<> 을 사용하여 setTimeout 의 리턴타입을 타입으로 넣어주기로했다. 이때 어떠한 타입인지 모르기때문에 typeof 를 쓰고 뒤에 원하는 변수/함수 등 해당 값을 입력하면 된다. setTimeout이므로 이렇게 쓰면 완성이다.

자세하게는 이렇게 마우스를 올리면 어떤형태를 가지고 있는지 볼수있는데, 이부분은 너무 길어서 구체적으로 무엇을 설명하는지는 모르겠다. 어쨌든 setTimout에 대한 타입은 이런식으로 설정해준다.