useEffect 사용시 주의할점... (약간의 시간차를 조심하자)

useEffect 를 통해 props 에 따라 다이나믹하게 div 의 레이아웃을 css 가 아닌  style 속성을  통해 변경해야할 상황이 생겼는데,

레이아웃이 변경될때마다, 화면이 깜빡거리는 일이 발생했다.

원인을 몇시간동안 추적해본 결과 useEffect 에서 style 을 변경하여 생기는 문제였다.

useEffect 는 Max 에서 [delay] 객체를 사용하는것마냥 약간의 시간차를 두고 호출되는거같다.

이 약간의 시간차가 화면이 깜빡거리게끔 느끼게 하는것이다.

예를 들어, width 가 바로 0 이 되어야하는데, 40 에서 약간 떠있다가 0 으로 되어 깜빡이는것처럼 느껴졌던것이다.

결국 className 에 display: none 에 해당하는 class 를 asign 함으로써 문제를 해결할수있었다.

 

----

추가 :  아래는 한결님이 알려주신 타이밍을 컨트롤하는 해결방법. 

import React, { useEffect, useState } from "react"

const App: React.FC<{}> = props => {

    const [flag, setFlag] = useState(false)

    useEffect(() => setFlag(true), [])

    if (flag) return <div></div>
    else return <></>
    

}

export default App