[React] 깜빡임 현상 해결 (useLayoutEffect, API호출)
분명 다 만들었지만, 보기엔 흉한 깜빡임 현상!! 이 글에선 두 가지 깜박힘 현상에 대해 다룰 것이다. 1. useEffect 호출에 의한 깜빡임 2. API 호출에 의한 깜빡임 1. UseEffect 호출에 의한 깜빡임 const [duckUrl, setDuckUrl] = useState(''); useEffect(() => { setDuckUrl('/duck.png'); }, []); Hook Flow에 의하면 DOM 배치 → 페인트 작업 → useEffect 호출 순서를 따른다. 따라서 useEffect로 이후 페인트 작업이 한 번 더 이루어짐에 따라(리페인트) 깜빡이는 현상이 나타난다. 2. UseLayoutEffect 을 통한 해결 const [duckUrl, setDuckUrl] = useSt..
